Responsive Images in Wordpress

Question

Wordpress seems to support Responsive Images since 2015. (Article https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/ )

1) I Created now the full responsive css for 1600 to 2000 in wide. 2) I added new image sizes and rendered them

Now i'm stuck on the part how to use the responsive feature

My code is currently

                        <div class="post-thumbnail single-post-thumb archive-wide-thumb">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail( 'recent-startpage-post' ); ?>
                            <span class="fa overlay-icon overlay_startpage_recent"></span>
                        </a>
                    </div>

I currently can't figure out how to write a code that changes 'recent-startpage-post' to 'recent-startpage-post-hr' if the screen size is above 1600px in wide

Answer 1

Simplest way of doing this would be using Media query. Just make 2 Divs and assign class/id to them like this

<div class="class-1">
</div>
<div class="class-2">
</div>

You need to enclose your both the_post_thumbnail() function inside this div like this

<div class="class-1">
<?php the_post_thumbnail( 'recent-startpage-post' ); ?>
</div>  
<div class="class-2">
<?php the_post_thumbnail( 'recent-startpage-post-hr' ); ?>
</div>  

In the above code I have enclosed two the_post_thumbnail() in two different classes. Now in css file you have to write media query and use those classes (class-1 and class-2) inside query like this

@media screen and (min-width: 1600px) {
.class-1{display:none;} 
}
    @media screen and (max-width: 1600px) {
.class-2{display:none;}     
}

In the above code class-1 will be set to display:none; when screen size will be above 1600px and class-2 will set to display:none; when screen size will be below 1600px. In other words function the_post_thumbnail( 'recent-startpage-post' ); won't be used (above screen of 1600px) because he is enclosed in DIV of class "class-1" and that class has been set to display:none for above 1600px of screen size via media query.

To know about Media Query in detail read this.