Understanding Featured Image sizes in WordPress
Why don’t my images fit into the spaces like they do in your demo sites? This question is asked all the time, and it’s always a bit of a challenge to explain how this entire process works through an email, so I figured it was time to write up a blog post to specifically explain how this works!
Your images don’t fit properly / I’m having alignment issues
All of our themes come with predetermined image sizes so that all the spaces on your site will be consistent throughout and your design remains clean and uncluttered. But if you’re having trouble with your images fitting, after running the Regenerate Thumbnails plugin, then I’m almost certain what is happening for you is the images that you have uploaded simply aren’t large enough to fit into the spaces provided.
Let’s take this shot as an example. The theme calls for an image to be sized at 400px wide and 600px tall. However, if the image you have uploaded is less than 400px on the width, or 600px on the height, then WordPress isn’t able to crop the image to the size needed to fit the theme.
So why can’t WordPress just increase the size of my images for me? Great question.. but if this happened your images would be incredibly blurry. So the solution is simply to not crop them at all.
See this example above where one side of the image will fit the dimension of the image size but the other doesn’t. In this example you can see that our image space is sized for 400px wide and 600px tall. The image we uploaded to the site is 500px wide and 400px tall. What will happen here is the image will crop at 400px wide, but there isn’t the 600px in height to work with, so the height will remain at 400px tall. The result of this situation is the image will be cropped at 400px wide and 400px tall, resulting in a square image versus a vertical orientation image.
Therefore, if some of your images are fitting properly and others aren’t, we need to go back and fix the posts that have images that are too small.
How do I fix this?
The first solution is to go edit the post that is having the image problem, and upload a new featured image for the post, being sure that the image dimensions are larger on both the width and height that is needed for your specific theme.
The other solution would be to edit the post that is having the image problem, and you’ll look through the images that you’ve uploaded to that post and set an alternative featured image for your post that will fit better.
How do I adjust the image sizes in my theme?
Lastly, if the images you have uploaded on your site simply will not fit into the spaces provided for your theme, you can very simply change the image sizes. Most people think this is actually super complicated, and while it does involve looking in the files with code, the change is as simple as changing some numbers.
As with any coding edits like this, please be certain you have a backup of your theme files before making any changes. Should anything happen while you’re editing this, you can refer to this post about how to fix it.
Navigate to APPEARANCE > EDITOR and on the right side of your screen, select the functions.php file.
Look for the code in this file that looks like this:
You will simply adjust the numbers here for the image size that you’re needing to edit. For example, this screenshot below is of the drop down image size options for our Market theme that appear in a Genesis Featured Post/Page widget as well as the Genesis Settings for your featured images. Then the code above is what is defining the names of these sizes, and also the actual dimensions of them. The sizes that you see in this screenshot that are not in the code above are either coming from your WooCommerce settings (WooCommerce>Settings>Products>Display) or from your Media library settings (Settings>Media) within WordPress.
So in this example, if you need to change the square entry image, you’ll simply change the numbers to right of this label in our code above. Here is what it will look like:
If you tend to take more of your images in vertical orientation but the theme you have only has a square image size option, you’ll follow these same instructions for change your images size to accommodate your specific image sizes for your site!
You gals are the best!!! I just literally threw my school books off my lap to go edit my CSS, lol. Homework can wait, vertical images cannot! 🙂 Now I owe you ALL three coffee! WINK
Hugs, JameeMaree
http://www.jameemaree.com
Hi Lauren,
can I add additional images sizes to my theme? I use the darling theme.
Thank you!
Carolin
Hi Carolin,
Oh absolutely! You’ll just add another line just like you see and give your size a new name and enter new dimensions.
Thanks for this! Very helpful. I am about to switch to the Market theme and was wondering what sizes to use.
Hi Lauren,
how can I align the featured image left? In my theme (darling), they are centred and I want to try square pictures aligned left with text. Like I can do within a post.
Thank you so much!
Carolin
HI Carolin, Are you asking how to align the featured image left on the blog page? If so, here’s how, in your admin dashboard you will go to Genesis, then theme settings. Once you have clicked on theme settings look for the section titled “content archives”. In this section you entry content or excerpt and then select the image size you would like to display on the main blog page. Lastly, select “left” from the drop-down menu next to alignment. Let me know if this does not answer your question.
Hi Lauren,
thank you so much. Yes, it worked, now the images are aligned as I would like them to be.
So, after I changed the size of the images in the code I could enter another image dimension here, right?
Where do I choose the featured image size of an individual blog post?
Sorry to bother you again. I’m brand-new to this.
Thanks again!
Yes, you can add a new dimension in the php.functions file and after you do so it will appear in that same location in the drop down menu. That’s where you will select it.
Hi there! I am wanting to align my imaged centered instead of left (I am using Simply Charming theme), but it does not give me the option of aligning center? I followed your instructions above. Is there a way around this?
Tarah,
Which image?
This is sooo helpful but I have one question that might be kind of… Ignorant:-) I take all my pictures right now with my iPhone so does that mean all my images are the same size as long as I use the “photo” section? I am just having so much trouble editing the sizes of my photos as a lot of time when I type in 800 in one box it adjusts the second box and won’t let me pick. Does that make sense?? Does that mean my pictures are too small to begin with?
When you are resizing on your desktop, make sure that you don’t have a box checked “scale proportionally” or it will resize the width/length automatically. Once you resize it then load it into WordPress.
Thanks for the valuable post wordpress featured image sizing. I was a beginner in wordpress and i really face problem in using featured images and i started ignoring it in my sites. But your article clarified me so easily. Thanks a lot and let your valuable effort continues…
You’re very welcome!!
Hello Laurem, Lesley
If I wanted to define the width of the image but not the length, how can I do it?
Thank for the help.
Hi Salome,
Which image are you wanting to adjust? A featured image? Or an in-post image?
The featured images under my homepage slider and the rest of the content on the homepage is limited to only the center on the website, but I prefer the look of the refined theme as I bought it where everything is the full width of the page. It looks stupid that the three featured images are so small and only centered vs large and taking the full screen like the main homepage image at the top. I went to theme settings and changed it to the full width, but nothing has changed on the website. I am new and I have looked everywhere for an answer. I am so sorry if this is a simple answer and I am wasting your time! Thank you SO much for your help!
Do themes come with recommended image sizes so we can figure out what we should use if we want our site to look similar to the demo? Specifically, I’m looking for Simply Charming Pro theme image sizes. Thank you!!
Yes Shannon! For Simply Charming Pro you’ll find them HERE.
Thank you so much for this article, Lauren. You made things so simple.
I just wanna know, without entering the theme editor… how could I know the size of the featured snippet of my concerned theme. (It’s Hestia)
Thanks,
Arpit
Thank you Arpit!
Maybe check the theme documentation to see if it lists the featured image sizes. Or you may need to contact the theme developer.
Hope this helps!