feat(img_enlarged): Prepares code

content/about-us/_index.md

@@ -2,7 +2,6 @@
 title = "About us"
 weight = 4
 sort_by = "weight"
-template = "customs/about-us.html"
 
 [extra]
 title = "About us"

sass/css/_base.scss

@@ -204,3 +204,7 @@ ul:not(.navbar-nav) li {
 .badge-primary {
   background-color: $brand-color;
 }
+
+.modal-lg {
+  max-width: 90%;
+}

sass/css/_layout.scss

@@ -111,6 +111,10 @@ h3, h2, h1 {
     padding-top: .5rem;
     margin-top: 12px;
   }
+
+  .modal-lg {
+    max-width: 70%;
+  }
 }
 
 // Extra large devices (large desktops, 1200px and up)

templates/_base.html

@@ -140,6 +140,20 @@
 
     <!-- ./FOOTER -->
 
+    <!-- MODAL for enlarged picture -->
+    <div class="modal" id="modalEnlarged" tabindex="-1" role="dialog">
+      <div class="modal-dialog  modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-body">
+            <img src="" id="enlarged" class="img-fluid">
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
 
     <script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
     <script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
@@ -153,6 +167,17 @@
 
     </script>
 
+    <script>
+      $(function () {
+        $('[data-popup]').click(function (evt) {
+          var _self = $(this);
+          var _img_enlarged = _self.data('nsrc');
+          $('#enlarged').attr('src', _img_enlarged);
+          $('#modalEnlarged').modal('show');
+        });
+      });
+    </script>
+
   </body>
 
 </html>

templates/shortcodes/layout_text_img.html

@@ -13,7 +13,7 @@
       <div class="card {% if shadow %}shadow{% endif %}">
 
         {% if src %}
-        <img src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
+        <img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
         {% endif %}
 
       </div>
@@ -27,7 +27,7 @@
       <div class="card {% if shadow %}shadow{% endif %}">
 
         {% if src %}
-        <img src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
+        <img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=src, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
         {% endif %}
 
       </div>