6

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.

7
  • 1
    I believe this Question may fall under the off-topic category, please check the faq to make sure, and maybe narrow down the scope that you are proposing. Meta reference: meta.stackexchange.com/a/92110
    – brasofilo
    Jan 10, 2013 at 14:54
  • @brasofilo I have changed the title and bolded my real question. The question maybe a bit lengthy but I wanted everyone to understand my logic behind the proposed method and the problems that I am facing. Jan 10, 2013 at 14:59
  • "manually put into the post content" means what? Inserted using the editor or are you talking about a straight HTML paste?
    – s_ha_dum
    Jan 10, 2013 at 15:15
  • @brasofilo you're right, I've deleted the lengthy, unnecessary introduction. :) Jan 10, 2013 at 15:16
  • @s_ha_dum Inserted using the editor. Manually in opposition to automatic image generation done by theme, like post thumbnails etc. Jan 10, 2013 at 15:17

2 Answers 2

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.

1

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.

2
  • And to get the description, you can just grab the alt content from the original index tag in the same regex...
    – Ed Burns
    Jan 10, 2013 at 15:44
  • Thanks for your answer. It is a little bit messy, indeed, I'm trying to avoid using regex. It can also be pretty heavy on the server once user puts lots of images into his post. I am currently inspecting a possibility of changing the output of get_image_tag function via a filter, so that the code is only run once when user places the image into the post. The only issue is that when user changes a theme he will be left without images at all. Once I decide on which method to use I'll either accept your answer or write my own. :) Jan 10, 2013 at 18:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.