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.
