如何使用液体添加图像到shopify？答案

【问题标题】：How to add an image to shopify using liquid?如何使用液体添加图像到shopify？
【发布时间】：2014-07-29 02:10:26
【问题描述】：

我是新手，与 PHP 不同，几乎没有任何关于 Liquid 的教程。

这就是我想要做的。

在页面上创建一个简单的框，并能够从主题设置区域将图像上传到该框。

我将如何继续这样做？

【问题讨论】：

标签： image upload add shopify liquid

【解决方案1】：

请参阅 settings.html 上的 Shopify wiki 页面：

settings.html 文件呈现在 Shopify 后台的主题设置页面上。

要在主题设置中上传图片，您需要File Upload input type：

文件上传
用于将资产上传到主题，例如徽标图像、网站图标和幻灯片图像...
<tr>
    <th>
        <label for="my_file">File Upload</label>
    </th>
    <td>
        <input type="file" name="logo.png" data-max-width="500" data-max-height="300" />
    </td>
</tr>
通过settings.html 上传的文件被放置在主题的assets 文件夹中。保存文件的名称不是由原始文件决定的，而是由文件输入标签的name 属性决定的。例如，通过上述示例上传的文件将保存为 logo.png。此外，Shopify 会将图像转换为 name 属性中指定的类型。

然后您可以像通常访问资产一样通过 Liquid 访问上传的文件。例如：

  <a id="logo" href="/" role="banner">
    {{ 'logo.png' | asset_url | img_tag: shop.name }}
  </a>

【讨论】：

那太好了。有用。介意我问你如何在 settings.html 中添加删除按钮来删除上传的图像？
嗯，我不知道你是否可以从主题设置中删除上传的图像（它存储在资产目录中）。我建议添加一个名为“使用图像？”之类的复选框。并且仅在勾选复选框时显示上传的文件。例如。 {% if settings.use_image %}...{% endif %}。有关主题设置的更多信息，请参阅本教程 (Part 1 & Part 2)。