Question

我只想在移动设备上显示描述中的产品图片。我不知道如何从product.description中分割图像。

         <div class="product-description rte" itemprop="description">
         // this works how I want it to. shows images and text
         <div class="mobileShow"> 
          {{ product.description }} 

        </div>  

         // if not mobile device only show text. strip out images.
           {% if product.description contains "<img" %}
           // ??

          </div>

Answer 1

为什么要在说明中嵌入产品图片？你让自己的生活变得非常困难。为什么不只是上传产品图像，然后在逻辑上区分您决定使用多少，哪些图像等等。

与在描述中嵌入HTML硬编码标签相比，操纵product.images更加容易和可靠。

Answer 2

如果您想隐藏手机说明中的所有图像，可以使用媒体查询来定位它们。

不过，媒体查询取决于主题。这是一个示例：

@include media-query($small) {
  .product-description img {
    display: none;
  }
}

您希望将其添加到scss文件的末尾（很可能是theme.scss.liquid。）

上面的查询适用于Simple和其他一些查询-这是列表：

叙事，简单，冒险，首演，无尽：@include media-query($small) {
Jumpstart，布鲁克林，供应，流行，最低：@include at-query($max, $small) {

从产品说明中删除图像

2 个答案: