Zen Banner Documentation

Template: _zen_banner_full.liquid

The _zen_banner_full.liquid partial template has the most customization fields for the editor. It can be included with a single line and has various fields that can be set by the editor to customize the look of the banner. The template has some optional inputs that can be used when including it.

section_class - Bootstrap class added to the main section element, used mainly for specifiying a margin for spacing with the content that follows the banner.

overlay_bg_class - A bootstrap background class that is used for displaying the overlay. Choose from bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, bg-white.

overlay_opacity - A value from 0 to 1 with 1 being no overlay, and 0 meaning a completely opaque overlay.

show_indicators - If multiple images are selected, this value (true or false) will determine whether bar indicators specifying the current and total slides in the carousel are shown.

show_fade_effect - If multiple images are selected, this value (true or false) will determine whether to display a fade crossover effect on image advancing, or a slide effect.

show_control_buttons - If multiple images are selected, this value (true or false) will determine whether the left and right arrow buttons for changing the image in the carousel are shown.

control_buttons_spacing - If multiple images are selected, and 'show_control_buttons' is set to true, this (percentage) will determine how far the left and right arrow buttons are placed from the edge. 0% means right at the edge with increasing values pushing the buttons towards the center.

Template: _zen_banner_base.liquid

The _zen_banner_base.liquid partial template is the base template which is used by the above both templates. It has no editor customizable fields and instead relies on various input variables. This allows all parameters (extensive list below) to be set. For normal use, please use the "_zen_banner_full.liquid" template. This is mainly intended for developers who are looking to use the banner without any user input, or with their own customized fields.

banner_type - Select between "Full Cover Image with Text", "Text with Image Side by Side", "Image Only", "Text Only". Ensure to enter the string exactly as shown.

image_height - Sets a CSS value of image height. Defaults to 75vh. Ideally set between 25vh and 100vh.

text_color - A bootstrap text class to set colour mode of text and buttons. Choose between "text-light" and "text-dark"

text_alignment - For settings where text content takes up all space (i.e. not the "Text with Image Side by Side" banner type), it sets the alignment of text. Choose between "Text on Left", "Text in Center", "Text on Right". Ensure to enter the string exactly as shown.

sidebyside_alignment_input - When banner type is selected as "Text with Image Side by Side", it determines whether to show the text content area on left or right of the image. Choose between "Text on Left", "Text on Right". Ensure to enter the string exactly as shown.

banner_autoplay - Set to true or false. It determines whether to autoplay images if multiple images are selected.

autoplay_interval - Sets the time interval in miliseconds after which the image automatically progresses if "banner_autoplay" is set to true and multiple images are selected.

show_overlay - Set to true or false. It determines whether to cast the overlay based on related inputs.

display_buttons - Set to true or false. It determines whether to display all buttons below the text content.

banner_buttons - A fieldset containing button information. It has three properties:

• button_style: Either of "Primary", "Secondary", "Primary Outline", or "Secondary Outline".
• button_text: The text shown on Button.
• button_link: A URL where Button points to.

text_content_type - If set to "Title", will automatically output Entity Title as Text, else it will set the content area to "banner_html".
    
banner_html - Main Content of the banner. It is a *REQUIRED* field if "banner_type" is anything other than "Image Only", and "text_content_type" is not "Title".

images - The list of images that will be displayed. It is a *REQUIRED* field if "banner_type" is anything other than "Text Only".

section_class - Bootstrap class added to the main section element, used mainly for specifiying a margin for spacing with the content that follows the banner.

overlay_bg_class - A bootstrap background class that is used for displaying the overlay. Choose from bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, or bg-white.

overlay_opacity - A value from 0 to 1 with 1 being no overlay, and 0 meaning a completely opaque overlay.

show_indicators - If multiple images are selected, this value (true or false) will determine whether bar indicators specifying the current and total slides in the carousel are shown.

show_control_buttons - If multiple images are selected, this value (true or false) will determine whether the left and right arrow buttons for changing the image in the carousel are shown.

show_fade_effect - If multiple images are selected, this value (true or false) will determine whether to display a fade crossover effect on image advancing, or a slide effect.

control_buttons_spacing - If multiple images are selected, and 'show_control_buttons' is set to true, this (percentage) will determine how far the left and right arrow buttons are placed from the edge. 0% means right at the edge with increasing values pushing the buttons towards the center.

bg_type - A select option containing different Background types. Either of "None", "Solid Primary Color", "Solid Secondary Color", "Solid Light Color", "Solid Dark Color", "Custom Color".
    
bg_custom_color - A hex color code for background color, if bg_type is set to "Custom Color".
    
text_custom_color - A hex color code for text color, if bg_type is set to "Custom Color".