We've got a new component template/presentation available in SDL Tridion called the Jumbo Feature Rotator. This is a rotator that sits right beneath the top navigation bar and fills the whole width of your browser window — a template requested by the team that's heading up the Minnesota State Brand initiative.

This new template works nearly identically to the already existing feature rotator found on many of our Tridion-hosted sites — you can have one or more feature components, you can use either General Content or Flex Spotlight components, and you are limited to just one feature rotator set per page.  So if you already have a feature rotator on your page and you want to have a jumbo one, you have to choose between one or the other.

With this new component presentation, you have two template options to choose from:  Jumbo Feature Rotator, and Jumbo Feature Rotator - Branded.  The former creates a rotator that is fully masked with a translucent gray bar over the image and the text spans nearly the full width of the window.  The latter of the two templates splits it up into thirds — the left third has the Minnesota blue background with white text, and the right two-thirds the image is exposed allowing for a focal point to be displayed.

If you use the branded template, choosing the right photograph can be tough with the responsive nature of the web — it will NOT look identical on all browsers because the width of that browser will vary from user to user.  So to help take the guess work out of making images for these full-width feature rotators, I've created a Photoshop template that you can use to create your feature images.  It includes a grid with a "safe zone" indicator, helping you see which portions of your image are guaranteed to display and where you will see varying degrees of visibility.

This is what the image itself looks like:

Here is an example using the grid as an overlay against a sample image to see where the safe zones lie within that photo:

In this photo, there is a green zone marked "Safe Zone for Branded Rotators" — this area is generally going to display on most device widths.  The orange-yellow area marked "Variable Zone - More Shows with Narrower Window" will degrade in visibility depending upon the width of the browser.  The wider the browser window, the less of that area will display. In this sample, the cap of the mushroom and a portion of the stem is visible in most browser widths — but as the browser gets wider, less of the stem will be visible.

In terms of what size image to use, we suggest a working dimension of 1200 pixels by 400 pixels at a resolution of 96 dpi.  However, your agency is free to choose a different height value if you wish — but it will require some CSS overrides to increase (or decrease) the height of your jumbo feature rotators.  Presently, the maximum height is set to 350 pixels.  If you require that value to be something other than the default, please submit a ticket to the Help Desk for us to create an override in your custom.less file that will set the value at your desired height.

You may download this grid template from my SharePoint OneDrive account. If you prefer a .PNG file, you can download the PNG file — just be sure to maintain the image size AND its aspect ratio of 1200 x 400 at 96 dpi.

If you have any questions, please reach out to me. I'd be glad to help where possible.