Question

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!

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange
scroll top