JHTechServices
PHP Wordpress

WordPress and Responsive Images

· 2 min read

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 '' . get_field('projects_title') . '';
        echo '';
        foreach ($projects as $project) {
            ?>
                
                    
                        //We'll change this line to see what changes
                        ID, 'medium'); ?>
                    
                    post_content; ?>
                

            ';
    }

}

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:

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:

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:

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.

← Back to Blog