Images on a slider or carousel don't always display properly. That's true for both desktop and mobile devices. It's sometimes possible to fix image display problems by changing the height or width of a picture. The problem with those fixes is that they can change page layout as well, which is not always a desirable outcome.
Here are two tweaks you can use to control the placement of images to improve display without changing page layout.
Sometimes, the top portion of an image is chopped off. Below is an example of that display problem on a desktop monitor.
2 Best practices
2.1 Customising the V focus
To fix the problem of chopped off tops, customise the vertical focus of an image. This tool shifts the image up and down on a vertical axis without changing its width, height, or aspect ratio.
- The instructions below show you how to adjust image placement on a Slider Component. The Carousel Component has the same image placement tools.
To access the V. Focus tool:
- In your slider, locate the slide with the image you want to adjust.
- Hover the mouse pointer on the image. A toolbar displays.
- Click the Edit Slide button and then click the Settings button in the bottom right corner. The settings panel displays.
- Click the Inner Background tab. A new panel displays.
- Scroll down the panel and locate the V. Focus line.
- Adjust the image position by clicking the plus (+) or minus (-) buttons.
- Click OK. The panel closes.
- Click Save. The image editor closes.
- On the Edit Content page, click Preview to inspect the image placement.
- Repeat the V. Focus adjustment as required.
2.2 Selecting optimal image sizes
It's not always possible to select pictures based on size. If you have options, images with a minimum width of 1920 are recommended. Suggested aspect ratios are 8:3, 3:1, 16:5, and 32:9.
Please sign in to leave a comment.