Struggling to find a “best of both worlds” solution to the following conundrum…
I need to use Image Array as the return format for SEO reasons — my client hired an expert who spent a huge amount of time customizing all of the ALT and TITLE tags with rich content.
BUT, the client also wants a design that requires responsive images, which seems to only be possible with ID as the return format.
Is there some way to combine both? Or is the only solution to code in a size option for every image so they get a variety of sizes? (Building with repeaters, so can’t use unique instances for every image.)
The easiest way to do this is to construct an image tag, the same way that WP constructs and image tag when you insert an image into the content. Then you pass that image tag though the WP filter that makes the image tag responsive.
I generally use the image URL for the largest size image that should be shown in a particular location. For example, if the image will never be more that 1/2 the width of the display (these are just example number) say the max width of a page is 200 pixels then I use an image size that is around 1000 pixels wide.
$image_tag = '<img src="'.$image_url.'" width="'.$image_width.
'" height="'.$image_height.'" alt=" '.$image_alt.
' " title="'.$image_title.'" class="size-'.
$image_size.' wp-image-'.$image_id.'" />';
$image_tag = wp_filter_content_tags($image_tag);
echo $image_tag;
Also, I generally do not ever use the array return on images. It is too slow, getting all the information for every image size reduces performance. I generally just get the image ID and then you standard WP function to get everything else for the specific image size.
Hey @hube2 finally had a chance to test this. Unfortunately not working for me. Tried with both ID and URL (since you mentioned both in the replies) and also assumed I’d need:
$image_url = get_field('image');
…at the start, so as to include the ACF field. Also assumed that the $image_tag bit was WP native based on how you described it, so not sure what I’m missing.
I only included the construction of the image tag and not how the values are derived.
ACF image field would be set to return the ID, then with the ID you would use wp_get_attachment_image_src() using the ID and the $image_size you want as the maximum size. This gives you the url, width and height.
You would use other WP functions to some other method to get the alt and title values if you want to use them.
