Grow your CSS skills. Land your dream job.

Responsive Thumbnails in WordPress

  • # December 23, 2011 at 10:54 am

    I can easily make images within a post responsive, but am have an issue getting custom post type thumbs to do the same b/c WP automatically inserts a width and height. I am looking for a way to at least override these default widths/heights on them. Anyone happen to have a solution for this?

    Thanks in Advance!
    - j

    # December 24, 2011 at 6:49 am

    If you are using featured images from within the admin…which you should then try this. Just make sure you start with an image size that is the full size for the biggest screen resolution in your css.

    .featured-thumbnail img {
    max-width: 100%;
    height: auto !important;
    }

    # December 24, 2011 at 8:28 pm

    Thanks for the response springlab. This didn’t seem to work for me though: would this work is I am using custom post type thumbs? I am using the featured image option in the admin panel to set the thumbs, but am using a custom post types.

    # December 26, 2011 at 7:55 pm

    If I am not mistaken, it is impossible to simply override the WordPress application of width and height to thumbs simply with css (unlike images anywhere else on a WP powered site).

    Anyone have a proven method of achieving this?

    # December 27, 2011 at 3:34 pm

    You can name the size of the featured image to be displayed in the functions.php where you activated the featured image option.

    Another way which gives you more flexibility is to use the Multiple Post Thumbnails plugin. Not only does it let you set the size of your featured thumbnail, but it allows you to create multiple versions of the featured thumbnail. You can have a small one for sidebar posts, a medium for content posts, and a large one for individual posts, and stuff like that.

    # December 27, 2011 at 3:39 pm

    Thanks for the response noahgelman— would it be possible to set the featured thumbnails at max-width: 100% in functions.php, and if so, what would be the best way to do this?

    The multiple post plugin sounds interesting, but I am looking for a solution that would make a single thumb fully responsive (as opposed to serving up multiple sizes/versions.)

    Again, thanks for the feedback!

    # December 27, 2011 at 3:56 pm

    No, you cant’t set the max-width to 100% in functions.php. You would have to specifically name the dimensions. You can use max-width via css however

    # December 27, 2011 at 4:17 pm

    Have you achieved this before noahgalman? Css pertaining to thumbnails doesn’t seem to work the way it does on images within post—which are fully responsive when set to max-width: 100%. The WordPress dimensions set are overriding the css.

    # December 27, 2011 at 5:31 pm

    I think you’re misunderstanding how wordpress creates these thumbnails. It doesn’t just create them on the fly when the page loads.

    When the featured image is uploaded in the admin, whatever size it’s uploaded at, is what it will display on the site as. If the image you upload is 1000px by 1000px, and the thumbnail on your site is 150px by 150px, it is STILL going to deliver a 1000px by 1000px image to your site regardless of what css is in place. You can use css to make it look 150px by 150px, but it’ll still be a 1000px by 1000px image.

    # December 27, 2011 at 6:32 pm

    I see— thanks noah. Its starting to seem like truly responsive thumbnails are not possible with WP, just the ability to control what fixed size that thumbnails are displayed at and then readjusting the size of the thumbs to fit the width of the page (for example here: http://themes.mdnw.net/?theme=SuperSkeleton).

    What I am after would function more like this: (http://danielvane.com/). Is this possible using the the thumbnail functionality in WP? All apologizes for the total noob questions! Thanks for the feedback.

    # December 27, 2011 at 7:15 pm

    I’m rather confused as to what it is exactly that you want to do. I don’t see anything special about either of these pages. In the first the 3 tile images are big images scaled down with css, and in the second, they’re just cropped images

    # December 27, 2011 at 7:44 pm

    Yes, you are obviously correct on the images on the first site, but I believe you are mistaken on the images on the 2nd site: they are being affected by max-width: 100%, not cropped. This is what I am referring to by ‘responsive thumbs’.

    And, it happens to be what I am trying to achieve in WP, but is proving to be difficult due to the width/height that WP gives thumbs. I am not simply trying to resize the thumbs, but make them ‘responsive’ (see http://www.alistapart.com/articles/responsive-web-design).

    And as I stated, I am not having any luck simply targeting the thumbs and applying the necessary css to the thumbs b/c of this default WP setting to thumbs. What I am trying to do is find a way to override this setting, and being able to NOT apply a fixed width/height, but instead max-width: 100% and it actually work.

    # December 28, 2011 at 7:10 pm

    Ohhhhhh, I understand what you are saying now. You want the images to scale as you resize the browser. Is that correct?

    # December 28, 2011 at 11:26 pm

    Yep! That’s correct— and I found a working solution as well:

    < ?php if(has_post_thumbnail()) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
    echo ‘‘;
    }
    ?>

    # July 18, 2013 at 7:35 pm

    Hello Jimmy in 2013 i am having the same problem :) After i read all posts i couldnt find out the last code you shared.. Is it something like that?

    < ?php if(has_post_thumbnail()) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
    echo ‘ $image_src[0] width=”100%” ‘;} ?>

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".