删除桌面用户的图像而不是移动用户

时间:2018-02-28 16:25:43

标签: html mobile shopify desktop

在我的shopify商店,我想禁用" collection-image"对于桌面用户而非移动用户,因为我不是代码专家"我每次尝试更改soemthing时都会搞砸了我之所以要禁用它的原因它在桌面上看起来很简单它在手机上看起来非常糟糕它看起来很完美所以我在这里寻求你的帮助

{% if section.blocks.size > 0 %}
  {%- assign enable_sidebar = true -%}
{% else %}
  {%- assign enable_sidebar = false -%}
{% endif %}
{%- assign products_per_page = section.settings.products_per_page_range -%}

{% if section.settings.image_placement != 'default' and section.settings.image_placement != 'hidden' and collection.image %}
  <div class="hero-content header {{ section.settings.image_placement }}">
    {%- assign image = collection.image -%}
    <div class="collection-image" {% if section.settings.image_placement == 'above' %}style="max-width:{{ image.width }}px;"{% endif %}>
      <div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times:100}}%">
        {% assign image_widths = '295,394,590,700,900,1200,1500,1800,2000,2400' %}
        {% include 'theme-rias' %}
        <img class="card__image lazyload"
          src="{{ image | img_url: '590x' }}"
          data-src="{{ image_url_pattern }}"
          data-widths="[{{ image_widths }}]"
          data-aspectratio="{{ image.aspect_ratio }}"
          data-sizes="auto"
          alt="{{ image.alt | escape }}">
        <noscript>
          <img class="card__image" src="{{ image | img_url: '1200x' }}" alt="{{ image.alt | escape }}">
        </noscript>
      </div>
    </div>
  </div>
{% endif %}

{% paginate collection.products by products_per_page %}
<section class="collection" data-section-id="{{ section.id }}" data-section-type="collection-template">
  <div class="wrapper">

    <header class="content-util">
    {% include 'breadcrumb' %}
    {% include 'social-icons' %}
    </header>

    <div class="grid {% unless enable_sidebar %}full-width{% endunless %}">
      <div class="collection-container">
        <header class="collection-header">
          <div class="container">
            <h1>{{ collection.title }}</h1>
            {% include 'collection-sorting' %}
          </div>
          {% if section.settings.image_placement == 'default' and collection.image %}
          <div class="collection-image">
            {%- assign image = collection.image -%}
            <div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%">
              {% assign image_widths = '295,394,590,700,900,1200,1500,1800,2000,2400' %}
              {% include 'theme-rias' %}
              <img class="card__image lazyload"
                src="{{ image | img_url: '590x' }}"
                data-src="{{ image_url_pattern }}"
                data-widths="[{{ image_widths }}]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                style="width:{{ image.width }}px;"
                alt="{{ image.alt | escape }}">
              <noscript>
                <img class="card__image" src="{{ image | img_url: '1200x' }}" alt="{{ image.alt | escape }}">
              </noscript>
            </div>
          </div>
          {% endif %}
          {% if collection.description != blank %}
          <div class="description rte">
            {{ collection.description }}
          </div>
          {% endif %}
        </header>

        {% if enable_sidebar %}
          <div class="mobile-aside-container">
            <a href="#" class="button simple">{{ 'layout.navigation.collection_menu' | t}}</a>
            <aside>
              {% include 'collection-sidebar' %}
            </aside>
          </div>
        {% endif %}

        <div class="products products-grid {% unless enable_sidebar %}full-width{% endunless %}">
          {% comment %}
            Loop through our products in the current collection.
            See the snippet 'product-grid-item' for the layout.
          {% endcomment %}
          {% for product in collection.products %}
            {% include 'product-grid-item' %}
          {% else %}
            {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
              {% for i in (1..products_per_page) %}
                {% include 'placeholder-product-grid-item' %}
              {% endfor %}
            {% else %}
              {% comment %}
                If collection exists but is empty, display message
              {% endcomment %}
              <p>{{ 'collections.general.no_matches' | t }}</p>
            {% endif %}
          {% endfor %}
        </div>
        {% if paginate.pages > 1 %}
        <footer class="collection-footer">
          {% include 'pagination' %}
        </footer>
        {% endif %}
      </div>

      {% if enable_sidebar %}
        <div class="aside-container">
          <aside>
            {% include 'collection-sidebar' %}
          </aside>
        </div>
      {% endif %}

    </div>

  </div>
</section>
{% endpaginate %}

{% schema %}
{
  "name": "Collection pages",
  "settings": [
    {
      "type": "range",
      "id": "products_per_page_range",
      "label": "Number of products on each page",
      "min": 12,
      "max": 48,
      "step": 12,
      "default": 12
    },
    {
      "type": "select",
      "id": "image_placement",
      "label": "Collection image placement",
      "options": [
        { "value": "default", "label": "After collection title" },
        { "value": "above", "label": "After navigation" },
        { "value": "above-full", "label": "After navigation full width" },
        { "value": "hidden", "label": "Hidden" }
      ],
      "default": "default"
    },
    {
      "type": "checkbox",
      "id": "sort_enable",
      "label": "Enable sorting",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "layout_enable",
      "label": "Enable grid and list views",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "menu",
      "name": "Sidebar menu",
      "settings": [
        {
          "type": "link_list",
          "id": "linklist",
          "label": "Menu",
          "default": "main-menu"
        }
      ]
    },
    {
      "type": "tags",
      "name": "Sidebar tags",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Shop by"
        },
        {
          "type": "radio",
          "id": "tag_style",
          "label": "Show tags as",
          "options": [
            { "value": "buttons", "label": "Buttons" },
            { "value": "menu", "label": "Menu" }
          ],
          "default": "buttons"
        },
        {
          "type": "checkbox",
          "id": "tag_grouping",
          "label": "Enable tag grouping",
          "default": false,
          "info": "[Learn how to set up tag groups](http://help.stylehatch.com/article/289-collections)"
        }
      ]
    }
  ]
}
{% endschema %}

0 个答案:

没有答案