Page 1 of 1

Image aspects

Posted: 27 Jan 2022, 21:17
by JMM
Hello Karl,

When the slideshow is displayed on my Home screen, my vertical (i.e. portrait) images have their tops & bottoms cut off, because my X3 installation is using a horizontal (i.e. landscape) aspect ratio.

Example

Is it possible for me tell X3 to "fit to screen", or at least for X3 to use vertical (portrait) aspect ratio?  I realize that in the case of vertical (portrait) images, there will be black bars on the left & right sides of the screen, but I can live with that.

Secondly, also related to aspect ratio, on my Galleries page, the 3 galleries have their preview images in a square ratio, which is exactly what I want, however, when a user is on my Home page & hovers their rodent (mouse) over Galleries next to the Home button, those preview images are wide, as in something like 16:9, cutting off the tops & bottoms.  Is it possible in this latter case, to set X3 so that when a user is on my Home page, when they hover their rodent over my Galleries button, that the preview images are displayed in a square format?

Thank you in advance & have yourself a splendid day.

Regards & be safe,

John

Re: Image aspects

Posted: 27 Jan 2022, 22:21
by mjau-mjau
Hi John, thanks for questions.

To be fair, there is good reason that the "slideshow" layout is not a preferable method for main showcasing of individual images to visitors. Just for reference, take a look at the X3 POPUP (click any image), where the canvas takes exactly the entire screen, and can then fit images inside regardless of screen size and aspect vs image size and aspect ... That's about as optimal as it gets for displaying images. As for the slideshow layout, the "canvas" needs to be placed on a scrollable page at specified size (max device screen width), and then images need to display on the slideshow canvas. There are two settings 1. COVER, which scales images to cover the canvas without margins, causing some cropping, and 2. CONTAIN, which contains the image in full within the canvas, making it entirely visible but empty margins. As you can imagine, the visual results of these two options will be drastically affected by image aspect vs canvas aspect (often same as device aspect, if slideshow is set to 100% height). For this reason, personally I use slideshow only for "intros" with selected images that look good in "cover" mode also when cropped.
JMM wrote:When the slideshow is displayed on my Home screen, my vertical (i.e. portrait) images have their tops & bottoms cut off, because my X3 installation is using a horizontal (i.e. landscape) aspect ratio.
You can assign CONTAIN mode in the page's slideshow settings (page Settings > Gallery > Slideshow > Fit: "contain") which means the image will "fit" within the stage and display entirely. Of course, this means there will be large borders on desktop for portrait images, and large borders on mobile for landscape images (opposite aspects image vs screen).
JMM wrote:Is it possible for me tell X3 to "fit to screen", or at least for X3 to use vertical (portrait) aspect ratio?  I realize that in the case of vertical (portrait) images, there will be black bars on the left & right sides of the screen, but I can live with that.
Assuming the above answers that? In a perfect world, one might want those images to display with borders on desktop (no other logic after all), while on mobile maybe in "cover" mode with slight cropping (just to avoid borders). However, this would require a lot of math and threshold values to automatically toggle between cover/contain mode depending on image aspect vs canvas aspect.
JMM wrote:Secondly, also related to aspect ratio, on my Galleries page, the 3 galleries have their preview images in a square ratio, which is exactly what I want, however, when a user is on my Home page & hovers their rodent (mouse) over Galleries next to the Home button, those preview images are wide, as in something like 16:9, cutting off the tops & bottoms.  Is it possible in this latter case, to set X3 so that when a user is on my Home page, when they hover their rodent over my Galleries button, that the preview images are displayed in a square format?
I can see that there are different ratios for the preview images, but I can't quite see what it has to do with mouse hover. There is actually a "crop" setting for folder preview images, and I'm not quite sure right now why this differs between the sample index page and defaults. Click index page Settings > Folders (tab), scroll down to "Crop images". It is likely set to 3:2. Change it to 1:1.

It should be set to 3:2 as default (for new pages). You can change the default from main Settings > Page > Folders > "Crop images".

Re: Image aspects

Posted: 28 Jan 2022, 11:34
by JMM
Much appreciated for your reply & comments, Karl.

I will take a look at your comments over the next couple of days, to see if I can come up with a solution.

Thank you again, and have a great day.

Regards,
John

Re: Image aspects

Posted: 28 Jan 2022, 18:14
by JMM
You can assign CONTAIN mode in the page's slideshow settings (page Settings > Gallery > Slideshow > Fit: "contain") which means the image will "fit" within the stage and display entirely. Of course, this means there will be large borders on desktop for portrait images, and large borders on mobile for landscape images (opposite aspects image vs screen).
Bingo.  Perfect, that's actually what I wanted.  Thank you, Karl.
I can see that there are different ratios for the preview images, but I can't quite see what it has to do with mouse hover. There is actually a "crop" setting for folder preview images, and I'm not quite sure right now why this differs between the sample index page and defaults. Click index page Settings > Folders (tab), scroll down to "Crop images". It is likely set to 3:2. Change it to 1:1.
I made the change, and cleared my cache, but the problem is still there.

When a user specifically clicks on the GALLERIES button at the top of my homepage, they are taken to THIS page (note that the 3 preview images are square).

However at the top of my homepage, if instead of actually clicking on my GALLERIES button, if they instead just hover their mouse over the GALLERIES button, they see THIS (note that those same 3 preview images are no longer square, but now 2:1).

Any idea how I can get the preview images in the above to also be 1:1 instead of 2:1?

Thank you in advance, Karl.