Hero Section
Last updated
Last updated
The Hero Section Block is used to display a "hero" section on a web page, which is typically a full-width header area with a background image, text content, and optional buttons.
The code first sets two variables, heroImage and heroImageAlt, to empty strings. These variables will be used to store the URL and alternate text of the hero image respectively.
A series of if statements determine the source of the hero image based on the value of the section.image_type variable. The possible values of section.image_type are "media_library", "product_category_image", and "blog_category_image".
If section.image_type is "media_library", the hero image URL is set to section.image, and the alternate text is set to section.image_description.
If section.image_type is "product_category_image", the hero image URL is set to section.product_category.image, and the alternate text is set to section.product_category.title. The code also checks if section.product_category.image has a length, as this means that an image has been set for the product category.
If section.image_type is "blog_category_image", the hero image URL is set to section.blog_category.image, and the alternate text is set to section.blog_category.title. The code also checks if section.blog_category.image has a length, as this means that an image has been set for the blog category.
After determining the source of the hero image, the code then outputs the HTML for the hero section. The section is a header element (or any other HTML tag specified in section.html_tag) with a number of CSS classes applied in the fields. The section also includes a div with the content of the hero section (specified in section.content), and optional buttons (if section.buttons has a length).
Finally, the code outputs the hero image if heroImage has a length. The image is a full-width img element with the src attribute set to heroImage|media|resize(1920), which is the hero image resized to a width of 1920 pixels. The alternate text for the image is set to heroImageAlt.
The following files are used to display this content
blueprint file included in the file
blueprint file
partial file