Удалить изображения из описания продукта

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

Если вы хотите скрыть все изображения в описании на мобильном устройстве, вы можете использовать медиа-запрос для их нацеливания.

Тем не менее, медиа-запрос зависит от темы.Вот пример:

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

Вы хотели бы добавить это в конец вашего файла scss (наиболее вероятно theme.scss.liquid.)

Запрос выше для простого и несколькихдругие - вот список:

• Повествовательный, Простой, Венчурный, Дебютный, Безграничный: @include media-query($small) {
• Jumpstart, Brooklyn, Supply, Pop, Минимальный: @include at-query($max, $small) {

Answer 2

Почему вы встраиваете изображения продуктов в описание? Вы делаете жизнь очень трудной для себя. Почему бы просто не загружать изображения продуктов, а затем делать логические различия в том, сколько, какие и т. Д. Вы решили использовать и где.

Управление product.images намного проще и надежнее, чем встраивание жестко закодированных тегов HTML в ваше описание.