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. For a full hero page, Big Scroll can be used in a similar way to as described here.

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.

Design of the information overlay is made using options towards the bottom of the Image Display tab. Where your information overlay is simple text in the same position for all slides, these options in the edit dialogue provide very flexible control of the information overlay position and design.

For our example above, we needed to take this further to modify the information overlay position slide-by-slide and constrain it within the theme grid as described below.

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. 

Using CSS classes for greater control of the overlay

Where your overlay is simple text in the same position for all slides, and where you do not need to stay within the grid area of the page, you can ignore the below. The overlay positioning options in the Image Display tab already offer very detailed control.

Theme grid container

For our example we decided 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 information text position within the information overlay. So the outer full coverage information overlay is filled with a theme grid from Atomik/Bootstrap. This keeps the overlay content within the grid and nicely aligned with content above and below the hero slider.

class="container d-none d-sm-block"
class="row"
class="col-12 col-lg-5 omni-hero-panel"

For some of our images we then provide our Hero Wrapper Style attribute with further overrides of the overlay positioning specific to that individual image. The text in the attribute is interpreted in the same way as the Wrap with HTML section and completely overrides text in the block edit dialogue Wrap with HTML section. 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. 

Custom styling of our overlay panel

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;
}