From a0314e60ef63d9337f6137fb961574f27ff19603 Mon Sep 17 00:00:00 2001
From: sovanna <sovanna.hing@gmail.com>
Date: Fri, 19 Jul 2019 17:28:56 +0200
Subject: [PATCH] feat(img_enlarged): Prepares code

---
 content/about-us/_index.md                |  1 -
 sass/css/_base.scss                       |  4 ++++
 sass/css/_layout.scss                     |  4 ++++
 templates/_base.html                      | 25 +++++++++++++++++++++++
 templates/shortcodes/layout_text_img.html |  4 ++--
 5 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/content/about-us/_index.md b/content/about-us/_index.md
index d055d12..93a1eb0 100644
--- a/content/about-us/_index.md
+++ b/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"
diff --git a/sass/css/_base.scss b/sass/css/_base.scss
index 096040e..13ec6f3 100644
--- a/sass/css/_base.scss
+++ b/sass/css/_base.scss
@@ -203,4 +203,8 @@ ul:not(.navbar-nav) li {
 
 .badge-primary {
   background-color: $brand-color;
+}
+
+.modal-lg {
+  max-width: 90%;
 }
\ No newline at end of file
diff --git a/sass/css/_layout.scss b/sass/css/_layout.scss
index 3c1a982..81c4bd8 100644
--- a/sass/css/_layout.scss
+++ b/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)
diff --git a/templates/_base.html b/templates/_base.html
index ea7fc32..6e91970 100644
--- a/templates/_base.html
+++ b/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>
diff --git a/templates/shortcodes/layout_text_img.html b/templates/shortcodes/layout_text_img.html
index 26eaf05..4248717 100644
--- a/templates/shortcodes/layout_text_img.html
+++ b/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>