Full Screen Slideshows and Background Content

Slideshows are a great way to present your images. On your Homepage, you can elect to display a slideshow in the Content Area of the page.

In this Content area, you can also display a single photo or a single video in lieu of the slideshow of your images. You can also choose to display a Photo Strip of your photos.

Depending on the Layout applied to the page, the Content area will be referred to either as the Spotlight Content area or Background Content Area.

The Spotlight Content is used for Layouts that display the content area in a constrained window in the page.  See this link for our guide on adding content to the Spotlight Content area.

For Layouts that display the Content area in full screen across the whole browser window, the content is added to the Background Content area.  This guide covers how to add content to this area.


Please see this video for how to setup the homepage slideshow:


 

Choose Content for Full Screen Layout Slideshows

With the full screen layouts, the system is designed to fill your visitor's entire browser window with the slideshow image. Since most internet viewers' monitors are in the widescreen format, portrait or vertically oriented images will need to be scaled and cropped to fill the entire browser window.

The best way to minimize this with the full screen layouts is to display only wide horizontal images as those images are the ones that will most likely match the viewer's browser window size.

But because of the great variety of browser windows sizes and shapes, and monitor sizes, shapes and resolutions, there isn't one specific image dimension that will work for all of your site visitors. One setting that will allow for no cropping for one site visitor will still require cropping when viewed by another visitor.

So even when using horizontal images, we recommend using photos where the subject matter appears closer to the center of the image so that no important parts of the subject can be cropped.

If displaying portrait or vertical images on your homepage is important to you, you can try displaying a Photo Strip in your Full Screen Layout home page instead of the slideshow or a single photo or video.

 

Applying a Layout that uses Background Content

To display a Background Content Area, you will need to select a Full Screen Layout for your home page.  Here is how to select a Full Screen Layout.

​In the Dashboard, hover your mouse pointer over My Zenfolio then click on Customize Website.

Dashboard to Customize Visitor View

The page will refresh with a new customization menu at the top, confirming that you are in the Customize Website View.

 
  1. Click Layout in the top menu. A popup window will open.
  2. Click to select the layout you would like to use for the Home Page.
    To display Background Content, select any of the Full Screen Layouts.
  3. Click Apply to confirm and apply the selection. The page will refresh with the new layout applied. Review the page with the new layout applied. Repeat steps 1 to 3 until you are happy with the selection.

Apply Full Screen Layout to Home Page

After applying a Full Screen Layout, follow the steps below for configuring the Background Content.

 

Selecting Background Content 

  1. ​Login in to your Zenfolio account and then hover your mouse pointer over My Zenfolio.
  2. Click on Customize Website View from the menu that appears.
Access Customize Visitor View New Edit View

 

The page will refresh with a new customization menu at the top, confirming that you are in the Customize Website View.

 

  1. Select Background Content in the menu.
  2. In the pop-up window, modify current settings, or click on change to select a different content type.​
  3. Select one of the content types (Photo or Video, Slideshow or Photo Strip).
Background Content choose Content Type


Click on these links to skip ahead to the steps for the listed content types.


Add Photo or Video Content

To display a single photo or a single video in the Background Content, the photo or video must be first uploaded to a gallery in the account.
  1. Select the gallery where the photo or video is located. You may also choose to enter a URL in the field below if the image is not located in your account.
  2. From the gallery, select the photo or video. This content must be public (not locked with a password or set to private) in order to select it.
  3. Click Select to confirm your choice.
  4. In Set Options, configure the two options
    - Click Action: This controls how the page behaves when the site visitor clicks on the photo.
    - Image Position: This controls which area of the image is prioritized when the image does not match the site visitor's browser window size and shape
  5. Click Insert to apply the photo or video to the page.
Background Content Photo or Video
Publish your changes before exiting Customize Website View to make those changes live on your site.
 


Add Slideshow Content

  1. Select the desired gallery or collection that contains the photos you wish to display in the slideshow.
  2. Click Select to confirm your choice.
  3. In Set Options, configure the slideshow options.
    - Soundtrack: Choose to add a soundtrack to the slideshow.
    - Show Images for: Choose the duration between images.
    - Transition: Choose the animation used to transition between images.
    - Loop Slideshow Images:  Mark to loop the slideshow.  This will also loop the soundtrack when applied.
    - Play in Random Order: Randomizes the display of the images
    Click ActionThis controls how the page behaves when the site visitor clicks on the photo.
  4. Click Insert to apply the photo or video to the page.
Background Content Slideshow
Publish your changes before exiting Customize Website View to make those changes live on your site.


Please note that with galleries that contains a video, when displayed in the slideshow, the video is skipped and not displayed in Background Content. Instead the slideshow will skip to the next image.

This pertains only to slideshows displayed in Full Screen Layouts and Widescreen Layouts. Videos can be displayed in the Spotlight Content window when using a Classic Layout.

 

Add Photo Strip Content

  1. Select the desired gallery or collection you wish to use for the Photo Strip.
  2. Click Select to confirm choice.
  3. In Set Options, configure the Photo Strip options.
    Image Spacing: Choose the number of pixels between each photo in the Photo Strip
    Click ActionThis controls how the page behaves when the site visitor clicks on a photo.
    Controller Style: Choose between displaying a scrollbar or navigation arrows.
  4. Click Insert to apply the photo strip to the page.
Background Content Photostrip

See this guide for more details on applying a Photo Strip to your home page.

Publish your changes before exiting Customize Website View to make those changes live on your site.