0

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

  • I don't follow what you exactly expect to change and why. What is actual output of this code for you? How is it different from what you expect? – Rarst Nov 2 '16 at 20:26
0

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.

  • Thanks for this idea, but the problem is the old one wills till be loaded in the background and is doubling the download size. (But your idea is great). – Deex Nov 2 '16 at 14:52
  • Hmm ok, So to achieve that you need to identify screen size of device using JS. Js can help you in identify scree resolution, and use that info to put if condition on post function like I did via media query. I don't know much about this method but see if this post can help you stackoverflow.com/questions/1504459/… You can find similar kind of posts in right side links of that post or by searching on google. – Rishabh Nov 2 '16 at 17:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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