Hi PJ

If you open your developer tool (F12 on your browser), you can select the element and you should find the border is controlled by the CSS here:

.rvdsf-productlist-container
.rvdsf-product-gallery-container
{

border: #ddd 1px solid;
...

}

.rvdsf-productdetail-container
.rvdsf-product-gallery-container
{

border: #ddd 1px solid;
...

}

The border helps provide visual alignment especially when you have variable sized images. If you shrink the border to your image size, it might not look as nice if you have some large and some small images. In this case, it might be better to remove the border altogether.

Enjoy!

Hi Stephen,

I love the border and agree it is a great visual aid.

My previous question was poorly formulated. Here is what I need to know.

1) What is the ideal image size (width x height) to use for the default productlist container? In the screenshot below the uploaded image in the middel has dimensions of 740x560 and the image on the right has dimensions of 4523 x 2996. Yet the image on the right still appears to be to small for the container. So obviously I need to change the image ratios, or the container ratio.

2) How do I change the container ratio? For example if I want to use square images?

3) Does the product showcase, product list and product detail use the same ratio? Do I change that ration in one place?

4) Is the default width settings in Configuration > Gallery with which Revindex is installed, the ideal settings for the default image containers?

Regards

PJ

Hi PJ

These are all really good question and I'm afraid not an easy answer because it varies from skin to skin.

1. In order to adapt to the growing need of mobile phones and tablets, you'll notice these days almost any image will shrink to fit the container size determined by CSS. This is the case even if you uploaded/configured a large width image.

2. You only need to worry about the ideal width. You don't need to worry about the ratio because the browser handles the shrinking automatically while respecting the ratio to prevent the picture from looking weird. This is obviously governed by CSS, so you could technically fiddle with the ratio if you absolutely only care about fitting in the boundary even if you uploaded a very tall image.

What is the ideal width? It really depends on your skin. Take for instance the Product List page by default on a desktop view wants to show 3 columns of products and tries to take up as much space as possible in your content pane to make it look nice because too much or too little empty space is not pretty. The ideal width of your thumbnail image width should be something like the width of your content pane viewed from a desktop and divided by 3 and minus some space for margin so it doesn't look crowded.

3. The CSS that affects the gallery image on the Product List page targets the following classes. There is similar one for "productdetail" and so on. If you look at the CSS defined (open developer tool F12 on your browser), it only specifies the height and nothing about the width because it will try to expand and use as much space available when 3 columns of images are placed in the content pane. The height is specified so the rows look aligned. If all your images are tall than wider, you might want to increase the height value. If you don't, the browser will shrink so it fits leaving the width of the image smaller than the perceivable ideal.

.rvdsf-productlist-container .rvdsf-product-gallery-container {
border: #ddd 1px solid;
display: flex;
justify-content: center;
align-items: center;
height: 160px;
}

4. The new Storefront uses these new default dimensions and should work fine in most skins.

Detailed Width = 640 px
Display Width = 240 px
Tile Width = 48 px
Thumbnail Width = 120 px

I hope this helps to explain a bit.

Hi,

When you have to display technical details on pictures then it is not so important to have the box complete filled.
The customer will only be focused on the details of the object.
However, in your case you are displaying the picture itself as an article.
Then you have to read this article about the golden ratio.
https://en.wikipedia.org/wiki/Golden_ratio
I' am a painter and know about appealing sizes for the eye.
Let you picture be wider than high.
Hope you can use this.

Regards, Ton