: How can I improve these product thumbnails? I have these product thumbnails / images on our website that I want to look better. I especially want to improve the situation with the white space

@BetL875

You have an awkward situation. The first problem is that the images were not taken with the intention of using them in uniform rectangular boxes, so if this were my project I'd would direct a new photo shoot with each image captured so it would work. All these different aspect ratios and degrees of frame-filling make your job extremely difficult. (The photography has other issues, like inconsistent color temperature and exposure, that don't help at all.)

From a design standpoint, the next problem is the relative scale of all the different pieces in their respective shots. Whenever the scale changes, the page fragments. You can see this clearly in the first few images, where that close-up of a tabletop jumps off the screen because it's so different from all the rest. As much as you can, keep relative scale the same wherever you have images grouped together.

One way to solve the problem of awkward aspect ratios is to just go ahead and crop the images. Be brutal. A thumbnail is a thumbnail -- it doesn't have to be the complete picture. A thumbnail can be a detail from the full image, which is shown on the actual product page. You do have to do this image by image. It's not something you can automate.

The inconsistency created by mixing a few detailed close-ups, some long shots and medium shots fragments the page. You would create more impact overall by selecting an eye-catching detail from each piece and using only that as the thumbnail, but knowing how business owners fret about "show everything!" I would guess you don't have that choice. It's definitely worth pitching, though.

Another thing that can be useful in this kind of grid is to create double-wide and double-tall div classes (views-field-wide and views-field-tall, perhaps, based on your current class names), that occupy exactly the width or height of two adjacent product boxes. These don't break the grid, but they do allow you to fill the frame with a short, wide item like the garden bench, for example.

Vote Up Vote Down

@Gail6891361

Something simple you can do is to give the photograph a focal point. Try a red vase on the table as an example.

Vote Up Vote Down