Center thumbnail

Roland

Hello !

This is probably a dead simple question, but, how to center horizontally and vertically a picture inside a square thumbnail ? At first I was thinking it's was the default config.

Here is the test picture : https://up.rolandtisserand.fr/f.php?h=0pFZa79u&p=1
Here is how it's render with Basic theme : https://up.rolandtisserand.fr/f.php?h=1-We1_3w&p=1
Here is how it's render with zpMobile theme : https://up.rolandtisserand.fr/f.php?h=0sRnnwFj&p=1

I played around with the printCustomAlbumThumbImage function on my own theme, without sucess.
I made a simulation on photoshop : https://up.rolandtisserand.fr/f.php?h=0EvYV36Y&p=1

Thanks in advance for any kind of help ! :-)
Roland

acrylian

You cannot do that via PHP/Zenphoto functions. While we have "maxspace" functions which can generate sizes that fit into a max width/height, the positioning needs to be done via CSS:

• https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
• https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

Roland

Hello acrylian, as I understand your answer, to have a perfectly aligned picture (horizonal and vertical) in a square thumbnail (from any rectangular picture size), I need to generate a rectangular thumb that will be centered and cropped in a squared html element via css. I’m right ?

acrylian

With above CSS it does not matter what orientation an image has. The image is not centered within an element, but the image iself. Cropping or not is a matter of setting. Please see the links and their examples.

Roland

Thanks acrylian !