Tips for Choosing Photos for the Homepage Slider in the CALS Theme

The CALS theme comes with a built-in image slider that runs the width of the screen.

The image slider can be turned on or off via the Customizer (Appearance..Customize then Header Slide Options).

If you have a migrated site from Russell Labs and the slider is NOT enabled, please do not turn it on as it can break some of the site design.

Banner Images vs. the CALS Homepage Slider

Many of the migrated Russell Labs sites ran a theme called Twenty Eleven which allowed banner images at the top of each page, below the site name and above the main menu:

Those images were fixed size, and did not run all the way to the edges of the screen.

The CALS homepage slider loads an image and then resizes and crops it to fit the screen.

Due to this, many of the images that worked in the Twenty Eleven banners won’t work in the CALS slider, because they are not wide enough, and the focal point is wrong.

What Images Will Work in the CALS Homepage Slider?

Since the software automatically resizes and positions the images, you have less control than you do with the Twenty Eleven banner.

You only get two adjustments:

• at the slide level, you can adjust the Hero Image Vertical Alignment to match the focal point of the image (see focal point info below)
• in the Customizer in Header Slide Options, you can adjust the height for the entire slider

Choose your images with care to achieve good results.

Images Should Be At Least 1500px Wide

The software can downsize the image, but it can’t upsize it, the pixels will just get bigger.  The image should be between 72ppi and 96ppi.  Using higher resolutions will just slow down the time it takes the page or post to load, which is frustrating to people on wireless connections.

Images Should Be Landscape

The slider dimensions are panoramic; photos should be landscape orientation, not portrait.

Focal Point Should Be in the Bottom, Middle, or Top 1/3 of the Image

The “focal point” of an image is the central point of interest, i.e. what you want people to notice about the photo.

The CALS slider will not show the entire photo – it slices out a horizontal piece that’s about 1/3 of the full image height.

Note: the slider positions the very top of the photo behind the banner:

…so factor that in when choosing your image.

You need to choose which 1/3 of the image to focus on – the bottom, middle, or top third of the image.

Focal Point Examples

It can be difficult to visualize how the slider crops photos.  The examples below show the original images, and how they appear in the slider, with the Hero Image Vertical Alignment setting in the slide to match the focal point of the image.

Note: I cropped the sides of the photos to show detail.  You can see the full-width images on this site:  https://wptheme.webhosting.cals.wisc.edu/

Click to expand/collapse the focal point examples below.

Images to Avoid in the Slider

Some images simply do not work well in the slider.

Images with Tricky Focus Issues

The following types of images don’t work well in the slider due to focus issues:

• Stacks of different sized produce
• Long rows of crops running vertically with a horizon in the distance
• Close up photos of one spot with the rest blurred out

Images of People

Images of people, particularly group shots, do not work well in the slider because of the auto cropping.  The auto cropping can result in partial decapitation, and uncomfortable cropping of people’s arms and legs.

Also, most shots of people fill the entire screen, or more than a third of the screen.

When Adjusting the Slider Height in the Customizer, ALWAYS Check the Results on the Front End

The Customizer display isn’t precise – what you see in the Customizer is not always what you get.

Make sure to double-check the slider height by viewing the page as site visitors see it, then tweak the height as needed in the Customizer.