When we did our initial setup for the Agility Skin for Thesis 2 we talked a little bit about images but now we are going to look at the default image sizes for Agility in more depth. In that setup we went through the process of setting those image sizes at 647, 320 and 200 so that you could see what that would look like.
Review Standard Image Sizes
Let’s start at a standard page. Since we made the images 647 pixels wide it means that the images are, in fact, going to span the full width of the content and the medium image then could be used to span half the width of the content.
Let’s edit this page and just put another image here. Add media and let’s take a look for something suitable in the media library. Well, let’s just pretend this is suitable. I haven’t recreated this image. You can see it has images set at 300 not 320. Bear with me on that because I use this site for demonstrating different skins and different skins have different image widths.
So let’s insert that into the page, update it and then view the page. Now you have an image that is one half of the width of the content and that’s what the medium image is supposed to be. The medium image is half of the width of the content and the thumbnail image is 200 pixels wide.
Other Image Sizes that Agility Automatically Creates
Then there are a couple of other image sizes that Agility automatically creates.
Featured Page Image
Agility creates a featured page image that is 320×200 pixels which is what is used if you’re using a query box to display a featured page like we are in this example site. That’s what’s used to create this image size here. It is the featured page image size that’s being inserted here.
Then there’s one final one and that is the tiny thumbnail. It’s my assumption that there are going to be times when you want to use a very small thumbnail of a featured image and so Agility does create a tiny thumbnail that is 75 pixels by 75 pixels.
Featured Page and Tiny Thumbnail Image Example
Let’s add a query box to this column just by way of example so you can see the featured page image. I’ll call it “Favorite Posts” and say okay to this. Then drag that into the Main Sidebar and open it up. I don’t want the Edit and I don’t want the Author but I want the WP Featured Image and I’ll put it above Excerpt.
Then I’m going to choose the Agility tiny thumbnail, left with text wrap, as my image size. Now when I save that and view the site, you see I’ve got the little tiny thumbnail size showing up here. So that’s the purpose of the tiny thumbnail.
You might use a smaller excerpt or something like that and this gives you a chance to use a smaller image for that. It’s useful in things like testimonials.
When to Use Regenerate Thumbnails Plugin
If you have already uploaded all your images and then install Agility, you’re going to need to do what we’re going to do now which is regenerate your thumbnails.
Let’s come back over to Media Settings, set it to 200×200, let’s set it 320×1024 and then set this max width large size at 647 and save those changes.
Now that you’ve done that, that doesn’t actually change any of the actual image sizes of existing uploaded image. What it means is that when you upload new images WordPress is going to create images in this size that we just specified.
To recreate all your images at the right sizes what you have to do is install a plugin called Regenerate Thumbnails. And once you’ve installed that plugin, if you click “Regenerate All Thumbnails”, what it will do is go through all of your images and recreate the images in the correct sizes for the sizes that you’ve set.
It takes a little bit of time. Typically if you’re setting it up from scratch it’s no big deal but if you’re configuring Agility on a website that already exists and already has images and featured images assigned to posts then you really want to recreate your image sizes with this plugin Regenerate Thumbnails.
Regenerate Thumbnails has finished it’s job so let’s refresh this page here. And there we go, now we’ve got the 200 pixel size thumbnail image and the 75×75 tiny thumbnails the way they were supposed to be. If we look at the image itself it’s in the right size also.
Comparing Agility Nude Skin and Carta Skin
Kevin asks, “Which is better, Carta or Agility?” It’s not that one of them is better than another. They are actually very similar to each other in functionality but they’re different in appearance and they’re different in HTML structure.
So you would use Agility is you wanted a skin that had a ton of functionality that was responsive and that was full width is its appearance. You would use the Carta skin if you want that same kind of functionality but was page width in its appearance.