{% comment %}
As the developer of this package, don't place anything here if you can help it
since this allows developers to have interoperability between your template
structure and their own.

Example: Developer melding the 2SoD pattern to fit inside with another pattern::

    {% extends "base.html" %}
    {% load static %}

    <!-- Their site uses old school block layout -->
    {% block extra_js %}

        <!-- Your package using 2SoD block layout -->
        {% block javascript %}
            <script src="{% static 'js/ninja.js' %}" type="text/javascript"></script>
        {% endblock javascript %}

    {% endblock extra_js %}
{% endcomment %}
{% load static %}

{% load cms_tags %}
{% load sekizai_tags %}
{% load l10n %}
{% load thumbnail %}

{% load jsonify %}

{% addtoblock 'css' %}
    <link rel="stylesheet" type="text/css" href="{% static 'lightGallery/css/lightgallery.min.css' %}">
    <style type="text/css">
        .cont {
          text-align: center;
        }

        .lg-gallery > ul {
          margin-bottom: 0;
          padding-left: 15px;
        }

        .lg-gallery > ul > li {
          margin-bottom: 15px;
          width: 180px;
          display: inline-block;
          margin-right: 15px;
          list-style: outside none none;
        }

        .lg-gallery > ul > li a {
          border: 3px solid #FFF;
          border-radius: 3px;
          display: block;
          overflow: hidden;
          position: relative;
          float: left;
        }

        .lg-gallery > ul > li a > img {
          -webkit-transition: -webkit-transform 0.15s ease 0s;
          -moz-transition: -moz-transform 0.15s ease 0s;
          -o-transition: -o-transform 0.15s ease 0s;
          transition: transform 0.15s ease 0s;
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
          height: 100%;
          width: 100%;
        }

        .lg-gallery > ul > li a:hover > img {
          -webkit-transform: scale3d(1.1, 1.1, 1.1);
          transform: scale3d(1.1, 1.1, 1.1);
        }

        .lg-gallery > ul > li a:hover .lg-gallery-poster > p {
          opacity: 1;
        }

        .lg-gallery > ul > li a .lg-gallery-poster {
          background-color: rgba(0, 0, 0, 0.1);
          bottom: 0;
          left: 0;
          position: absolute;
          right: 0;
          top: 0;

          -webkit-transition: background-color 0.15s ease 0s;
          -o-transition: background-color 0.15s ease 0s;
          transition: background-color 0.15s ease 0s;
        }

        .lg-gallery > ul > li a .lg-gallery-poster > p {
          opacity: 0;
          font-size: 55px;
          color: #eee;
          width: 180px;
          -webkit-transition: opacity 0.3s ease 0s;
          -o-transition: opacity 0.3s ease 0s;
          transition: opacity 0.3s ease 0s;
        }

        .lg-gallery > ul > li a:hover .lg-gallery-poster {
          background-color: rgba(0, 0, 0, 0.5);
        }

        .lg-gallery .video .lg-gallery-poster p {
          height: 48px;
          margin-left: -24px;
          margin-top: -24px;
          opacity: 0.8;
          width: 48px;
        }

        .lg-gallery.dark > ul > li a {
          border: 3px solid #ddd;
        }

    </style>
{% endaddtoblock %}

<div class="cont">
    <div class="page-head">
      <div class="lg-gallery">
        <ul id="lightgallery-{{ instance.pk }}">
            {% for image in images %}
                {% thumbnail image.image 375x375 crop upscale as thumb_xs %}
                {% thumbnail image.image 480x480 crop upscale as thumb_sm %}
                {% thumbnail image.image 800x800 crop upscale as thumb_md %}
                <li data-responsive="{{ thumb_xs.url }} 375, {{ thumb_sm.url }} 480, {{ thumb_md.url }} 800"
                    data-src="{{ image.image.url }}"
                    data-sub-html="{{ instance.content|safe }}"
                    data-pinterest-text="Pin it"
                    data-tweet-text="share on twitter ">
                    <a href="">
                        <img class="img-responsive" src="{{ thumb_xs.url }}">
                        <div class="lg-gallery-poster">
                            <p>&#8853;</p>
                        </div>
                    </a>
                </li>
            {% endfor %}
        </ul>
      </div>
    </div>
</div>

{% addtoblock 'js' %}
    <script type="text/javascript" src="{% static 'lightGallery/js/lightgallery-all.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'lightGallery/js/modules/lg-thumbnail.js' %}"></script>
    <script type="text/javascript" src="{% static 'lightGallery/js/modules/lg-autoplay.js' %}"></script>
    <script type="text/javascript" src="{% static 'lightGallery/js/modules/lg-video.js' %}"></script>
    <script type="text/javascript" src="{% static 'lightGallery/js/modules/lg-fullscreen.js' %}"></script>
    <script type="text/javascript" src="{% static 'lightGallery/js/modules/lg-pager.js' %}"></script>
    <script type="text/javascript" src="{% static 'lightGallery/js/modules/lg-zoom.js' %}"></script>
    <script type="text/javascript" src="{% static 'lightGallery/js/modules/lg-hash.js' %}"></script>
    <script type="text/javascript" src="{% static 'lightGallery/js/modules/lg-share.js' %}"></script>

    <script type="text/javascript">
        $(document).load(function() {
            $("#lightgallery-{{ instance.pk }}").lightGallery({{ instance.settings|jsonify }});
        });
    </script>

{% endaddtoblock %}