I’m currently using the Horizon Theme and running into a couple of issues related to image handling—specifically with the Bento layout and the slideshow/banner section.
Issue 1: Automatic image cropping in the Bento layout
Ideally, I’d like to upload all images in 16:9 format for consistency. However, the Bento layout uses multiple box sizes, which leads to images being automatically cropped depending on where they appear. This often cuts off important parts of the image.
To make things worse, the Horizon Theme doesn’t allow setting focal points for images. So I have no control over which part of an image gets cropped or shown.
Issue 2: Slideshow banners display inconsistently across devices
Another problem I’m seeing is that the slideshow banners appear at different heights on different devices—even when the screen sizes are nearly identical.
This makes it unpredictable whether the full banner image will be visible across all screen types. There’s no reliable way to ensure that the banner is always fully and correctly displayed.
My questions:
Is there any way to disable or control automatic cropping in the Bento layout?
Can focal points be added or simulated in the Horizon Theme?
How can I ensure that slideshow banners appear consistently across devices?
Are there any recommended image sizes or formats that work well for both the Bento layout and the mega menu?
Any advice or workarounds would be greatly appreciated!
In regards with the focal points - if you got to content-> files then find your image assigned to the collection - click on it and you can set the focal pointy which will be used in the theme. Please mind focal points are an admin feature - themes only enable the use of the focal points.
On the same not, Horizon seems to take the default collection image without having an option for custom image in bento box - which kinds make you think that Focal points are not available in Bento box section - which is untrue.
For the hero section - you can use a custom height and set it to 100% or whatever percent you want which will be used across all screen sizes
I was able to find the focus points. I will try filling the Bento with 16:9 images and setting the focus points correctly, and I hope that will solve the problem.
I just couldn’t figure out the slideshow. I think I expressed myself incorrectly. I replaced the hero banner with a slideshow because I can only insert two media files in the banner, and these are then placed side by side rather than sliding. The height can be customized there.
Unfortunately, you don’t have that option with the slideshow, or I can’t find it. I took a screenshot of it.
Do you perhaps know of a solution? When I set it to “auto,” the banner disappears completely and is no longer visible.
Chiming in on the focal point issue. I hope this is addressed in Horizon soon.
Currently focal point is not leveraged for dynamically connected resources. This includes standard admin featured images which are now connected dynamically.
Focal point does work for theme loaded images.
Examples:
Collection header layout defined. Image is either used as background or has a ratio applied. Image source is connected to standard Collection Image resource. Focal point defined in Image.
Results:
Image ignores focal point & is cropped centred instead
Hopefully when image focal point issue will resolve the cropping issues we’re both experiencing.
Tips:
Responsive/mobile imagery is a bit of challenge if only one image can be used. A general tip to prevent loss of detail is to put all information centrally within the landscape image. That way, when cropped for mobile no important details are lost.
Consider CSS. It may be worthwhile changing elements containing images to object-fit: contain rather than ‘cover’. Set height etc.
RE Slideshow. If you haven’t already, it may be worth testing out what you’re doing again with the latest Horizon versions. Hopefully there’s a fix.
In addition to above graphics tips. I would play around with Content within the Slide’s block to help define height for the ‘Auto’ height slide e.g.
Variation of Groups & spacers. Consider working with a button etc.
less ideal - CSS opacity of content / transparent text via colour scheme (but i’m sure this will flag poor SEO)
RE Bento, given images are cropped centred, you would have to work with the images to get it showing the best of your abilities. Then cater for the small bento ratio vs large bento ratio. CSS may be able to help too.
For example, if you have similar graphics to the purple slide:
Ensure there’s enough background (margin within the image). Cater the margin to the bento ratio.
Or possibly, use CSS to set heights or contain the image & apply a coloured background to the respective bento block.
It depends what images you’re using, maybe Bento isn’t the way to go.
If you’re using all 16:9 then you can use Collection List: Grid and apply a landscape ratio & further define with CSS
