How to change the thumbnail's width ?

[tinotchino]

Hello, How to change the thumbnail's width when the image format is landscape? When the format is "portrait" I manage to modify the height by replacing in theme.js

$('.thumbnail', this).height( $(this).width()*1 ); by $('.thumbnail', this).height( $(this).width() - 5 );
By doing this the height is increased. However I do not manage to do the same for the width. Thanks for any help.

Best regards

Tino

[michu2k]

Hi @tinotchino

1. easy option: Set original image sizes in galleries/view/gallery.html (replace sm with lg) (Remember! You enter the original size of the image, so watch out for image sizes because they can affect page loading time. If necessary, you can add any LazyLoad plugin)
2. more difficult option: Modify the gallery CSS to get a better result. (You need to know CSS & HTML)

Regards

[tinotchino]

Hi Michu2k, Thanks for your help. My english is not fluente, so I have the feeling my question was not clear. In fact when my image is at the "portrait" format, the width of my image is xs (150px) and the height is 200px and it is very well, it seems like a slide and I like this. But when my image is landscape the width is also xs (150px) whereas width should be 200px and height 150px. It is what I would like. I'am familiar with css and html but i need some help.

Best regards

Tino

[michu2k]

Ok, so let me explain. Every time you upload an image to your gallery, Batflat will check the image size and resize the image to several sizes:

• lg- original size,
• md- 600px,
• sm- 300px,
• xs- 150px.

Therefore, when your image is 150x200px, it will be resized to HEIGHTx150px. As I write above if you uploading small images, then you can use their original size lg.

[tinotchino]

Thanks indeed for your help. I just added in gallery.css the line max-height:200px and change max-width to 200px instead 150px; Now the size of all of each my thumbnails are proportionnal (150x200 or 200x150).

.gallery > div[class*="col-"] .thumbnail img { position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; transform:scale(1.0); transition:all 1s; max-width:200px; max-height:200px; }

Best regards