LookBook Image Gallery to Shopify store

Required files:

• assets [photoswipe.js.liquid, photoswipe.scss.liquid]
• snippets [photoswipe.liquid]
• sections [page-lookbook-template.liquid]
• templates [page.lookbook.liquid]

• In the Assets directory, upload the following files:
  • Upload a png image for image place holder and name it ‘default-skin.png’
  • photoswipe.js
  • photoswipe.js.liquid
  • photoswipe.scss.liquid
• In the Snippets directory, create a new file named photoswipe.liquid and add the following code:

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="pswp__bg"></div>
  <div class="pswp__scroll-wrap">
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--share" title="Share"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
      </button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
      </button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>
 

• In the Section directory, create a new file named page-lookbook-template.liquid and add the following code:

<div class="grid grid-lookbook {% if section.settings.enable_modal %} modal-lookbook{% endif %} {% if section.settings.remove_spacing %} no-spacing{% endif %}">
  {% for block in section.blocks %}
  {% if block.type == 'image' %}
  {%- assign img_url = block.settings.img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
    <div class="grid__item {% if section.settings.layout == "4" %} medium-up--one-quarter{% else %}  medium-up--one-third{% endif %} small--one-half one-whole">
      <figure class="lookbook-img lookbook-img-{{ forloop.index }}">
        <a href="{% if section.settings.enable_modal %}{{ block.settings.img | img_url: 'master' }}{% else %}{{block.settings.link}}{% endif %}"{% if section.settings.enable_modal %} data-size="{{ block.settings.img.width }}x{{ block.settings.img.height }}"{% endif %}><img data-sizes="auto" data-src="{{img_url}}" data-widths="[320, 460, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" src="{{ block.settings.img | img_url: '440x440' }}" class="lazyload lazypreload img"></a>
        <figcaption class="lookbook-cap">
          <h3 class="title"><a href="{{block.settings.link}}">{{block.settings.title}}</a></h3>
          <div class="text">{{block.settings.content}}</div>
        </figcaption>
      </figure>

    </div>
  {% endif %}
{% endfor %}
</div>
<style>
  @media (max-width:480px){
  .grid-lookbook .one-whole{width:100%;}
  }
  .grid.no-spacing{margin:0;}
  .grid-lookbook.no-spacing .grid__item{padding:0;}
  .grid.no-spacing .lookbook-img{margin:0;}
  .lookbook-img{position:relative;margin:0 0 30px;padding:0;}
  .lookbook-img img{width:100%;}
  .lookbook-cap{position:absolute;left:0;right:0;bottom:0;padding:10px;}
  .lookbook-cap .title{font-size:inherit;margin:0;padding:0;}
  .lookbook-cap .text{font-size:90%;opacity:0.8;}
  .lookbook-cap p{margin:0;padding:5px 0 0;color:inherit;}
  .lookbook-cap a, .lookbook-cap a:hover, .lookbook-cap a:focus{color:inherit;}
  {%- for block in section.blocks -%}
      {%- if block.type == 'image' -%}
  .lookbook-img-{{ forloop.index }} .lookbook-cap{
    color: {{ block.settings.color }};
    opacity: {{ bgcolor_opacity | divide_by: 10.0 }};
    background: {{ block.settings.bgcolor }};
  }

    {%- endif -%}
  {%- endfor -%}
  .pswp .title{margin:0;color:#fff;}
  .pswp .title a{text-decoration:underline;}
  .pswp .pswp__caption p, .pswp a, .pswp a:hover, .pswp a:focus{color:inherit;}
  .pswp .pswp__ui--fit .pswp__caption{color:#fff;background:rgba(0,0,0,0.75);}
</style>

{% if section.settings.enable_modal %}
{{ 'photoswipe.scss.css' | asset_url | stylesheet_tag }}
<script src="{{ 'photoswipe.js' | asset_url }}" defer="defer"></script>
{% endif %}

{% schema %}
  {
    "name": "Lookbook",
    "settings": [
      {
        "type": "header",
        "content": "Lookbook"
      },
      {
        "type": "select",
        "id": "layout",
        "label" : "Columns",
        "options": [
          {
          "value": "3",
          "label": "3"
          },
          {
          "value": "4",
          "label": "4"
          }
        ],
        "default" : "3"
      },
      {
        "type": "checkbox",
        "id": "remove_spacing",
        "label": "Remove spacing between grid",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_modal",
        "label": "Enable Modal",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "url",
            "id": "link",
            "label": "Link"
          },
          {
            "type": "image_picker",
            "id": "img",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          },
          {
            "type": "richtext",
            "id": "content",
            "label": "Text"
          },
          {
            "type": "color",
            "id": "color",
            "label": "Text color",
            "default": "#ffffff"
          },
          {
            "type": "color",
            "id": "bgcolor",
            "label": "Background",
            "default": "#0c0c0d"
          },
          {
            "type": "range",
            "id": "bgcolor_opacity",
            "label": "Background Overlay",
            "min": 0,
            "max": 100,
            "step": 10,
            "default": 50
          }
        ]
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}