markdown 在精选集合中显示两个产品图像

Posted 2021-05-05

**Theme:** Debut

**Version(s) successfully tested on:** 8.0.0

**Recommended design time:** 5 minutes



----

## What you have
Standard featured collection showing products 2 per row min.
![](https://screenshot.click/29-22-jvekb-immef.jpg)

## What you want
To display single products per row showing two images (or centered if one image)
![](https://screenshot.click/29-40-7h60c-en2ak.jpg)

----

## What you do

**Step 1:**

In `Sections > collection.liquid` add an extra setting for a `1` case to the grid settings. Try searching for:

`{% case section.settings.grid %}`

and add this code to the `case`

```liquid
{% when 1 %}
  {%- assign max_height = 530 -%}
  {%- assign grid_item_width = 'one-whole' -%}
```

![](https://screenshot.click/29-25-wml05-5qigq.jpg)


**Step 2:**

Search for `{% include 'product-card-grid', max_height: max_height %}` and replace 

`{% include 'product-card-grid', max_height: max_height %}`

with

```liquid
{% if section.settings.grid == 1 %}
  {% include 'product-card-grid-two-images', max_height: max_height %}
{% else %}
  {% include 'product-card-grid', max_height: max_height %}
{% endif %}
```

![](https://screenshot.click/29-26-v61u3-byaer.jpg)

At the bottom of the file find `Products per row` in the settings and change the min value from 2 to 1

![](https://screenshot.click/19-30-9vc6m-70qoa.png) 

**Step 3:**

Create a snippet called `product-card-grid-two-images.liquid` and paste in the following block of code:

```liquid
{% comment %} calculations for 1 or two images {% endcomment %}

{% if product.images.size > 1 %}
	{% assign grid_class = 'medium-up--one-half' %}
{% else %}
	{% assign grid_class = '' %}
{% endif %}

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <div class="grid">

    {% for image in product.images limit: 2%}
    
    {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

    <div class="grid__item {{ grid_class }}">
      <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
        {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
        {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}

        {% include 'image-style' with image: image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}

        <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
          <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
            <img id="{{ img_id }}"
                 class="grid-view-item__image lazyload"
                 src="{{ image | img_url: '300x300' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ image.alt | escape }}">
          </div>
        </div>

        <noscript>
          {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
          <img class="grid-view-item__image" src="{{ image.src | img_url: image_size, scale: 2 }}" alt="{{ image.alt }}" style="max-width: {{ max_height | times: image.aspect_ratio }}px;">
        </noscript>
      </a>
    </div>
    
    {% endfor %}

    <div class="grid__item text-center">
      <br>
      <a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
        <div class="h4 grid-view-item__title">{{ product.title }}</div>
        {% if section.settings.show_vendor %}
        <div class="grid-view-item__vendor">{{ product.vendor }}</div>
        {% endif %}
        <div class="grid-view-item__meta">
          {% include 'product-price-2' %}
        </div>
      </a>
    </div>
  </div>  
</div>
```

**Step 4:**

Create a new snippet called `product-price-2`. 

Copy and paste all the code from the `product-price.liquid` snippet and then find the following `<dl class="price {% if compare_at_price > price %} price--on-sale{% endif %}" data-price>`
and add a class of `price-2` to the dl element, resulting in:

```liquid
<dl class="price price-2{% if compare_at_price > price %} price--on-sale{% endif %}" data-price>
```

**Step 5:**

Add the following to the bottom of theme.scss.liquid

```css
.price-2 {
  justify-content:center;
}
```
----

**Additional notes:** 

**Alternative keywords:**