Making images line up like the photography template demo.

[Stephan Wind]

Hi, I really like phoca gallery and I'm currently designing an artists website with the gallery as the center piece to display artwork.
I have a question regarding thumbnail size.

I would like to display the images in a similar format as the photography template demo:
https://www.phoca.cz/phocacartdemo/phoca-gallery

What variables are you using to get the thumbnails to align perfectly like that?
On my project there always seem to be some sort of offset due to the margin, can I set the the thumbnails to a certain size to compensate?

My progress to far looks like this:
http://stephan36.hinchliffeart.co.uk/artwork/seascapes

Any help would be greatly appreciated! I'm still trying to learn more about Phoca and Joomla 3 so any advise is welcome.

Kind regards,
Stephan

[christine]

Hi Stephan,

nice gallery! I checked serveral times the small different "align" - but I couldn't find the reason for ...

I'm sure you checked this page: https://www.phoca.cz/documents/2-phoca-g ... -demo-site (masonry). Maybe also check under options: General Settings > Equal Heights to No. Will ask Jan for assistance.

Kind regards, Christine

[Stephan Wind]

Thank you Christine.

What we think is happening is that since the landscape images are half the height of the portrait images and the same width, now if you add two landscapes on top of each other you get two images with a margin in between, in our case I think it's 2 or 3 pixels, so if for example a portrait image is 300 px high, the landscape images are 150+150+3 pixels(for the margin) this means that the images line up in a non-symmetrical order.

What I would like is to still have the masonry effect and at the same time have symmetry in the categorie view.
Preferably I would like the same as the Phoca photography demo, as on there the images are lining up perfectly straight.

[Jan]

Hi,
yes, the demo page exactly works like you need. You wrote it correctly, as default, there height is not the same when there are two landscape next to one portrait (as two landscape images do have empty space more).

This is why there is a specific parameter:
Margin (Additional Thumbnails): set it by your padding space between the images (e.g. 6 for 6px) - then the thumbnails need to be newly created (portrait thumbnails will have larger height so the sizes are symetric)


Jan

[Stephan Wind]

Thank you Jan,

I've got the gallery looking a better I will need to talk to my client about adding more and change some of his image for the gallery but the website is really taking shape now.

Thanks a lot!

Kind regards,
Stephan

[christine]

Hi Stephan,

that's fine! Thank you for your feedback and we wish you success with your gallery.

Kind regards, Christine