Janexx
Janexx

Reputation: 31

HTML/Liquid Code isn't showing all objects?

The image and image_caption are not shown when I try to use this, heading and text_on_image work just fine Color changing also doesnt work like this Been looking for the errors for a while now but I just can't fix it

{% schema %}
{
    "schema_name": "ST-sample",
    "css_class": "ST-sample",
    "tag": "div",
    "settings": [
    {
        "name": "content",
        "label": "Inhalte",
        "kind": "heading"
    },
    {
        "name": "section_heading",
        "label": "Überschrift",
        "kind": "textarea"
    },
    {
        "name": "section_image",
        "label": "Bild",
        "kind": "image"
    },
    {
        "name": "text_on_image",
        "label": "Text auf Bild",
        "kind": "text"
    },
    {
        "name": "link_on_image",
        "label": "Link auf Bild",
        "kind": "link"
    },
    {
        "name": "image_caption",
        "label": "Bildunterschrift",
        "kind": "rich_text"
    },
    
    {
        "name": "design",
        "label": "Design",
        "kind": "heading"
    },
    {
        "name": "heading_font_color",
        "label": "Schriftfarbe Überschrift",
        "kind": "color"
    },
    {
        "name": "text_on_image_font_color",
        "label": "Schriftfarbe Bildtext",
        "kind": "color"
    },
    {
        "name": "image_caption_font_color",
        "label": "Schriftfarbe Bildunterschrift",
        "kind": "color"
    },
    {
        "name": "section_background_color",
        "label": "Sektionshintergrundfarbe",
        "kind": "color"
    },
    {
        "name": "image_width",
        "label": "Bildbreite",
        "kind": "select",
        "options":[
        {
            "name": "col_4",
            "label": "Stufe 1",
            "value": "col-4"
        },
        {
            "name": "col_6",
            "label": "Stufe 2",
            "value": "col-6"
        },
        {
            "name": "col_8",
            "label": "Stufe 3",
            "value": "col-8"
        },
        {
            "name": "col_10",
            "label": "Stufe 4",
            "value": "col-10"
        },
        {
            "name": "col_12",
            "label": "Stufe 5",
            "value": "col-12"
        }]
    }]
}
{% endschema %}

{%- comment -%} Content variables {%- endcomment -%}
{%- assign section_heading = section.settings.section_heading -%}
{%- assign section_image = section.setting.section_image -%}
{%- assign text_on_image = section.settings.text_on_image -%}
{%- assign link_on_image = section.settings.link_on_image -%}
{%- assign image_caption = section.settings.image_caption -%}

{%- comment -%} Design variables {%- endcomment -%}
{%- assign heading_font_color = section.settings.heading_font_color -%}
{%- assign text_on_image_font_color = section.settings.text_on_image_font_color -%}
{%- if text_on_image_font_color == nil -%}
    {%- assign text_on_image_font_color = "255,255,255" -%}
{%- endif -%}
{%- assign image_caption_font_color = section.settings.image_caption_font_color -%}
{%- assign section_background_color = section.settings.background_color -%}
{%- if section_background_color == nil -%}
    {%- assign section_background_color = "255,255,255" -%}
{%- endif -%}
{%- capture section_background_style -%}
    background-color: {{section_background_color}};
{%- endcapture -%}
{%- assign image_width = section.settings.image_width -%}
{%- if image_width == nil -%}
    {%- assign image_width = "col-6" -%}
{%- endif -%}

{%- comment -%}
  HTML
{%- endcomment -%}
<style>
    [h2]{
        color: {{heading_font_color}};
    }

    .img{
        position: relative;
    }

    .txt_on_img{
        position: absolute;
        color: {{text_on_image_font_color}};
    }

    .img_cap{
        color: {{image_caption_font_color}};
    }

    .ST-sample{
        {{section_background_style}}
    }
</style>

<div class="ST-sample">
    <div class="container-md">
        <div class="row">
            <div class="col-12 text-center">
                {%- if section_heading -%}
                <h2>{{ section_heading }}</h2>
                {%- endif -%}
            </div>
        </div>
        
        {%- if section_image or text_on_image -%}
        <div class="row justify-content-center">
            <div class="{{image_width}}">
                <div class="img">
                    {%- if header_image -%}
                <a href="{{link_on_image.url}}" title="{{link_on_image.title}}">
                    <img 
                    alt="{{section_image.alt}}" 
                    src="{{section_image.fallback}}" 
                    sizes="auto" 
                    srcset="{{section_image.srcset}}"
                    >
                </a>
                {%- endif -%}
                </div>
                <div class="txt_on_img"; >
                    {{text_on_image}}
                </div>
            </div>
        </div>
        {%- endif -%}
        {%- if image_caption -%}
        <div class="row justify-content-center">
            <div class="{{image_width}} img_cap">
                {{image_caption}}
            </div>
        </div>
        {%- endif -%}
    </div>
</div>

I tried looking for th errors and changing this and that but it never shows what it should

Upvotes: 1

Views: 41

Answers (0)

Related Questions