Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adjusting Latest Post Image Size
Tagged: adjusting image size, css, glitter, lace
- This topic has 5 replies, 2 voices, and was last updated 11 years, 1 month ago by cehwitham.
-
AuthorPosts
-
February 20, 2013 at 11:37 pm #21886[email protected]Member
Hello! I am brand new to Studiopress and excited to be here! Looking forward to getting to know the community.
I wonder if anyone can help me as I am just starting out. I would like to know if there is a way to adjust the css on my site so that the latest post image is larger than all the others which are just really thumbnails at the moment. I want it to stand out and I like the look of larger images better, especially if trying to showcase artwork or photography. I am using the Glitter & Lace theme.
Is there a way to adjust each image size on an individual basis or set it so that the latest post image is always a certain size, and if so where can I find this on the stylesheet and how should I adjust it?
Thanks!!
Liz
February 21, 2013 at 8:21 am #21952cehwithamMemberYou couldn't just use CSS as the image is a thumbnail and would end up getting very stretched. You'll need a way to output the first image at a large size.
Using the Grid Loop with a featured item would allow you to set a featured item and set the image size of the featured item independently of all the other thumbnails. See:
http://www.billerickson.net/genesis-grid-loop-content/
Twitter: cehwitham Web: cehwitham.com
February 21, 2013 at 11:41 pm #22153[email protected]MemberThanks so much for your reply. I have studied this article thoroughly, but am having a hard time getting my head round it because I don't really understand even some of the basics he is discussing. I think I understand what a loop is/does, but as far as figuring out what code to put in and where...?
So I would be editing the functions.php, correct? I see this code there already:
/** Add new image sizes */
add_image_size( 'home-featured', 255, 80, TRUE );
add_image_size( 'post-image', 642, 250, TRUE );What images are those lines referring to? Is the 'home-featured' the featured post widget in my sidebar or is it the most recent post on the page? And if 'post image' refers to all of the posts on the page, then this is the area where I would be needing to add something?
I see this on the post you referenced:
}
add_filter( 'post_class', 'be_grid_loop_post_classes' );/**
* Grid Image Sizes
*
*/
function be_grid_image_sizes() {
add_image_size( 'be_grid', 175, 120, true );
add_image_size( 'be_feature', 570, 333, true );
}
add_action( 'genesis_setup', 'be_grid_image_sizes', 20 );/**
* Grid Loop Featured Image
*
* @param string image size
* @return string
*/I am guessing the part about 'be_feature' with the size is
the sort of thing I would want to be putting in...is that
correct?I need to read up on what these elements are though- I don't
really know where things are supposed to begin or end. If
you have any suggestions they'd be very welcome.Thanks.
February 22, 2013 at 4:32 am #22183cehwithamMemberI'll try to explain a little:
/** Add new image sizes */
add_image_size( ‘home-featured’, 255, 80, TRUE );
add_image_size( ‘post-image’, 642, 250, TRUE );This is telling WordPress to create images of these sizes for use later on. Every time you upload an image, WP creates a version of the image at each registerred size for you to use later so it doesn't have to resize images on the fly. "home-featured" and "post-image" are just the names of this particular size so you can easily reference it in your code later on. "thumbnail" and "full" are usually available as standard.
In the code I linked to, Bill is just creating new image sizes to be output later, "be_grid" and "be_feature" are just names for those particular sizes, they don't reference an output location. He prefixes with "be" (Bill Erickson) to avoid conflicts with other plugins which might register a featured size image.
There is more information available in Codex: http://codex.wordpress.org/Function_Reference/add_image_size
Twitter: cehwitham Web: cehwitham.com
February 28, 2013 at 7:04 pm #23418[email protected]MemberJust wanted to update in case anyone else had the same question later. It turns out this functionality was already built into my theme, but as you said I needed to add a larger image from the get-go. When I made a new post, I set the image size to "full" in the WP upload settings box, and voila- a large image!
Thanks for helping me figure this out.
March 1, 2013 at 5:36 am #23474cehwithamMember -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.