Build Your Own Business Website header image

Bee Crafty Theme Quickstart Guide – Part 2 – Image Sizes

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

The Bee Crafty Theme is intended to display and showcase images. And now that we’ve installed the Bee Crafty theme, we’re going to discuss the various image sizes available in the theme. First we discuss the standard WordPress image sizes and make recommendations about their sizes based on the column layout chosen.  Then we look at the child theme specific image sizes and discuss how they should be used in the theme.

Full Width Setting

Let’s take a look for a moment at what would this look like in full width. You’re going to put an image that’s going to sit here in the full width. That full width image, if it’s going to line up with the text, should be about 890 pixels wide.

I’ll give it a little bit of room for a border to be wrapped around it because these images do all have borders around them and its got this little border and a little bit of drop shadow. And so you can see that here.

Effects of Varying Image Sizes

These people have all kinds of different sizes of images but I think that’s probably not really the best choice. You can see what happens here when you use a huge image in a single post and then kind of a small image. You’d end up with a nice, uniform designed look. So my suggestion here is that you figure out what your image sizes are first. So if you’re using a full width image, it should be 890 pixels.

Image Sizes for a 2 Column Layout

If you are using a 2-column layout like this where you have only one sidebar then an image that fills this post space including this border is 580 pixels wide. And what should be obvious then is that half of that is 290 pixels wide.

Now the reason I say half of that is that sometimes, you’re going to have an image that is vertical in orientation. And if you’ve got a vertically-oriented image, you may want to, rather than filling it up with 580 pixels wide, you may want to just make it half of the size wide. And so half of that 580 is 290 pixels and you’ll see what I’m getting at here in just a minute.

Image Sizes for a 3 Column Layout

If you’re using that 3-column layout where you’ve got 2 sidebar columns then the appropriate image size here for this would be 425. And then probably a good half size is about 200 pixels. Now there’s one other thing to keep in mind and that is the thumbnail size that Bee Crafty assumes that your thumbnails are 125 pixels by 125 pixels.

Set Thumbnail Image Size

So those are your inherent WordPress image sizes. What I recommend that you do is you come over to your Settings and Media. And before you start uploading images, you set your thumbnail size to 125 by 125 and set it to crop just like this.

If you’re using the 2 column layout which is what we’re going to be doing here, then you set a medium size of 290 pixels wide and I’ll just put a really tall height in for the max height, so 1024. And then your large size, I would set at being 580 pixels wide which is the maximum width of a regular post with a maximum height of 1024. And then in your auto embed section, I would set the auto embed width at 580 pixels.

If you’re using the 3-column layout then you would change this up. These will stay at 125 but your max width for your medium size would become 200 and your max width for your large size would become 425. And then the maximum embed size would become 425.

If you set these things, as you probably already know, when you upload an image as long as the image you upload is larger than the large size in width, WordPress will automatically create a large size, a medium size, and a thumbnail size from the image that you upload.

So if you upload an image that’s 890 by 300 pixels. If you upload one of those images for your full width, it’s going to scale one down to 580 pixels, another one down to 290 pixels and it’s going to crop one down to 125 pixels. So that’s going to give you each of these different image sizes.

Importance of Setting Sizes Before Uploading Images

It’s important to set this before you start uploading images because if you change these, WordPress does not retrospectively change images that are already created.

If you’ve got a whole bunch of images already and you’re moving to the Bee Crafty theme and you haven’t set these sizes, you can use a plugin called Regenerate Thumbnails. If you run that plugin, it will go back and reset all of your images and recreate the images based on these sizes that you’ve set here.

Even though it says Regenerate Thumbnails, it’s actually going to regenerate all of the WordPress image sizes. It’s critical to have your image sizes set properly at the get go and these image sizes are designed specifically to work inside of the Bee Crafty theme, taking advantage of the styling that Bee Crafty has.

Bee Crafty’s Image Sizes

These are actually your WordPress image sizes but Bee Crafty comes with another set of image sizes that it automatically creates that you don’t really see here. And the first size is the Polaroid image size and that’s essentially this size right here. And so it’s creating an image that is 225 pixels by 225 pixels to go inside of this little Polaroid thing.

It also creates a sidebar-featured main image and you’ll see how that sidebar-featured main image is used here in a few minutes. But that produces an image that is 280 pixels wide by 125 pixels tall. In fact, we might see an example. Yeah, this right here. This is a featured page widget and the featured page widget uses this sidebar featured main image which is 280 by 125.

And WordPress automatically creates this image size for you as well as long as you upload the image after you’ve installed Bee Crafty. If you want to use this size image for an image that already exists then you need to run that Regenerate Thumbnails plugin.

It also creates an image size called Blog Excerpt which is 600 pixels wide. And I don’t understand why it does that because 600 pixels wide is too wide to actually fit inside the style of this. So you’re going to have the opportunity to choose to use the blog excerpt size but a 600-pixel wide image does not look right in this space that’s available. And so I would simply ignore it. I would not use the 600 by 400 blog excerpt image even though it is automatically created.

And then finally, it also creates one called the home featured image which is 200 pixels by 200 pixels. This must be a relic of Bee Crafty because the theme doesn’t actually use it anywhere. There’s no place for you to insert this image or call for that image or to otherwise specify the use of that image. It just creates this image called home featured image and I don’t know why.

But again, that’s something that you can safely ignore because it’s not necessarily a useful size for you. I think it’s been kept from a much earlier version or an earlier version of Genesis or something like that and it’s just been kept there for backward compatibility. But otherwise, I have no idea why it would exist.

Those are your image sizes and when you’ve set those image sizes all these images are going to fit here quite nicely inside of your blog post and inside your sidebar.

0 Comments… add one
0 comments… add one

Leave a Comment