Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TH-1: Customize the display of the slider image on mobile/desktop screen #45

Merged
merged 4 commits into from
Sep 3, 2024
+146 −87
Merged

TH-1: Customize the display of the slider image on mobile/desktop screen #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d63d6ed
setup desktop and mobile image
bj-anas Sep 3, 2024
4052e32
harmony: add mobile slider image
bj-anas Sep 3, 2024
32e385f
meraki: add mobile slider image
bj-anas Sep 3, 2024
d5e8bd9
request change
bj-anas Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions themes/aura/sections/desktop-slider.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
.section-slider-{{ id }} #yc_slider_{{ id }} .splide__arrow {
--slider-height: {{- section.settings.slider_height_percentage -}}vh;
}

.section-slider-{{ id }} #yc_slider_{{ id }} .splide__arrow {
background: {{ section.settings.slider_desktop_arrows_background_color.hex }} !important;
width: 54px;
Expand Down Expand Up @@ -271,9 +271,15 @@
{
"type": "image_picker",
"id": "image",
"label": "Image",
"label": "🖥 Desktop Image",
"info": "To ensure your images look great and load quickly, use a size of \"1920px x 1080px\" (16:9 aspect ratio)."
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "📱 Mobile Image",
"info": "To ensure your images look great and load quickly, use a size of \"500 x 500px\" (1:1 aspect ratio)."
},
{
"type": "richtext",
"id": "caption",
Expand Down
46 changes: 29 additions & 17 deletions themes/aura/snippets/slider.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,38 @@
margin-top: 1rem;
}

{% for block in blocks %}
#yc_slider_{{ id }} .btn-{{ forloop.index }} {
{% if block.settings.button_font_weight %}
font-weight: {{ block.settings.button_font_weight }};
{% endif %}
{% if block.settings.button_bg_color %}
background-color: {{ block.settings.button_bg_color.hex }} !important;
{% endif %}
{% if block.settings.button_color %}
color: {{ block.settings.button_color.hex }} !important;
{% endif %}
}
{% endfor %}
</style>
{% for block in blocks %}
#yc_slider_{{ id }} .btn-{{ forloop.index }} {
{% if block.settings.button_font_weight %}
font-weight: {{ block.settings.button_font_weight }};
{% endif %}
{% if block.settings.button_bg_color %}
background-color: {{ block.settings.button_bg_color.hex }} !important;
{% endif %}
{% if block.settings.button_color %}
color: {{ block.settings.button_color.hex }} !important;
{% endif %}
}

#yc_slider_{{ id }} .hero-image-{{ forloop.index }} {
background: center center / cover no-repeat url('{%- if block.settings.image.src -%} {{ block.settings.image.src }} {%- else -%} {{ 'hero.png' | asset_url }} {%- endif -%}');
}

{%- if block.settings.mobile_image.src -%}
@media screen and (max-width: 768px) {
#yc_slider_{{ id }} .hero-image-{{ forloop.index }} {
background: center center / cover no-repeat url('{{ block.settings.mobile_image.src }}');
}
}
{%- endif -%}
{% endfor %}
</style>

<div
class='splide yc-slider__{{ view }}'
id='yc_slider_{{ id }}'
style="
--desktop-height: '{{ section.settings.slider_height_percentage }}vh';
--desktop-height: '{{ section.settings.slider_height_percentage }}vh';
--mobile-height: '{{ section.settings.slider_mobile_height_percentage }}vh';
"
>
Expand All @@ -44,8 +56,8 @@
{%- for block in blocks %}
{% assign count = count | plus: 1 %}
<li
class='splide__slide'
style="width: 100%; background: center center / cover no-repeat url('{%- if block.settings.image.src -%} {{ block.settings.image.src }} {%- else -%} {{ 'hero.png' | asset_url }} {%- endif -%}')"
class='splide__slide hero-image-{{ forloop.index }}'
style="width: 100%;"
{{ block.youcan_attributes }}
>
{%- if block.settings.caption %}
Expand Down
8 changes: 5 additions & 3 deletions themes/harmony/assets/desktop-slider.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
.splide{
height:var(--mobile-height);
}
@media (min-width: 768px){
.splide{
height:var(--desktop-height);
}
}
.splide .splide__arrow{
margin:0 100px;
}
Expand All @@ -23,9 +28,6 @@
display:none;
}
@media (min-width: 768px){
.splide{
height:var(--desktop-height);
}
.yc-slider__desktop{
display:block;
}
Expand Down
8 changes: 7 additions & 1 deletion themes/harmony/sections/desktop-slider.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,9 +261,15 @@
{
"type": "image_picker",
"id": "image",
"label": "Image",
"label": "🖥 Desktop Image",
"info": "To ensure your images look great and load quickly, use a size of \"1920px x 1080px\" (16:9 aspect ratio)."
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "📱 Mobile Image",
"info": "To ensure your images look great and load quickly, use a size of \"500 x 500px\" (1:1 aspect ratio)."
},
{
"type": "richtext",
"id": "caption",
Expand Down
74 changes: 43 additions & 31 deletions themes/harmony/snippets/slider.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,56 @@
{% assign count = 0 %}

<style>
.slide-box {
-webkit-justify-content: flex-end;
align-items: flex-end;
-webkit-align-items: flex-end;
}

.slide-content-box {
padding: 80px 20px;
}
.slide-box {
-webkit-justify-content: flex-end;
align-items: flex-end;
-webkit-align-items: flex-end;
}

.slide-content-box-button {
margin-top: calc(var(--slider-height) / 5);
width: max-content;
padding: 12px 42px;
border-color: transparent !important;
margin-top: 1rem;
}
.slide-content-box {
padding: 80px 20px;
}

{% for block in blocks %}
#yc_slider_{{ id }} .btn-{{ forloop.index }} {
{% if block.settings.button_font_weight %}
font-weight: {{ block.settings.button_font_weight }};
{% endif %}
{% if block.settings.button_bg_color %}
background-color: {{ block.settings.button_bg_color.hex }} !important;
{% endif %}
{% if block.settings.button_color %}
color: {{ block.settings.button_color.hex }} !important;
{% endif %}
.slide-content-box-button {
margin-top: calc(var(--slider-height) / 5);
width: max-content;
padding: 12px 42px;
border-color: transparent !important;
margin-top: 1rem;
}
{% endfor %}

{% for block in blocks %}
#yc_slider_{{ id }} .btn-{{ forloop.index }} {
{% if block.settings.button_font_weight %}
font-weight: {{ block.settings.button_font_weight }};
{% endif %}
{% if block.settings.button_bg_color %}
background-color: {{ block.settings.button_bg_color.hex }} !important;
{% endif %}
{% if block.settings.button_color %}
color: {{ block.settings.button_color.hex }} !important;
{% endif %}
}

#yc_slider_{{ id }} .hero-image-{{ forloop.index }} {
background: center center / cover no-repeat url('{%- if block.settings.image.src -%} {{ block.settings.image.src }} {%- else -%} {{ 'hero.png' | asset_url }} {%- endif -%}');
}

{%- if block.settings.mobile_image.src -%}
@media screen and (max-width: 768px) {
#yc_slider_{{ id }} .hero-image-{{ forloop.index }} {
background: center center / cover no-repeat url('{{ block.settings.mobile_image.src }}');
}
}
{%- endif -%}
{% endfor %}
</style>

<div
class='splide yc-slider__{{ view }}'
id='yc_slider_{{ id }}'
style="
--desktop-height: '{{ section.settings.slider_height_percentage }}vh';
--desktop-height: '{{ section.settings.slider_height_percentage }}vh';
--mobile-height: '{{ section.settings.slider_mobile_height_percentage }}vh';
"
>
Expand All @@ -47,8 +59,8 @@
{%- for block in blocks %}
{% assign count = count | plus: 1 %}
<li
class='splide__slide'
style="width: 100%; background: center center / cover no-repeat url('{%- if block.settings.image.src -%} {{ block.settings.image.src }} {%- else -%} {{ 'hero.png' | asset_url }} {%- endif -%}')"
class='splide__slide hero-image-{{ forloop.index }}'
style="width: 100%;"
{{ block.youcan_attributes }}
>
{%- if block.settings.caption %}
Expand Down
9 changes: 6 additions & 3 deletions themes/meraki/assets/desktop-slider.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
.splide{
height:var(--mobile-height);
}
@media (min-width: 768px){
.splide{
height:var(--desktop-height);
}
}

.slider-container{
max-width:1440px;
margin:0 auto;
Expand All @@ -25,9 +31,6 @@
display:none;
}
@media (min-width: 768px){
.splide{
height:var(--desktop-height);
}
.yc-slider__desktop{
display:block;
}
Expand Down
0 themes/meraki/assets/default-hero.png → themes/meraki/assets/hero.png
View file
Open in desktop
File renamed without changes
8 changes: 7 additions & 1 deletion themes/meraki/sections/desktop-slider.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,9 +287,15 @@
{
"type": "image_picker",
"id": "image",
"label": "Image",
"label": "🖥 Desktop Image",
"info": "To ensure your images look great and load quickly, use a size of \"1920px x 1080px\" (16:9 aspect ratio)."
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "📱 Mobile Image",
"info": "To ensure your images look great and load quickly, use a size of \"500 x 500px\" (1:1 aspect ratio)."
},
bj-anas marked this conversation as resolved.
Show resolved Hide resolved
{
"type": "richtext",
"id": "caption",
Expand Down
70 changes: 41 additions & 29 deletions themes/meraki/snippets/slider.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,54 @@
{% assign count = 0 %}

<style>
.slide-box {
-webkit-justify-content: flex-end;
align-items: flex-end;
-webkit-align-items: flex-end;
}

.slide-content-box {
padding: 80px 20px;
}
.slide-box {
-webkit-justify-content: flex-end;
align-items: flex-end;
-webkit-align-items: flex-end;
}

.slide-content-box-button {
margin-top: calc(var(--slider-height) / 5);
width: max-content;
padding: 12px 42px;
}
.slide-content-box {
padding: 80px 20px;
}

{% for block in blocks %}
#yc_slider_{{ id }} .btn-{{ forloop.index }} {
{% if block.settings.button_font_weight %}
font-weight: {{ block.settings.button_font_weight }} !important;
{% endif %}
{% if block.settings.button_bg_color %}
background-color: {{ block.settings.button_bg_color.hex }} !important;
{% endif %}
{% if block.settings.button_color %}
color: {{ block.settings.button_color.hex }} !important;
{% endif %}
.slide-content-box-button {
margin-top: calc(var(--slider-height) / 5);
width: max-content;
padding: 12px 42px;
}
{% endfor %}

{% for block in blocks %}
#yc_slider_{{ id }} .btn-{{ forloop.index }} {
{% if block.settings.button_font_weight %}
font-weight: {{ block.settings.button_font_weight }};
{% endif %}
{% if block.settings.button_bg_color %}
background-color: {{ block.settings.button_bg_color.hex }} !important;
{% endif %}
{% if block.settings.button_color %}
color: {{ block.settings.button_color.hex }} !important;
{% endif %}
}

#yc_slider_{{ id }} .hero-image-{{ forloop.index }} {
background: center center / cover no-repeat url('{%- if block.settings.image.src -%} {{ block.settings.image.src }} {%- else -%} {{ 'hero.png' | asset_url }} {%- endif -%}');
}

{%- if block.settings.mobile_image.src -%}
@media screen and (max-width: 768px) {
#yc_slider_{{ id }} .hero-image-{{ forloop.index }} {
background: center center / cover no-repeat url('{{ block.settings.mobile_image.src }}');
}
}
{%- endif -%}
{% endfor %}
</style>

<div
class='splide yc-slider__{{ view }}'
id='yc_slider_{{ id }}'
style="
--desktop-height: '{{ section.settings.slider_height_percentage }}vh';
--desktop-height: '{{ section.settings.slider_height_percentage }}vh';
--mobile-height: '{{ section.settings.slider_mobile_height_percentage }}vh';
"
>
Expand All @@ -45,8 +57,8 @@
{%- for block in blocks %}
{% assign count = count | plus: 1 %}
<li
class='splide__slide'
style="width: 100%; background: center center / cover no-repeat url('{%- if block.settings.image.src -%} {{ block.settings.image.src }} {%- else -%} {{ 'default-hero.png' | asset_url }} {%- endif -%}')"
class='splide__slide hero-image-{{ forloop.index }}'
style="width: 100%;"
{{ block.youcan_attributes }}
>
{%- if block.settings.caption %}
Expand Down