- This topic is empty.
-
AuthorPosts
-
December 23, 2011 at 10:54 am #35806
Jon Yablonski
ParticipantI 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!
– jDecember 24, 2011 at 6:49 am #93327davidlab.be
ParticipantIf 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 #93346Jon Yablonski
ParticipantThanks 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 #93399Jon Yablonski
ParticipantIf 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 #93468noahgelman
ParticipantYou 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 #93470Jon Yablonski
ParticipantThanks 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 #93472noahgelman
ParticipantNo, 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 #93476Jon Yablonski
ParticipantHave 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 #93489noahgelman
ParticipantI 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 #93492Jon Yablonski
ParticipantI 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 #93496noahgelman
ParticipantI’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 #93498Jon Yablonski
ParticipantYes, 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 #93577noahgelman
ParticipantOhhhhhh, 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 #93592Jon Yablonski
ParticipantYep! That’s correct— and I found a working solution as well:
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
echo ‘‘;
}
?>July 18, 2013 at 7:35 pm #143545suis
MemberHello 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%” ‘;} ?> -
AuthorPosts
- The forum ‘Back End’ is closed to new topics and replies.