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.

Shortlink:

11 Comments

  1. Nice tip!

    However, users will need to generate thumbnails for older images (easiest would be using the Regenerate Thumbnails plugin)

  2. 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.

  3. 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?

  4. 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

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Need to post PHP code? Wrap it in [php] and [/php] tags.