Generic Banner

{% comment %}
	Displays a generic banner on any page

	Inputs:
		min_height: Sets the minimum height of the banner in px
		overlay_opacity: Sets the overlay opacity. The higher the darker. Options: 25, 50 or 75
		img_preset_banner_bg - The image preset to use for the banner image

	Custom Fields:
		genbanner_image
		genbanner_title - Optional. Defaults to entity.title

	Outputs:
		section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- id section_id = prefix:"Banner_Section_" -%}

<section id="{{section_id}}" class="text-bg-primary d-flex align-items-center position-relative px-3" style="min-height: {{min_height | default:"230px"}}">
	<div class="bg-dark position-absolute top-0 start-0 end-0 bottom-0 opacity-{{overlay_opacity | default:"75"}}"></div>
	<div class="container position-relative">
		<div class="row">
			<div class="col-lg-8">
				{%- var title = entity.genbanner_title | default: entity.title -%}
				{%- include '/common/_title.liquid' title_classname:'text-white text-uppercase mb-4 display-5 fw-bold' -%}
			</div>
		</div>
	</div>
</section>

{%- if entity.genbanner_image.is_valid -%}
	{%- add_stylesheet inline -%}
		#{{section_id}} {
			background-image: url("{% image_url = entity.genbanner_image preset:'webp' preset:img_preset_banner_bg %}");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	{%- end_stylesheet -%}
{%- endif -%}
{%- set section_rendered = true -%}

[
  {
    "Type": "group",
    "Fields": [
      {
        "Type": "image",
        "FieldID": "genbanner_image",
        "Label": "Image"
      },
      {
        "Type": "text",
        "FieldID": "genbanner_title",
        "Label": "Custom Banner Title (Optional)",
        "Subtext": "If left blank, the page title will be used instead"
      }
    ],
    "Label": "Banner"
  }
]