Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End Responsive Thumbnails in WordPress

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #35806
    Jon Yablonski
    Participant

    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

    #93327
    davidlab.be
    Participant

    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;
    }

    #93346
    Jon Yablonski
    Participant

    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.

    #93399
    Jon Yablonski
    Participant

    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?

    #93468
    noahgelman
    Participant

    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.

    #93470
    Jon Yablonski
    Participant

    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!

    #93472
    noahgelman
    Participant

    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

    #93476
    Jon Yablonski
    Participant

    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.

    #93489
    noahgelman
    Participant

    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.

    #93492
    Jon Yablonski
    Participant

    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.

    #93496
    noahgelman
    Participant

    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

    #93498
    Jon Yablonski
    Participant

    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.

    #93577
    noahgelman
    Participant

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

    #93592
    Jon Yablonski
    Participant

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

    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
    echo ‘‘;
    }
    ?>

    #143545
    suis
    Member

    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?

    $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)
  • The forum ‘Back End’ is closed to new topics and replies.