3

I'm creating my first Wordpress theme and I've got everything working fine, and by following this tutorial and few others I've understood how to add custom image sizes by using add_image_size() function. However, I just don't know what image size to choose when.

For example, in my theme I have created a blog template that shows blog thumbnails in 3 columns. Each column is around 400px wide. So my first guess is that I should create a 400px wide image size, so that image is loaded whenever the blog page is loaded.

My confusion here is first of all, how much height should I set? Should I have:

add_image_size('blog-grid', 400, 300, true), // Or
add_image_size('blog-grid', 400, 500, true), etc. // Or
add_image_size('blog-grid', 400, 'auto', true), etc. // Can I set it to 'auto'?

Because really, how am I supposed to know what height would the images be, I would rather just set the width and let the height be automatically adjusted to the proportion, so I won't even have to crop the images. Also having different heights in the grid won't break my layout or anything, might even look good if I choose a masonry layout.

My second confusion is that when the browser re-sizes, the columns stack on one another (I'm using Bootstrap), so the displayed image increases. Would this be a factor in choosing the custom image size?

Another concern that I have is that I have given the user an option to choose between 2 column, 3 column and 4 column grid layouts. Should I create 3 different image sizes for these or it would be better if choose an average of the three.

Also, I've inspected a theme and found out that it uses images double the size of the ones required. So for example, in a blog where a column is 400px wide(and so the image), the image size used for this is more than 800px wide. Is this to do with retina display? As I believe I've already taken care of that in my theme by using retina.js and by following this tutorial. Do I still need to worry about retina display, when adding custom sizes?

I know these questions probably sound really stupid, but I would really appreciate any help regarding this. Thanks!

1 Answer 1

2

I would rather just set the width and let the height be automatically adjusted to the proportion, so I won't even have to crop the images.

If the images are not all the same proportion then some cropping will have to be done. If you want to avoid cropping then you'll need to make sure that the images are edited before you put them into WordPress.

For example if you want to consistently output images that are say 400x300 (without any cropping) then your original image needs to be the same proportions such as 1200x900 pixels. If the original image is 1100x900 pixels then the image will be cropped.

If you're only bothered about the width being consistent then you can do something like this:

add_image_size( 'blog-grid', 400, 9999, true );

Another concern that I have is that I have given the user an option to choose between 2 column, 3 column and 4 column grid layouts. Should I create 3 different image sizes for these or it would be better if choose an average of the three.

By default bootstrap stacks at 767px and below so on larger phones then yeah these images might not look great. I usually test on an iPhone and a slightly larger Andriod device, but it depends on your requirements - 500px is usually good enough.

Also, I've inspected a theme and found out that it uses images double the size of the ones required. So for example, in a blog where a column is 400px wide(and so the image), the image size used for this is more than 800px wide. Is this to do with retina display? As I believe I've already taken care of that in my theme by using retina.js and by following this tutorial. Do I still need to worry about retina display, when adding custom sizes?

If you've followed the tutorial and you're happy with the images that are produced then it doesn't sound like you need to do anymore. The only real way to know is by testing it.

3
  • Hey thanks for the answer! Cleared up my confusion. Just one thing though, do you thing using an image size of 300px width for both 400px and 200px wide image (display size) would be wise? As I'm considering creating only 2 image sizes using average width (display width) of 4 image sizes. I'm think this would minimize the amount of images that Wordpress would create, or should I not worry about that? May 9, 2014 at 13:13
  • I would be more worried about serving the correct image to the device. Storage space is super cheap nowadays so the focus should be on decreasing the load times of your page. May 9, 2014 at 13:14
  • Right, makes perfect sense. That cleared all my confusion and I feel quite confident about what I'm doing right now. Thank you :) May 9, 2014 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.