Photo Gallery Forums

I have enabled a slideshow to be used as intro for my homepage and the Galley item Fit is set to default "cover" for it. As the description says, at least on smaller screens on mobile devices this leads to a part of the image being outside of the displayed area. Is there any way to define which part of the image will be displayed so that the most important image content is shown? Thanks for any hint.

Good question. There is no "option" for this in the panel, but I believe there is a simple workaround via CSS background-position. Basically you would decide the approximate "focus" point as a percentage X and Y. From our demo:

Default 50%, focus is not perfectly centered:


Change X to 75% seems to do the job:


0% basically means its aligned from left side of image to left side of screen. 100% means it's aligned from right side of image to right side of the screen. The more higher number, the more the image moves to the left. In the example above, I am only assigning custom X value, because this is what will change on smaller screens. Since both desktop and mobile will likely show the full height of image, the Y value does not apply.

To add this, navigate to the page Settings > Page > scroll down to "Advanced" > Page CSS:

Hi Karl!
First of all, thanks for the tip. Unfortunately, however, the images are not cut in the width, but nevertheless in the height. For tablets and smartphones it depends on the orientation, in portrait mode it is ok, in landscape mode parts are cut off at the top and bottom. The same happens on a notebook with a screen resolution of 1920 x 1080. Higher screen resolutions seem to be ok.

If I understood correctly, in the described CSS code the value 0% is the Y axis (height)? If it Is adequate to the width, would mean the higher the value the further the image is shifted down? If so, I would have to test if that achieves a better alignment.

Then yes of course you can adjust the Y position in "background-position: 50% 0% !important;", which is by default set to 0% (top of screen). Top of screen makes sense under most circumstances, because when using a horizontal image, it will normally always show the full height across desktop and mobile, and instead crop X.

shoot_machine wrote:For tablets and smartphones it depends on the orientation, in portrait mode it is ok, in landscape mode parts are cut off at the top and bottom.

It's VERY unusual to hold a mobile device horizontally when visiting a website. The reason of course is because now with long tall mobile devices, viewing and scrolling websites in horizontal mode is almost useless. But yes, you can adjust the 0% value to emphasize the vertical focal point of your image.