You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Shopify中在线编辑器设置的图片Alt文本存储位置咨询

Shopify图片Alt文本存储位置及问题排查

嘿,我来帮你搞清楚这个困惑!

首先明确一点:你在Shopify主题自定义编辑器里给区块图片设置的Image Alt Text,并不是存储在主题的任何代码文件里(包括config/settings_data.json,而是存在Shopify官方的后台数据库中,和你的店铺媒体库绑定在一起。

为什么你的Liquid代码没拿到Alt值?

你的代码{{ block.settings.image | img_url: '580x', scale: 2 | img_tag: block.settings.image.alt, 'lazyload transition-in' }}本身逻辑没问题,但拿不到值可能有这几个原因:

  • 区块设置未开启Alt自定义权限
    有些主题的区块schema配置里,没有给图片选择器开启允许设置Alt的选项。你需要检查对应区块的代码(比如sections/xxx.liquid或者snippets/xxx.liquid),看看图片设置的schema是否包含"enable_alt": true

    {% schema %}
    {
      "blocks": [
        {
          "type": "image_block",
          "name": "Image Block",
          "settings": [
            {
              "type": "image_picker",
              "id": "image",
              "label": "Upload Image",
              "enable_alt": true // 关键!没有这个的话,编辑器里设置的Alt不会被传递
            }
          ]
        }
      ]
    }
    {% endschema %}
    

    如果缺少"enable_alt": true,即使你在编辑器里设置了Alt文本,Shopify也不会把这个值传递给block.settings.image.alt

  • 设置未正确保存
    有时候在编辑器里设置完Alt后,可能忘记点击右上角的「保存」按钮,导致设置没有同步到后台。可以重新进入对应区块,确认Alt文本已填写,再保存一次试试。

  • 临时调试确认
    你可以在Liquid代码里临时添加一行{{ block.settings.image | inspect }},刷新页面后查看输出的内容——这里会显示图片对象的所有属性,如果里面有alt字段且值正确,那就是img_tag的使用没问题;如果没有alt字段,那就是上面两个原因导致的。

补充说明

当你在主题编辑器里给区块图片设置Alt时,这个值会覆盖媒体库中该图片本身的Alt文本。也就是说,block.settings.image.alt优先读取你在区块里自定义的Alt,没有的话才会用媒体库中图片的原始Alt。

内容的提问来源于stack exchange,提问作者Vishal

火山引擎 最新活动