Hotel Guests: This support center is created for hotel owners. Click here to contact us.

Hotel owners: New to hoteliers.com? Click here to find the best solution for your hotel.

Selecting the correct ratio for a photo slider

Pictures tell a thousand words. Therefore, all our Responsive Hotel Website templates in the Design Store include large picture sliders to tell your hotel's story. In order to show pictures at optimum size, we have made adding, organizing and cropping easier. 

This article assumes that you are already familiar with Adding and organizing images in your website via the CMS.

 

Every template from the Design Store has it's own size of picture sliders. However, these Galleries all have common ratios. A ratio is the relative width versus height of a picture. The following common ratios are available:

  • 16:9
  • 4:3
  • 3:2

 

Select the correct ration when you add a new Gallery into the Content Management System (CMS) of your website. 

 

Importance of selecting the correct ratio 

When you wish to create a professional website, it is highly important to crop pictures at the correct ratio. 

Example of incorrecly cropped picture due to wrong ratio:

Example of correctly cropped picture with perfect ratio:

 

Below you will find common pages of all Design Store templates in order to show you what the correct ratio is.  

 

Template: Piccolo, Night Audit, Cosmopolitan

Homepage / Main Slider (16:9)

Rooms and Packages overview (4:3)

 

Rooms and Packages (4:3)

 

Following pages / Content with gallery

 

Promotions

 

 

 

Template: Marquee

Homepage / Main slider (4:3)

Rooms and Packages overview (4:3) 

Rooms and Packages (4:3) 

Promotions (4:3)

 

 

 

Template: Concierge

Homepage / Main slider (16:9) 

 

Rooms and Packages overview (4:3) 

 

Rooms and Packages (16:9) 

 

Promotions (4:3)

 

 

 

Below, you can place a comment, in case you have a suggestion or question about this article. If case you have a bug, complaint or question concerning your account, we recommend to use "Submit a request" at the top of this page.
Have more questions? Submit a request

Comments