当我尝试使用这个时,image和image_ception不会显示,heading和text_on_image工作很好。颜色更改也不起作用。我已经找了一段时间的错误,但我无法修复

{% 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>

我试着寻找错误并改变这个和那个,但它从来没有显示出它应该做什么

HTML/液体代码是';t显示所有对象?的更多相关文章

  1. css绝对定位如何在不同分辨率下的电脑正常显示定位位置?(一定要看!)

    这篇文章主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置,本文首先解释了常见的电脑分辨率,为了页面在不同的分辨率下正常显示,要给页面一个安全宽度,再去使用绝对定位,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

  2. 详解HTML5中CSS外观属性

    这篇文章主要介绍了HTML5中CSS外观属性的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下

  3. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果,就是CSS动画样式处理,动画声明需要使用@keyframes name,后面的name是人为定义的动画名称,下面我们来看看文章的具体实现内容吧,需要的小伙伴可以参考一下

  4. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. Html5自定义字体解决方法

    这篇文章主要介绍了Html5自定义字体解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    这篇文章主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)

    这篇文章主要介绍了CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号),通过css代码定义将数字多级列表展示出来,,需要的朋友可以参考下

  8. CSS position属性和实例应用演示

    这篇文章主要介绍了CSS position属性和实例应用演示,absolute(绝对定位),relative(相对定位),relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下

  9. HTML5 图片悬停放大的实现代码示例

    这篇文章主要介绍了HTML5 图片悬停放大的实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  10. amazeui页面分析之登录页面的示例代码

    这篇文章主要介绍了amazeui页面分析之登录页面的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. 如何扩展ATmega324PB微控制器的以下宏寄存器?

    我目前正在学习嵌入式,我有以下练习:展开以下宏寄存器:如果有人解决了这个问题,我将不胜感激,以便将来参考

  2. Python将ONNX运行时设置为返回张量而不是numpy数组

    在python中,我正在加载预定义的模型:然后我加载一些数据并运行它:到目前为止,它仍在正常工作,但我希望它默认返回Tensor列表,而不是numpy数组。我对ONNX和PyTorch都是新手,我觉得这是我在这里缺少的基本内容。这将使转换中的一些开销相同。

  3. 在macOS上的终端中使用Shell查找文件中的单词

    我有一个文本文件,其中有一行:我需要找到ID并将其提取到变量中。我想出了一个RexEx模式:但它似乎对我尝试过的任何东西都不起作用:grep、sed——不管怎样。我的一个尝试是:我为这样一个看似愚蠢的问题感到抱歉,但我在互联网上找不到任何东西:我在SO和SE上读了几十个类似的问题,并在谷歌上搜索了几个教程,但仍然无法找到答案。欢迎提供任何指导!

  4. react-chartjs-2甜甜圈图中只有标题未更新

    我正在使用react-chartjs-2在我的网站中实现甜甜圈图。下面是我用来呈现图表的代码。我将甜甜圈图的详细信息从父组件传递到子组件,所有道具都正确传递。当我在beforeDraw函数外部记录props.title时,它会记录正确的值,但当我在beforeDraw函数内部记录props.title时,它将记录标题的前一个值,从而呈现标题的前值。我在这里做错了什么?

  5. 如何在tkinter中使用Python生成器函数?

    生成器函数承诺使某些代码更易于编写。但我并不总是知道如何使用它们。假设我有一个斐波那契生成器函数fib(),我想要一个显示第一个结果的tkinter应用程序。当我点击“下一步”按钮时,它会显示第二个数字,依此类推。我如何构建应用程序来实现这一点?我可能需要在线程中运行生成器。但如何将其连接回GUI?

  6. 如何为每次提交将存储库历史记录拆分为一行?

    我正在尝试获取存储库的历史记录,但结果仅以单行文本的形式返回给我。

  7. 尝试在颤振项目上初始化Firebase时出错

    当尝试在我的颤振项目上初始化firebase时,我收到了这个错误有人知道我能做什么吗?应用程序分级Gradle插件Gradle项目颤振相关性我已经将firebase设置为Google文档已经在另一个模拟器上尝试过,已经尝试过创建一个全新的模拟器,已经在不同的设备上尝试过了,已经尝试了特定版本的firebase,已经尝试添加但没有任何效果,已经在youtube上看到了关于它的每一个视频,该应用程序在android和iOS两个平台上都抛出了这个错误

  8. 在unix中基于当前日期添加新列

    我试图在unix中基于时间戳列在最后一个单元格中添加一个状态列。我不确定如何继续。

  9. 麦克斯·蒙特利。我一直得到UncaughtReferenceError:当我在终端中写入node-v时,节点未定义

    如果这是您应该知道的,请确认:我已将所有shell更改为默认为zsh。当我在终端中写入node-v时,我一直收到“UncaughtReferenceError:nodeisnotdefined”。但它显示节点已安装。我是个新手,在这方面经验不足。

  10. 如何在前端单击按钮时调用后端中的函数?

    那么如何在后端添加一个新的端点,点击按钮调用这个函数。

返回
顶部