How to manage images or videos in a CMS collection
Why you should manage media effectively in your collections
Key points • Images and videos enrich your hotel content • Proper management ensures a clean and effective layout • Dedicated CMS fields allow for dynamic and consistent display
Images and videos play a vital role in the appeal of a hotel. Whether showcasing your rooms, common areas, a special offer, or an event, effective media management within your CMS collections ensures a seamless and immersive experience for your guests.
To begin, verify that your CMS collection includes dedicated media fields: an Image field for your visuals, and a Video or Video URL field for external integrations. These fields allow you to associate a media file with each element without complex layout manipulations.
When adding a new item, upload your images directly into the designated field. Use appropriate dimensions (generally around 1200px wide to maintain optimal quality without slowing down the page) and be sure to compress your files to improve the hotel website's performance.
💡 Tip: Use WebP format images whenever possible. It's a lightweight format, ideal for reducing loading times while maintaining good quality.
Videos can be managed in two ways. You can either use a "Video URL" field to embed links to YouTube, Vimeo, or other platforms, or add a rich field if your environment allows it. Always prioritize external embedding to avoid excessively large files and optimize loading speed.
On your dynamic pages, select the Image or Video component and then connect it to the corresponding CMS field using the “Get image from CMS” or “Get video from CMS” option. This ensures that each page automatically displays the media associated with the item without any additional configuration.
If you want to display multiple images for a room or offer, create a gallery by adding multiple image fields or using a linked collection (e.g., a "Room Gallery" collection associated with your "Rooms" collection). This method allows you to create dynamic sliders or galleries perfectly tailored to the content.
To optimize even further, remember to systematically fill in alternative text (alt text) for each image. This improves accessibility and contributes to your hotel website's organic search engine ranking.
Finally, always test the display on different devices—computer, tablet, mobile—to ensure your images and videos adapt correctly to responsive formats. Incorrectly sized media can cause layout misalignment.
Conclusion
Effectively managing images and videos within a CMS collection is essential for delivering a stylish, high-performing, and professional hotel website. Thanks to dedicated fields, file optimization, and a well-structured dynamic layout, your media will display automatically and consistently across all your pages.