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

В настоящее время я использую тему «Дебют» в Shopify. Я хочу изменить размер изображений товаров и сделать их больше. В настоящее время изображения имеют размер 276x345, и я хочу получить их примерно до 367x550.

В настоящее время на странице предусмотрено отображение трех продуктов в полноразмерном браузере (не на мобильном устройстве).

В настоящее время в Collection.liquid есть следующее:

  {% case section.settings.grid %}
{% when 2 %}
  {%- assign max_height = 530 -%}
  {%- assign grid_item_width = 'large-up--one-half' -%}
{% when 3 %}
  {%- assign max_height = 345 -%}
  {%- assign grid_item_width = 'small--one-half large-up--two-third' -%}
{% when 4 %}
  {%- assign max_height = 250 -%}
  {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
  {%- assign max_height = 195 -%}
  {%- assign grid_item_width = 'small--one-half medium-up--one-fifth'     -%}
{% endcase %}

При просмотре в браузере это возвращаемый CSS

  @media screen and (min-width: 750px) { 
    #ProductCardImage-collection-template-1487328739386 {
      max-width: 276.0px;
      max-height: 345px;
    }
    #ProductCardImageWrapper-collection-template-1487328739386 {
      max-width: 276.0px;
      max-height: 345px;
    }
   } 



    @media screen and (max-width: 749px) {
      #ProductCardImage-collection-template-1487328739386 {
        max-width: 600.0px;
        max-height: 750px;
      }
      #ProductCardImageWrapper-collection-template-1487328739386 {
        max-width: 600.0px;
      }
    }

Что вызывает этот максимум 276 пикселей?

Как я могу изменить код, чтобы изображения загружались и отображались в большем размере?


javascript shopify liquid shopify-template liquid-layout
person Hayden    schedule 22.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Максимальная ширина рассчитывается следующим образом:

{% if image.aspect_ratio < 1.0 %}
    {% assign maximum_width = height | times: image.aspect_ratio %}
    {% if image.height <= height %}
      {% assign maximum_height = image.height %}
      {% assign maximum_width = image.width %}
    {% else %}
      {% assign maximum_height = height %}
    {% endif %}
{% elsif image.aspect_ratio < container_aspect_ratio %}
    {% assign maximum_height = height | divided_by: image.aspect_ratio %}
    {% if image.height <= height %}
      {% assign maximum_height = image.height %}
      {% assign maximum_width = image.width %}
    {% else %}
      {% assign maximum_height = height %}
      {% assign maximum_width = height | times: image.aspect_ratio %}
    {% endif %}
{% else %}
    {% assign maximum_height = height | divided_by: image.aspect_ratio %}
    {% if image.width <= width %}
      {% assign maximum_height = image.height %}
      {% assign maximum_width = image.width %}
    {% else %}
      {% assign maximum_width = width %}
      {% assign maximum_height = maximum_width | divided_by: image.aspect_ratio %}
    {% endif %}
{% endif %}

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

person drip    schedule 22.06.2018