Change the_post_thumbnail() based on screen size

  • unwrittendevin

    (@unwrittendevin)


    12 years ago

    Hi All,

    I’m looking to swap between two different images based on the user’s screen width. My dilemma is this:

    The design for desktops serves up a slideshow image that is 1170px X 420px, but when the browser sizes down to a mobile device ( < 768px ) the image is much too short. I’d like to swap it with another custom thumbnail size I created so it’s less image size to load for mobile devices.

    These are my custom image sizes in my functions.php

    add_image_size( 'featured', 770, 433, true );
add_image_size( 'carousel', 1170, 420, true);

    and my PHP (using Advanced Custom Fields plugin for custom content):

    <? $attachment_id = get_field('slide_image');
$image = wp_get_attachment_image_src( $attachment_id, $size ); ?>
<img src="'<? $image[0]; ?>'" alt=" ">

    I need the $size variable to change based on screen size.

    Any suggestions?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    PHP running on your server has no idea about the client screen size upon initial request. The page can determine this once it lands in the client browser via javascript. Perhaps the place where the image resides on the page is initially an empty gif of default size, onload javascript determines the screen size and fills the img tag src with the proper sized image src?

    Thread Starter unwrittendevin

    (@unwrittendevin)

    The problem would be that it’s a slideshow of images being pulled from a custom post type called “slides”. I want to loop through each custom post type and extract the “post thumbnail” and cycle through the different images on my page. If it was a static image, I could serve the image up with different stylesheets/media queries.

    How would I go about having JavaScript/jQuery tell PHP to load a different image size based on the screen width?

    Moderator bcworkz

    (@bcworkz)

    Somehow I forgot you mentioned slideshow between reading your question and thinking of a solution. Doh! Sorry about that, but I think the concept still applies. I’m unsure of how your slideshow is structured, but there is surely some way of populating the image source paths as the page loads, especially if using jQuery.

    Other solutions come to mind. You could use AJAX like techniques to communicate with the server. Or the initial page could be a sort of ‘scout’ page that forwards to the actual content page based on what is found at the client browser.

    Even a CSS solution could be possible, but would involve a rather unconventional slideshow structure that is likely incompatible with what you are currently using.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change the_post_thumbnail() based on screen size’ is closed to new replies.