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!
Did you find this post helpful? Share it with others!