Skip to content

Commit

Permalink
GTSHOPIFY7 -Style hero banner section
Browse files Browse the repository at this point in the history
  • Loading branch information
@phapsidesGT
phapsidesGT committed Sep 6, 2024
1 parent f74cb4a commit 6592d74
Showing 1 changed file with 107 additions and 63 deletions.
170 changes: 107 additions & 63 deletions sections/hero-banner.liquid
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,155 @@
{{ 'section-hero-banner.css' | asset_url | stylesheet_tag }}

{%- style -%}
/* General styling for the hero banner */
/* Container for the hero banner */
#HeroBanner-{{ section.id }} {
position: relative;
width: 100%;
overflow: hidden;
}

/* Styles for images */
#HeroBanner-{{ section.id }} .hero-banner__image {
#HeroBanner-{{ section.id }}::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, {{ section.settings.image_overlay_opacity | divided_by: 100 }}); /* Image Overlay Opacity */
z-index: 1;
}

.hero-banner__media {
width: 100%;
height: auto;
display: block;
position: relative;
z-index: 0;
}

/* Styles for content positioning and visibility */
#HeroBanner-{{ section.id }} .hero-banner__content {
/* Content positioning */
.hero-banner__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
text-align: {{ section.settings.desktop_content_alignment }};
color: {{ section.settings.text_color }};
width: 100%;
padding: 0 20px;
}

/* Styles for buttons */
#HeroBanner-{{ section.id }} .hero-banner__buttons {
@media screen and (min-width: 750px) {
.hero-banner__content {
justify-content: {{ section.settings.desktop_content_position | replace: 'middle', 'center' }};
}
}

@media screen and (max-width: 749px) {
.hero-banner__content {
text-align: {{ section.settings.mobile_content_alignment }};
}
}

.hero-banner__heading {
margin: 0;
font-size: 2rem;
}

.hero-banner__paragraph {
margin: 10px 0;
}

.hero-banner__buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 10px;
}

#HeroBanner-{{ section.id }} .hero-banner__button {
.hero-banner__button {
padding: 10px 20px;
text-decoration: none;
color: {{ section.settings.button_text_color }};
background-color: {{ section.settings.button_bg_color }};
border: none;
cursor: pointer;
}
{%- endstyle -%}

<div id="HeroBanner-{{ section.id }}" class="hero-banner">
{%- comment -%} Hero Image Rendering {%- endcomment -%}
<picture>
{%- if section.settings.image_mobile != blank -%}
<source srcset="{{ section.settings.image_mobile | image_url }}" media="(max-width: 749px)">
{%- endif -%}
<img
src="{{ section.settings.image_desktop | image_url }}"
alt="{{ section.settings.alt_text }}"
class="hero-banner__image"
>
</picture>
.hero-banner__video {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}

{%- comment -%} Content Section {%- endcomment -%}
<div class="hero-banner__content">
{%- comment -%} Header {%- endcomment -%}
{%- if section.settings.header != blank -%}
<h1 class="hero-banner__heading">{{ section.settings.header }}</h1>
{%- endif -%}
@media screen and (max-width: 749px) {
.hero-banner__media {
content: url({{ section.settings.image_mobile | image_url | default: section.settings.image_desktop | image_url }});
}
}
{%- endstyle -%}

{%- comment -%} Paragraph {%- endcomment -%}
{%- if section.settings.paragraph != blank -%}
<p class="hero-banner__paragraph">{{ section.settings.paragraph }}</p>
{%- endif -%}
{% if section.settings.image_desktop != blank
or section.settings.image_mobile != blank
or section.settings.video_url != blank
%}
{% if section.settings.header != blank %}
<div id="HeroBanner-{{ section.id }}" class="hero-banner">
{% if section.settings.video_url != blank %}
<!-- Display video if a video URL is provided -->
<video class="hero-banner__video" autoplay muted loop playsinline>
<source src="{{ section.settings.video_url }}" type="video/mp4">
Your browser does not support the video tag.
</video>
{% else %}
<!-- Display image if no video is provided -->
<img
src="{{ section.settings.image_desktop | image_url | default: section.settings.image_mobile | image_url }}"
class="hero-banner__media"
alt="{{ section.settings.alt_text }}"
>

Check failure on line 112 in sections/hero-banner.liquid

View workflow job for this annotation

GitHub Actions / Theme Check Report

sections/hero-banner.liquid#L108-L112 

[ImgWidthAndHeight] Missing width and height attributes

Check warning on line 112 in sections/hero-banner.liquid

View workflow job for this annotation

GitHub Actions / Theme Check Report

sections/hero-banner.liquid#L108-L112 

[ImgLazyLoading] Use loading="eager" for images visible in the viewport on load and loading="lazy" for others
{% endif %}

{%- comment -%} Buttons {%- endcomment -%}
{%- if section.settings.button_text_1 != blank or section.settings.button_text_2 != blank -%}
<div class="hero-banner__buttons">
{%- if section.settings.button_text_1 != blank -%}
<a href="{{ section.settings.button_link_1 }}" class="hero-banner__button">
{{- section.settings.button_text_1 -}}
</a>
<div class="hero-banner__content">
{%- if section.settings.header != blank -%}
<h1 class="hero-banner__heading">{{ section.settings.header }}</h1>
{%- endif -%}
{%- if section.settings.button_text_2 != blank -%}
<a href="{{ section.settings.button_link_2 }}" class="hero-banner__button">
{{- section.settings.button_text_2 -}}
</a>

{%- if section.settings.paragraph != blank -%}
<p class="hero-banner__paragraph">{{ section.settings.paragraph }}</p>
{%- endif -%}

{%- if section.settings.button_text_1 != blank or section.settings.button_text_2 != blank -%}
<div class="hero-banner__buttons">
{%- if section.settings.button_text_1 != blank -%}
<a href="{{ section.settings.button_link_1 }}" class="hero-banner__button">
{{- section.settings.button_text_1 -}}
</a>
{%- endif -%}
{%- if section.settings.button_text_2 != blank -%}
<a href="{{ section.settings.button_link_2 }}" class="hero-banner__button">
{{- section.settings.button_text_2 -}}
</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</div>
{% endif %}
{% endif %}

{% schema %}

Check notice on line 143 in sections/hero-banner.liquid

View workflow job for this annotation

GitHub Actions / Theme Check Report

sections/hero-banner.liquid#L143 

[SchemaJsonFormat] JSON formatting could be improved
{
"name": "Hero Banner",
"settings": [
{
"type": "url",
"id": "video_url",
"label": "Video URL",
"info": "Upload your video to Shopify Files and paste the URL here (MP4 format is recommended)."
},
{
"type": "image_picker",
"id": "image_desktop",
Expand Down Expand Up @@ -258,12 +319,6 @@
"label": "Show Text Box",
"default": true
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"label": "Stack Images on Mobile",
"default": false
},
{
"type": "checkbox",
"id": "show_text_below",
Expand All @@ -281,17 +336,6 @@
"id": "heading",
"label": "Heading",
"default": "Hero Banner"
},
{
"type": "select",
"id": "heading_size",
"label": "Heading Size",
"default": "h1",
"options": [
{ "value": "h0", "label": "H0" },
{ "value": "h1", "label": "H1" },
{ "value": "h2", "label": "H2" }
]
}
]
},
Expand Down

0 comments on commit 6592d74

Please sign in to comment.