Hero Sliders

Creating a full-width hero slider is fully supported using many of Omni Gallery's display widgets, but does involve some special considerations. Our example on this page is the slider you can see above. We continue to use the usual default content images as a source and, in this instance, use a Swiper display widget to display them.

A block to start with

To provide something to work round, its best to just get an Omni Gallery block in place with some images in place, fix their height as a percentage of the width using percentage or vw units, save the block and then do the Concrete CMS block design part before continuing. This provides something to visualize while working on the details of the overlay.

The usual display widgets for such would be Swiper or Glider, but could also be a Thumbnail Gallery or the Core Image Slider. For an image only slider Vegas can also be used, but Vegas is not so good for adding an action message overlay.

A hero slider, and especially a letter-boxed hero slider, will often have images specifically chosen and cropped for it. We have not done that here. Our images are the usual default content images automatically cropped about the center. 

Block Design Settings

First the Concrete CMS block design settings. For a full width hero slider, whether it is page specific or global, lets state the obvious. You need a full width area in your page template. That depends on what templates your theme provides.

After adding an Omni Galley block in that area, we need to go into the block design menu and Disable the grid container. For a hero slider we usually need the block to span the entire width of the window, not be constrained by any grid framework.

Omni Gallery Settings

In Omni Gallery, we have already mentioned setting the image height in % or vw in order to maintain a letter-boxed aspect ratio. You could also work with units that give the slider a fixed height independent of the window width or set a minimum height to help with small displays.

We have opted for one image at a time. Nevertheless, everything works just as just as easily with multiple images in a carousel.

The real considerations here are for the Information Overlay.

Fore our example we want to use theme grid classes to keep the overlay text within the theme grid container. You don't have to do that, its just how we managed the overlay for our hero slider above. 

Using the usual overlay options, we made the information overlay as big as the slider, covering the entire area of the slide by specifying position 0px and padding 0px on all 4 sides.

We then added the theme grid classes in Wrap with HTML (optional). These are the default classes to wrap the overlay content, but they can be overridden for individual images by selecting a text area attribute. We called the attribute Hero Wrapper Style, but it could be any text area attribute.

Omni Gallery renders each row of text in the Wrap with HTML section as <div> with the contained attributes. Here we use theme grid classes to set up the overlay position within the overlay. So the outer full coverage overlay is filled with a theme grid from Elemental/Bootstrap. This keeps the overlay content within the grid and nicely aligned with content above and below the hero slider.

class="container hidden-xs hidden-sm"
class="row"
class="col-lg-5 omni-hero-panel"

When an image attribute is provided, text in the attribute is interpreted in the same way and completely overrides text in the block edit dialogue. We have used the attribute on a few of the slides to change the column width and offset within the theme grid. Everything else is done with the usual Rich Text editor controls.

Finally, there is no room for all the text on smaller screens. Hence on a medium screen the overlay defaults to all 12 columns, then on small and extra small screens, we don't show it at all. 

We have also added some custom CSS in the Advanced tab of Omni Gallery to style the content of our overlay. This is by no means required, we could have used existing theme classes in the Rich Text editor or the various colour and alignment options..

.omni-hero-panel h1,
.omni-hero-panel h2,
.omni-hero-panel h3{
    color:#ffffff;
}
.omni-hero-panel p,
.omni-hero-panel li {
    color:#ffffff;
    font-size:20px;
}
.omni-hero-panel{
    margin-top:15px;
    border-radius:10px;
    border:2px solid rgba(117,202,42,0.6);
    background-color:rgba(40,40,40,0.3);
    padding:15px;
    position:relative;
}

Parallax

When using the Swiper display widget we can also add a parallax effect to the information overlay. This works best when showing just one slide per view. With multiple slides per view in a carousel, parallax is best avoided.