WordPress Theme Tip: Force an Image Size
I am making a theme today and working on the image attachment templates. I found that I needed the next and previous image links (in the single image templates… image.php) to be of a specific size, regardless of what the settings the admin tool were. Specifically, I want them to always be 100×100 pixels in size, and cropped.
Image sizing is always a problem for themes. Theme designers want their theme to be pixel perfect in all cases, but WordPress wants the user to have some form of control. With image sizes, WordPress lets the user pick the size of their image thumbnails and so forth. In that case, using those becomes problematic for certain places in the theme which need pre-defined image sizes.
Here’s the quick and easy solution: add_image_size. This function lets you create custom image sizes that can be used by your theme. Plugins can do the same sort of things, of course, but this really comes in more useful as a theme developer’s tool.
In my functions.php file, I put this code:
add_image_size( 'themename-nav-thumbnail', 100, 100, true );
That creates a new image size for WordPress. When image files get uploaded, that new image size will be magically created along with all the other sizes. In this case, it’ll be 100 by 100 pixels, and cropped exactly to that (that’s what the “true” means).
Note the use of the “themename” prefix? You can use anything you like here, actually, but it’s a good habit to always use prefixes for custom identifiers you ever make. This prevents things from interfering with each other.
Anyway, to then use that size for my navigational thumbnails, this small bit of code works:
<div class="prev-img">
<?php echo previous_image_link('themename-nav-thumbnail'); ?>
</div>
<div class="next-img">
<?php echo next_image_link('themename-nav-thumbnail'); ?>
</div>
I wrapped them in DIVs so that I can float them left and right and style them and such.
So custom image sizes are easy enough to do, but it’s a trick I didn’t know about until I needed it just now. Thought somebody else should know about it too.
Nice tip!
However, users will need to generate thumbnails for older images (easiest would be using the Regenerate Thumbnails plugin)
PS: Relating to the simple twitter connect:
1. It would be nice if the URL field would be populated with the URL on my twitter profile (as opposed to my twitter profile URL)
2. The Notify me of followup comments is useless, since the email field is populated with a fake address.
The URL field to their twitter profile is intentional. I used to use their URL field. People complained.
The fake email is unavoidable. Twitter has no way to get a real email. I’ve thought about figuring out a way to prevent subscriptions on that, but haven’t gotten around to it yet.
Sweet tip – thanks for sharing!
Question: Does this work for post-thumbnails?
I know we can set their default size, but is it also possible to specify alternate/additional sizes?
Not really following you there. Post thumbnails have their own size already, Defining additional sizes doesn’t make a whole lot of sense.
Edit: Oh, yes, I see it now. Mark’s post covers that use of it nicely.
Yeah, Mark goes into post thumbnails a bit more here
Thanks this works great (from Mark’s post):
set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnailsadd_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail sizeBut it doesn’t look like
add_image_sizeenables us to set a “hard-crop” for additional sizes..?Add the fourth parameter of “true”. That parameter is optional and defaults to false.
Yeah, that’s what I thought too.. but it doesn’t seem to be working in 2.9.2. Maybe in version 3.0?
This may be a post thumbnail specific issue: http://core.trac.wordpress.org/ticket/13725
Thanks for this, very useful.
Is there any control of the uploaded image like timthumb (zoom and image quality) for example?
I see Matt Brett has tried this: http://mattbrett.com/workshop/2010/wordpress-post-thumbnails-revisited/
Maybe a little more server hungry dynamically resizing but cool all the same. I know the add the wordpress code adds 2 queries per image so probably not much more with timthumb I guess.
Thanks