I am using 100% as the width of the div container (it is fluid grid layout) and I would like the photos which are portrait (higher than wide) not to be as wide as the landscape photos (wider than high) which is what I am seeing at the moment. Because the portrait photo stretches out downwards, and fills the width, it look much bigger than the landscape ones. Ideally I would like the portrait shaped ones to be about the same height as the landscape ones are wide. Is this possible?

A workaround I tried while I wait for an answer, is to use photoshop to add transparent pixels to the sides of the portrait aspect photos so they are the same width as the landscape ones but of course deeper, and saving as a transparent .png. This almost works, it displays as I want it to by pushing the thumbnails down and displaying the correct size and aspect ratio, but the transparent pixels on either side become white. As the page background is grey, this is not what I want.

Further investigation showed that the CSS Image Resizer was not preserving the transparency, so I added the transparent pngs, which were correctly sized, without using Image Resizer. I though this would sort it, but the same effect occurs - the sidebars are white.

So then I searched the CSS files for something that was white - nothing!

So now I am stumped. I can only assume the white background to the photos is hardwired into the javascript.

Is it possible to preserve transparency with CSS Image Gallery?

Hi John,
We recommend using images with the same or similar dimensions, as it produces better results. If you want to use both portrait and landscape images, you need to process your images in photoshop so they become similar size.

I am not sure you understand the problem.
I will explain exactly what I did:

1. I uploaded a folder of landscape photos using Image resizer. Set the size to 600 x 429. Everything fine.
I then added a folder of portrait photos using your Image resizer. Set the size to 429 x 600. Instead of displaying the images at 429 wide x 600 high, they were displayed at 600 wide - they were stretched out.

2 I then used Photoshop to resize the portrait images to 429 wide and replaced the previous images. Still it stretched the images to 600 wide.

3. The only way I can find to display portrait images properly is to use photoshop to create transparent pixels either side of the image so the whole image is 600 wide including the transparent pixels and save as PNG. However, your Image Resizer does not preserve transparency. So I had to upload the images, medium, big and small, so that the HTML was written in to the page, then replace them with the photoshopped ones. This is a very time consuming process. I have so far spent about 30 hours getting 3 slideshows to display correctly.

I think if CSS Image Gallery will not display a mix of Portrait and Landscape you should say so, or else explain more clearly how it can be achieved. Simply saying photoshop them is not good enough.

Are you intending to answer this topic? It really is not good enough to treat your paying customers like this.

Is it, or is it not, possible to mix portrait and landscape images? And if so, how?

I think i pretty much answered your question. It is better not to mix images with different aspect ratios in a responsive css image gallery. If you want to do so, edit them in Photoshop and make them the same dimensions.