Full-Width Homepage Slideshow

Rocky Mountain National Park
An example of the full-width homepage slideshow in action at RockyMountainNationalPark.com

The normal homepage slideshow displays images at their normal sizes, uncropped and usually centered on the page. The full-width slideshow, on the other hand, will display the images at 100% width of the browser window, which offers a striking graphic look to the homepage.

There are some subtle points to consider when configuring the full-width slideshow:

  • The full-width slideshow will of course always be full width, but you can adjust the height in the slideshow settings on the Homepage Settings page in the admin.
  • The width setting there won’t affect the slideshow width itself (since that’s always 100%); however, it DOES affect the aspect ratio of the slideshow when the browser window size is smaller than that width. In other words, when the browser is wider than the slideshow width, the slideshow will always stay at the same height. However, when the browser is narrower than the slideshow width, the slideshow will scale down in height while keeping its aspect ratio in proportion (the slideshow width/height ratio).

Therefore, I would recommend to first determine the height you want at normal browser size, then play around with the width setting while also sizing your browser to narrower sizes so you can see how it scales in proportion.

The full-width slideshow looks best with panoramic dimensions (for example, something around a 2:1 ratio or wider, such as: 1200 width / 600 height).

Once you've determined the best dimensions and aspect ratio of the full-width slideshow, it's best to include photos that match this aspect ratio exactly or as closely as possible, so that the images fit nicely within the slideshow without too much cropping. For instance, if your slideshow has a 3:1 panoramic ratio (such as 1200 width / 400 height), then the images you include should also have a 3:1 panoramic ratio (or something close). It's also safest to use photos where the subject matter is near the middle of the image, since the top and bottom may get cropped out depending on the screen size. Definitely do not try to include any vertical images.

Since the full-width slideshow will be much wider than the normal slideshow on desktop screens, the images you include should probably be significantly larger then your normal gallery image sizes. I would recommend sizing these images to at least 2000px wide, or possibly even 2400px wide.