Solved

Hide a custom section when there is no data added

RH-Collective
New Member
5 0 0

in Dawn theme I added a section Kava-image-Lily-02. Works fine. but when no data is added (text or images) the section does not hide.

I would like to adjust the code to make the section hide when there is no data added.

Can anyone help?

Code:
----------------------------------------------------------

{% assign sec_id = section.id | slice: -8, 8 | replace: "-", "_" %}

{%- style -%}

img {
max-width: 100%;
height: auto;
}

.pw-container,
.pw-container-fluid {
width: 100%;
padding-right: var(--pw-gutter-x, 15px);
padding-left: var(--pw-gutter-x, 15px);
margin-right: auto;
margin-left: auto;
}

@media (min-width: 576px) {
.pw-container {
max-width: 540px;
}
}

@media (min-width: 750px) {
.pw-container {
max-width: 720px;
}
}

@media (min-width: 992px) {
.pw-container {
max-width: 960px;
}
{% if section.settings.container_max_width >= 720 and section.settings.container_max_width <= 960 %}
.pw-section__{{sec_id}} .pw-container {
max-width: {{section.settings.container_max_width}}px;
}
{% endif %}
}

@media (min-width: 1200px) {
.pw-container {
max-width: 1140px;
}
{% if section.settings.container_max_width >= 720 and section.settings.container_max_width <= 1140 %}
.pw-section__{{sec_id}} .pw-container {
max-width: {{section.settings.container_max_width}}px;
}
{% endif %}
}

@media (min-width: 1400px) {
.pw-container {
max-width: 1320px;
}
{% if section.settings.container_max_width >= 720 and section.settings.container_max_width != 1320 %}
.pw-section__{{sec_id}} .pw-container {
max-width: {{section.settings.container_max_width}}px;
}
{% endif %}
}

.pw-container,
.pw-container-fluid {
padding-right: var(--pw-gutter-x, 15px);
padding-left: var(--pw-gutter-x, 15px);
}

.pw-section__{{sec_id}} {
--pw-gutter-x: 25px;
padding-top: {{section.settings.section_padding_top}}px;
padding-bottom: {{section.settings.section_padding_bottom}}px;
position: relative;
line-height: 1.5;
}

{% if section.settings.is_fullwidth == true %}
.pw-section__{{sec_id}} .pw-container-fluid {
padding-left: 0;
padding-right: 0;
}
{% endif %}


.pw-section__{{sec_id}} .pw-img-wrapper {
position: relative;
min-height: {{section.settings.img_min_height}}vh;
}

.pw-section__{{sec_id}} .pw-img-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-position: {{section.settings.background_position_x}}% {{section.settings.background_position_y}}%;
}

.pw-section__{{sec_id}} .pw-img-text {
padding: 10px 15px;
background-color: rgba(0,0,0,0.7);
color: #fff;
font-size: var(--id-fz);
display: inline-block;
position: absolute;
left: 5%;
max-width: 90%;
bottom: 50px;
z-index: 1;
}

@media only screen and (max-width: 749px) {
.pw-section__{{sec_id}} .pw-img-wrapper {
position: relative;
min-height: {{section.settings.img_min_height_mobile}}vh;
}
.pw-section__{{sec_id}} .pw-img-wrapper img {
object-position: {{section.settings.background_position_x_mobile}}% {{section.settings.background_position_y_mobile}}%;
}
.pw-section__{{sec_id}} .pw-img-text {
font-size: 18px;
bottom: 30px;
}
}

{%- endstyle -%}

{% if section.settings.custom_css != blank %}
{%- style -%}
{{section.settings.custom_css}}
{%- endstyle -%}
{% endif %}

{% if section.settings.is_fullwidth == true %}
{% assign container = 'pw-container-fluid' %}
{% else %}
{% assign container = 'pw-container' %}
{% endif %}

<div class="pw-section__{{sec_id}}">
<div class="{{container}}">
<div class="pw-img-wrapper">
{% if section.settings.background_image == blank %}
<img src="https://cdn.shopify.com/s/files/1/0560/8249/7605/files/image-lily-02.jpg" loading="lazy" sizes="100vw"/>
{% else %}
<img srcset="
{%- if section.settings.background_image.width >= 320 -%}{{ section.settings.background_image | img_url: '320x' }} 320w,{%- endif -%}
{%- if section.settings.background_image.width >= 750 -%}{{ section.settings.background_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.background_image.width >= 1500 -%}{{ section.settings.background_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.background_image.width >= 2000 -%}{{ section.settings.background_image | img_url: '2000x' }} 2000w,{%- endif -%}"
src="{{ section.settings.background_image | img_url: '1500x' }}"
alt="{{ section.settings.background_image.alt | escape }}"
sizes="100vw"
loading="lazy"
>
{% endif %}
{% if section.settings.image_description != blank %}
<div class="pw-img-text" style="--id-fz: {{ section.settings.image_description_fz }}px;">{{ section.settings.image_description }}</div>
{% endif %}
</div>
</div>
</div>


{% schema %}

{
"name": "[Kava] Image-Lily-02",
"tag": "section",
"class": "kava-image kava-image-lily-02",
"settings": [
{
"type": "header",
"content": "Main settings"
},
{
"type": "checkbox",
"id": "is_fullwidth",
"default": true,
"label": "Full width section",
"info": "Overrides сontent width limit"
},
{
"type": "image_picker",
"id": "background_image",
"label": "Image"
},
{
"type": "textarea",
"id": "image_description",
"label": "Image description",
"default": "Beautiful sunsets for real advanturers"
},
{
"type": "range",
"id": "image_description_fz",
"min": 10,
"max": 30,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 24
},
{
"type": "header",
"content": "Desktop"
},
{
"type": "range",
"id": "section_padding_top",
"min": 0,
"max": 200,
"step": 10,
"unit": "px",
"label": "Section padding-top",
"default": 0
},
{
"type": "range",
"id": "section_padding_bottom",
"min": 0,
"max": 200,
"step": 10,
"unit": "px",
"label": "Section padding-bottom",
"default": 0
},
{
"type": "range",
"id": "img_min_height",
"min": 0,
"max": 100,
"step": 10,
"unit": "vh",
"label": "Image min height",
"default": 100
},
{
"type": "range",
"id": "background_position_x",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Image background position X",
"default": 50
},
{
"type": "range",
"id": "background_position_y",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Image background position Y",
"default": 50
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "range",
"id": "section_padding_top_mobile",
"min": 0,
"max": 300,
"step": 10,
"unit": "px",
"label": "Section padding-top",
"default": 0
},
{
"type": "range",
"id": "section_padding_bottom_mobile",
"min": 0,
"max": 300,
"step": 10,
"unit": "px",
"label": "Section padding-bottom",
"default": 0
},
{
"type": "range",
"id": "img_min_height_mobile",
"min": 0,
"max": 100,
"step": 10,
"unit": "vh",
"label": "Image min height",
"default": 100
},
{
"type": "range",
"id": "background_position_x_mobile",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Image background position X mobile",
"default": 50
},
{
"type": "range",
"id": "background_position_y_mobile",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Image background position Y mobile",
"default": 50
},
{
"type": "header",
"content": "Customization"
},
{
"type": "number",
"id": "container_max_width",
"label": "Content width limit (px)",
"default": 1320
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS"
}
],
"presets": [
{
"name": "[Kava] Image-Lily-02",
"settings": {
"is_fullwidth": false,
"section_padding_top": 50,
"section_padding_bottom": 50,
"image_description": ""
}
}
]
}

{% endschema %}

Accepted Solution (1)

SB_90
Shopify Partner
216 52 68

This is an accepted solution.

I'd suggest immediately after the section ID is assigned, you wrap everything else in if condition that checks for either background_image or image_description:

 

{% assign sec_id = section.id | slice: -8, 8 | replace: "-", "_" %}
{% if section.settings.image_description != "" or section.settings.background_image %}
	ALL EXISTING CODE GOES HERE
{% endif %}
{% schema %}
.....


That will ensure the entirety of that section is only rendered when either an image description or a background image is set.

View solution in original post

Replies 4 (4)

SB_90
Shopify Partner
216 52 68

This is an accepted solution.

I'd suggest immediately after the section ID is assigned, you wrap everything else in if condition that checks for either background_image or image_description:

 

{% assign sec_id = section.id | slice: -8, 8 | replace: "-", "_" %}
{% if section.settings.image_description != "" or section.settings.background_image %}
	ALL EXISTING CODE GOES HERE
{% endif %}
{% schema %}
.....


That will ensure the entirety of that section is only rendered when either an image description or a background image is set.

RH-Collective
New Member
5 0 0

Many Thanks. This works for me. Great help!

HighburyDave
Visitor
3 0 0

Please could you show me where on my theme code I would add this? 

RH-Collective
New Member
5 0 0

Adjust code of your theme
in "Sections" find KAVA.
Then do as said above.

Does this help?