HTML/Liquid Code isn't showing all objects? - html

Question

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