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.
1 Problem
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.
Comments
0 comments
Please sign in to leave a comment.