markdown 带标题覆盖的集合页面图像

Posted 2021-05-05

Theme: Minimal

Last version(s) tested: 10.1.0

Recommended design time: 10 minutes

## What you have:
![.](https://screenshot.click/19-08-yu4n1-qy0i6.jpg)
 
## What you want:
![.](https://screenshot.click/19-28-3ld65-r34e9.jpg)
 
## How to get it:

1. Open the collection-template.liquid file and on a new line add the following under the pagination tag:
    ``` liquid
    {% assign show_banner = false %}
    {% if collection.image and section.settings.show_image %}
      {% assign show_banner = true %}
      {% style %}
        .breadcrumb a, .tags a, .breadcrumb, .tags, .section-header__title {
          color: {{ section.settings.collection_image_text }};
        }
      {% endstyle %}
    {% endif %}
    ```
    
    If the merchant does not want the breadcrumb on top of the banner remove the breadcrumb and tags from the above styles.

2. Locate the breadcrumb block of code and depending on the merchant preferences add the following code after or before to have the breadcrumb navigation above or on top of the banner respectfully:
    ``` liquid
    {% if show_banner %}
      <div class="collection-image__wrapper">
        {%- if settings.enable_wide_layout -%}
          {%- assign max_width = 1280 -%}
        {%- else -%}
          {%- assign max_width = 970 -%}
        {%- endif -%}
        {%- assign collection_image_width = max_width -%}
        {%- assign img_url = collection.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
        {%- if collection.image.width < max_width -%}
          {%- assign collection_image_width = collection.image.width -%}
        {%- endif -%}
        <img class="lazyload collection-image"
            src="{{ collection.image | img_url: '300x300' }}"
            data-src="{{ img_url }}"
            data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
            data-aspectratio="{{ collection.image.aspect_ratio }}"
            data-sizes="auto"
            style="{%- if collection_image_width <= max_width -%}
                    {%- assign min_width = collection_image_width | times: 100 | divided_by: max_width -%}
                      min-width: {{ min_width }}%;
                  {%- endif -%}
                  object-position: center;"
            alt="{{ collection.image.alt | escape }}">
    {% endif %}
    ```
3. Locate the closing `</header>` tag and on a new line after add the following :
    ``` liquid
      {% if show_banner %}
        </div>
      {% endif %}
      
        {% if show_banner == true and section.settings.tags_enable or section.settings.sort_enable %}
          <div class="section-header__link--right">
            {% if section.settings.tags_enable %}
              {% include 'collection-tags' %}
            {% endif %}
            {% if section.settings.sort_enable %}
              {% include 'collection-sorting' %}
            {% endif %}
          </div>
        {% endif %}
    ```
4. At the bottom in the schema settings add the following settings:
    ``` json
    	{
          "type": "checkbox",
          "id": "show_image",
          "label": "Show collection image",
          "default": true
        },
    	{
          "type": "color",
          "id": "collection_image_text",
          "label": "Text on image overlay",
          "default": "#fff"
        }
    ```
5. Add the below code to the bottom of the theme.scss.liquid file:
    ``` sass
      .collection-image__wrapper {
        position: relative;
        width: 100%;
        display: block;
        z-index: 2;
        margin-bottom: $gutter;
        .section-header {
          position: absolute;
          top: $gutter / 2;
          left: 0;
          padding: 0 $gutter;
        }
        .section-header.section-header--large {
          top: 50%;
          @include transform(translateY(-50%));
        }
        .collection-image {
          @extend .slides__image;
          height: 400px;
          @include at-query($max, $medium) {
            height: 250px;
          }
        }
        .section-header__title {
          text-align: center;
        }
      }
      @include at-query($min, $large) {
        .section-header__link--right {
          width: 100%;
          float: right;
          .section-header__link--left + & {
            float: none;
            width: 550px
          }
        }
      }
    ```

Some tweaking to the css may be needed!