Liquid代码异常：图片、图片标题不显示且颜色功能失效求助

问题症状 #

section_heading和text_on_image可正常显示，但section_image与image_caption无法展示，颜色配置功能也未生效。

错误原因与修正点 #

1. section_image变量赋值错误
   原代码中写成了section.setting.section_image，正确应为section.settings.section_image（注意settings是复数）；同时图片渲染的判断条件误用了不存在的header_image，需改为section_image。

2. 背景色变量匹配错误
   schema中定义的背景色字段名为section_background_color，但变量赋值时写成了section.settings.background_color，导致无法读取配置值。

3. CSS选择器错误
   原代码中用[h2]作为选择器，这是属性选择器，无法匹配h2标签，需改为直接使用h2标签选择器。

4. HTML语法错误
   .txt_on_img的div标签中多了一个多余的分号，导致样式无法正常应用。

5. 颜色值格式不统一
   Shopify颜色设置返回十六进制值（如#ffffff），但原代码默认值用了RGB字符串，需统一为十六进制格式。

修正后的完整代码 #

{% 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.settings.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 = "#ffffff" -%}
{%- endif -%}
{%- assign image_caption_font_color = section.settings.image_caption_font_color -%}
{%- assign section_background_color = section.settings.section_background_color -%}
{%- if section_background_color == nil -%}
    {%- assign section_background_color = "#ffffff" -%}
{%- 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 section_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>

内容的提问来源于stack exchange，提问作者Janexx