Hi Mel,
I saw the example site you mentioned, and it looks like the first half is displayed by a plugin/theme, and the second half is using shortcodes. So, as you see, this plugin only outputs “raw” field values, and the styling is up to the HTML and CSS.
—
About the image: it looks like the width/height parameters only specify the maximum, and the final result depends on the proportions of the original image. To solve this, it would be best to use a field that returns the image as an attachment ID – that way, the plugin can retrieve cropped thumbnails. When it’s stored as URL, it can only display in the original size and proportion – and resized by HTML attributes (width/height) which don’t handle cropping.
For example, using Advanced Custom Fields, you can create an image field that returns an attachment ID. Then, this plugin can get the cropped thumbnail, using size=thumbnail.
—
To make the text display to the right, you can “float” the image. If you inspect the element using Chrome or Firefox, you can see that the class alignleft
is applied to the thumbnails. So, for the shortcode-generated version, you can set it also:
[field image=wpcf-picture in=url width=180 image_class=alignleft]
The person’s name is displayed using a header tag <h1>
in the original version. So, you can do:
<h1>[field wpcf-name]</h1>
For the description, the original version puts a paragraph tag <p>
– and I think needs a better line height. So you can do:
<p>[field description]</p>
Then in your style.css:
p {
line-height: 1.2em;
}
I also see that the whole thing is displayed in bold font. The original version uses a bunch of <strong>
elements, but it would simpler to create a class for it.
[loop type=Church_User]
<div class="each-user">
...
</div>
[/loop]
Then in your style.css:
.each-user {
font-weight: bold;
}