WordPress and Responsive Images

Using custom fields to create a list of previous projects. When using get_the_post_thumbnail(), it will put in the responsive img tag that includes srcset and sizes attributes. When changing what size that is passed to this function, one gets a different img markup.

add_action( 'genesis_entry_content', 'eth2_front_websites', 13);

function eth2_front_websites() {

    $projects = get_field('projects');

    if ($projects) {
        echo '<h1>' . get_field('projects_title') . '</h1>';
        echo '<div class="projects"><ul>';
        foreach ($projects as $project) {
            ?>
                <li>
                    <div class="first one-third">
                        //We'll change this line to see what changes
                        <?php echo get_the_post_thumbnail($project->ID, 'medium'); ?>
                    </div>
                    <div class="two-thirds"><?php echo $project->post_content; ?></div>
                </li>

            <?php
        }
        echo '</ul></div>';
    }

}

If the function call is :
get_the_post_thumbnail($project->ID);
It will use the default size value of ‘post-thumbnail’. This will produce the following markup:

<img width="1458" height="972" 
src="//jhtechservices.com/wp-content/uploads/prism.jpg" 
class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
alt="prism" 
srcset="//jhtechservices.com/wp-content/uploads/prism.jpg 1458w, //jhtechservices.com/wp-content/uploads/prism-300x200.jpg 300w, //jhtechservices.com/wp-content/uploads/prism-768x512.jpg 768w, //jhtechservices.com/wp-content/uploads/prism-1024x683.jpg 1024w" 
sizes="(max-width: 1458px) 100vw, 1458px">

This will almost always load the largest image. In our page design, the image will only be the full width of the screen if the screen is on mobile. On other screens it’s only about one-third the width of the screen. This is not good markup for this image in this context.

If the function call is :
get_the_post_thumbnail($project->ID, ‘thumbnail’);
This will produce the following markup:

<img src="//jhtechservices.com/wp-content/uploads/prism-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="prism" height="150" width="150">

So if you do ‘thumbnail’ for size, you get just the ‘thumbnail’ size and your image markup is not responsive.

If the function call is :
get_the_post_thumbnail($project->ID, ‘medium’);
This will produce the following markup:

<img 
src="//jhtechservices.com/wp-content/uploads/prism-300x200.jpg" 
class="attachment-medium size-medium wp-post-image" 
alt="prism" 
srcset="//jhtechservices.com/wp-content/uploads/prism-300x200.jpg 300w, //jhtechservices.com/wp-content/uploads/prism-768x512.jpg 768w, //jhtechservices.com/wp-content/uploads/prism-1024x683.jpg 1024w, //jhtechservices.com/wp-content/uploads/prism.jpg 1458w" 
sizes="(max-width: 300px) 100vw, 300px" 
height="200" width="300">

This is about perfect for this case. sizes says the image will be the width of the screen on screen sizes 300px or smaller which is true. I don’t agree with the default setting of 300px, though. Doesn’t this mean the max width of this picture will be 300px. So in all cases only the first source in the srcset attribute will be used. Well, actually, I take that back. The browser could use the other sources if the screen density is 2x or 3x. I’m thinking a sizes=(max-width: 300px) 100vw, 33vw would be better in this design as the max-width isn’t 300px but a third of the screen size.

If we did want to change the sizes or srcset attributes, this article shows how to do it.