Image field vs WYSIWYG or a better way?

• Andrew C

• December 3, 2013 at 8:36 pm

There is some crossover here with this post – http://support.advancedcustomfields.com/forums/topic/wp-media-uploader-missing-attachment-display-settings/

I was wanting to redo a client homepage so that there is no markup in the editor and it’s easier to make changes without breaking anything.

The layout is 3 columns with an image at the top of each column (with link to page), some text overlaying the image and paragraphs of text below. To do this I’ve created 6 ACF boxes for each column – image, image alt text, overlay text, link URL, link title, and content.

Q1 – I assume that using a repeater here would be a good idea instead of manually creating 3 sets of 6 fields?

This all works fine except when I set the image with the image field I don’t get the attachment display settings box as noted in the post above. This means I can’t select the correct image size and the html is different so I get:

<div class="overlays">
<a title="Test Title for image" href="http://www.advancedcustomfields.com/resources/field-types/image/">
<strong><img src="http://www.testsite.dev/wp-content/uploads/2013/10/Image-1.jpg" alt="test alt text"></strong>
<span><h2>About</h2></span>
</a>
</div>

instead of something like:

<img class="alignnone size-medium wp-image-20" alt="test text" src="http://testsite.dev/wp-content/uploads/2013/09/Images_for_Website-01-300x300.jpg" width="300" height="300" />

If I use a WYSIWYG field instead then I can set it all as normal but it puts extra <p> tags in and breaks the overlay but on the plus side it does cut down the number of fields needed as image, alt text, link and link title can all be set from one field.

I’ve read the documentation on the image field and can see you can choose the right size via code (which I don’t fully understand but can probably get working). I guess I could also include the class, width and height parts in the template file as well then? Coding skills aside this should work fine but feels a little rigid somehow but it would make it pretty fool proof for the end user.

On the other hand I wondered about using a WYSIWYG and finding a way to remove the extra <p> tags via PHP.

So the main question was just to get some advise on which is the better option really or if I’ve missed a better way of doing it… also wondered if the attachment display options is likely to be included in the image field any time soon?

Regards

Andrew

• Elliot

• December 4, 2013 at 10:25 am

Hi @Andrew C

100% I would use an image field over the WYSIWYG field, simply for the fact that if your user selects the incorrect image size, then the website will break.

The less a client can edit, the better your website will remain intact!

Please refer to the image field documentation to see how you can load any size you wish for an image.

The best option is to set the image field’s ‘return type’ to ‘image array’. This will give you an array containing all the image data including a ‘sizes’ array which holds all the different size urls and the width / height info.

If PHP is not your strong point, I would set aside na hour to read over some basic array tutorials and play around with some debug code like so:

<?php 

$image = get_field('image_field');

echo '<pre>';
	print_r( $image );
echo '</pre>';
die;

 ?>

As for the repeater field, yes, this is a much smarter way to organise your fields and will simplify your template code!

Check out the have_rows function to loop through repeater field data!

Hope that helps.

Thanks
E

• Andrew C

• December 4, 2013 at 11:18 am

Hi Elliot,

Thanks for the advise, I thought it was probably a more robust solution to use but just wanted to confirm I was on the right track.

I will brush on my PHP and re-read the documentation on the image field to implement.

On the repeater field I’ll definately make a purchase on that soon, I was just wanting to get to grips with a slightly simpler (if more repetitive) version dealing with one field at a time as a starting point.

Out of interest is there a donate option somewhere as I didn’t notice an obvious one. I’ll be buying the repeater add-on and possibly the gallery one but a general donation option might also be good for such a great and useful plugin coupled with great support! 🙂

Kind Regards

Andrew