Retina images - custom syntax for inserting images into post content

Question

I am currently in the process of building a responsive real estate WordPress theme and I'm figuring out how to properly add support for HiDPI screens. I decided to use a JavaScript solution Picturefill, which mimics the functionality of proposed picture HTML element. WordPress lets us create custom image sizes, and I have decided that for each image size (like listing gallery images on single listing page) I will need four images sizes declared:

1. Regular low-res image for desktop devices
2. @2x hi-res image for HiDPI desktop devices (currently only Retina MacBook)
3. Smaller low-res image for smartphones (why would smartphones need to load full size image?)
4. Smaller hi-res image for smartphones

For tablets I've decided to serve the same sized images as for desktop devices, simply because the size of tablet-specific image size is not so much different from the desktop one, so the bandwidth gains are not huge enough to justify adding two image sizes (per image location) to WordPress (low- and hi-res) and cluttering the uploads and DOM.

Now, everything is fine and dandy when we are dealing with images that the theme is pulling automatically (like post thumbnails, automatic post gallery etc.), but since for Picturefill script to work I need to output four different image paths (with appropriate media queries) - how would I go about images that the user manually places into the post content?

For those who don't want to read how the Picturefill works, here is the syntax that the script expects:

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

If you have any suggestions for my proposed method please share, but I would be interested in your ideas on how to create the above syntax for the images that users manually put into the post content.

As a side not, please refrain from suggesting to put such functionality into the plugin, as in my opinion HiDPI images are clearly presentational feature and should be handled by the theme.

Also, I am aware of already existing Wp Retina 2x plugin, but this is not exactly what I need since my images has to not only be hi-res, but also responsive - I don't want to force smartphone users to download ~800KB desktop hi-res images.

Answer 1

I hadn't done this myself but I have How to insert image in Markdown syntax in WordPress stashed for later that shows how to customize markup of inserted image.

It makes use of image_send_to_editor filter in get_image_send_to_editor() function.

Answer 2

It is a bit messy, but you could write a filter for the_content, use a regex to find all the image tags, and then replace them with your revised format.

There are a few challenges with that approach, the toughest being resolving the base image url - since even if the image has been uploaded via Wordpress, the instance in the post could be the full sized image or it could be the thumbnail. To convert it to your array of sizes, you need the base image url and then you can add the different sizes to the end (i.e. 150x150).

There is also the possibility that the post author inserted an image that they uploaded themselves instead of through Wordpress or perhaps they are hotlinking to an outside image.

A typical attachment import looks like:

<img src="http://my_domain.com/wp-content/uploads/2012/08/image_name.jpg" alt="Description" width="150" height="150" class="aligncenter size-thumbnail wp-image-1237" />

So we need a regex that finds image tags but only those that are actual Wordpress attachments. I'm just making the following code up - it always takes me a few iterations to get a regex working correctly - so it will probably need some tweaking, but here is a concept:

function picturefill_images($content) {
    if(preg_match("/<img.*?wp-image-(\d+).*?\/>/", $content, $matches);
    foreach($matches as $match) {
        $img_id = $match[1];

        $new = "<div data-src='".wp_get_attachment_link($img_id, 'thumbnail')."'></div>";
        $new .= "<div data-src='".wp_get_attachment_link($img_id, '300x300')."' data-media='(min-width: 400px)'></div>";
        // etc, etc, etc...

        $content = preg_replace("/".preg_quote($match[0])."/", $new, $content);
    }

    return $content;
}
add_filter('the_content', 'picturefill_images');

What is happening is that we are filtering the content for any image tags which contain a wp-image-####, and capturing the ending number - which is the attachment id. Then we use the id to construct a replacement for the tag with different attachment sizes. Finally re replace the original image tag in the content with our replacement.

Again, this is all whiteboard work - untested, but it should get you started in the right direction.