How can I make two CMS images in a slide responsive to different screen sizes in Webflow, while preserving the 16:9 aspect ratio of the images?
TL;DR
- Add a Lightbox to showcase dynamic CMS images and set it as their source.
- Drag a Slider, set width to 100%, and maintain a 16:9 aspect ratio using padding-top: 56.25%.
- Use Flexbox/Grid inside slides for layout, set image width to 48% with margin.
- Use 'Get Image from CMS' to dynamically source images and set lazy loading.
- Preview in Webflow to ensure responsiveness across different screen sizes.
Making two CMS images in a slide responsive while preserving the 16:9 aspect ratio involves setting up your Webflow project correctly to handle these dynamic elements.
1. Use the Lightbox Component
- Add a Lightbox: Use a Lightbox component that allows you to showcase images and can handle CMS content dynamically.
- Set Lightbox Source: Connect the Lightbox to your CMS images to pull from your CMS collection dynamically.
2. Set Up a Responsive Slider
- Add a Slider: Drag a Slider from the Add panel into your canvas in Webflow.
- Style Slider Elements: Set the slider width to 100% and give each slide a 16:9 aspect ratio. You can do this by using a padding-top trick:
- Select a Slide and set its position to Relative.
- Add a Wrapper Div inside each slide. Set the div to 100% width, and use padding-top: 56.25%.
3. Implement Flexbox or Grid Layout
- Use Flexbox/Grid: Inside the 16:9 Wrapper Div, use Flexbox or Grid to arrange your images if you have two per slide.
- Set Image Width: Ensure the images have a width of 48%, with a small margin in-between if needed.
4. Connect CMS Images
- Dynamic Source: Use the Get Image from CMS option to pull the relevant image into each Image element.
- Ensure Lazy Load: For performance, ensure images are set to loading="lazy".
5. Test Responsiveness
- Preview: Use Webflow’s preview mode and resize the browser window to test how your Slider and images adapt across different screen widths.
Summary
To create a responsive slider with two CMS images that maintains a 16:9 aspect ratio, utilize a Lightbox/Slider, employ the padding-top trick to enforce the aspect ratio, connect the CMS dynamically, and ensure layouts adapt responsively with Flexbox or Grid. This approach will keep your images proportional no matter the screen size, while effectively utilizing Webflow’s dynamic content capabilities.
