Question

I would like to build a new WordPress responsive website with responsive images for smartphones, tablets and computers.

I have built a javascript function (working) that load the correct image according to the width of the device.

Here is my html layout to load the same image with 4 different sizes:

<div pictures-content alt="alt data">
        <div src="<?php bloginfo('template_directory'); ?>/images/small.jpg">
        <div src="<?php bloginfo('template_directory'); ?>/images/medium.jpg" data-media="(min-width: 400px)"></div>
        <div src="<?php bloginfo('template_directory'); ?>/images/large.jpg" data-media="(min-width: 950px)"></div>
        <div src="<?php bloginfo('template_directory'); ?>/images/extralarge.jpg" data-media="(min-width: 1200px)"></div>
</div>

Here is my problem: when I will have to add a picture in WordPress, I will have to push 4 pictures.

I would like to know if there is a convenient way to add in a post 4 images by adding directly the code with the WordPress visual option?

Using the WP gallery is a good choice?
Do I have to download a plugin and set up custom fields?
Do I have to write a Js function that build and add automatically the html layout according to the only picture on the post?

I’m taking any other solutions,
Thanks for helping

Answer 1

Not a complete answer but enough to get you started.

• you need the correct image sizes see add_image_size
• When adding an image into the editor you can use a filter to set up the correct HTML image_send_to_editor

This can give you something like this:

<?php
function responsive_image($html, $id, $caption, $title, $align, $url, $size, $alt)
{
    $html = '<div pictures-content alt="' . $alt . '" title="' . $title . '">
        <div src="' . wp_get_attachment_image_src($id, 'thumbnail') . '">
        <div src="' . wp_get_attachment_image_src($id, 'medium') . '" data-media="(min-width: 400px)"></div>
        <div src="' . wp_get_attachment_image_src($id, 'large') . '" data-media="(min-width: 950px)"></div>
        <div src="" data-media="(min-width: 1200px)"></div>
        </div>';
}
add_filter('image_send_to_editor', 'responsive_image', 10, 8);

Adjust the image sizes test it and let me know if you get stuck.