From 548bbfc1272c659c9a47f16905025738ed955819 Mon Sep 17 00:00:00 2001
From: Suruchi Kumari <suruchikumarimfp4@gmail.com>
Date: Wed, 8 Nov 2023 16:00:17 +0000
Subject: [PATCH 1/5] added modals

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>
---
 content/en/cloud/_index.md                 |  2 +-
 content/en/cloud/concepts/_index.md        |  2 +-
 content/en/cloud/security/_index.md        |  6 ++-
 content/en/cloud/self-hosted/_index.md     |  8 ++--
 layouts/_default/_markup/render-image.html |  4 +-
 layouts/_default/baseof.html               |  2 +-
 layouts/docs/baseof.html                   |  1 +
 layouts/partials/image-modal.html          | 56 +++++++++++-----------
 8 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/content/en/cloud/_index.md b/content/en/cloud/_index.md
index 0474ab74..67245791 100755
--- a/content/en/cloud/_index.md
+++ b/content/en/cloud/_index.md
@@ -6,7 +6,7 @@ menu: {main: {weight: 2}}
 cascade: 
     type: docs
 ---
-{{< figure src="layer5-cloud-provider.svg"  class="image-center-shadow" >}}
+![layer5-cloud-provider](layer5-cloud-provider.svg)
 {{% pageinfo %}}
 
 ## Understanding the Meshery Ecosystem
diff --git a/content/en/cloud/concepts/_index.md b/content/en/cloud/concepts/_index.md
index 75765b5f..a57deadb 100644
--- a/content/en/cloud/concepts/_index.md
+++ b/content/en/cloud/concepts/_index.md
@@ -5,7 +5,7 @@ description: >
   An overview of Layer5 Cloud concepts and their relationships to one another.
 ---
 
-{{< figure src="concepts-overview.svg"  class="image-center-shadow" >}}
+![concepts-overview](concepts-overview.svg)
 
 <!--
 {{% pageinfo %}}
diff --git a/content/en/cloud/security/_index.md b/content/en/cloud/security/_index.md
index 45d90211..1538cc87 100755
--- a/content/en/cloud/security/_index.md
+++ b/content/en/cloud/security/_index.md
@@ -7,8 +7,10 @@ categories: [Security]
 tags: [permissions]
 ---
 
-{{< figure src="roles-overview.svg" >}}
-{{< figure src="images/role-provider-admin.svg" link="images/role-provider-admin.svg"  width="100%"  >}}
+![roles](roles-overview.svg)
+
+![provider](images/role-provider-admin.svg)
+
 
 
 <!-- Think about your project’s features and use cases. Use these to choose your core tasks. Each granular use case (enable x, configure y) should have a corresponding tasks page or tasks page section. Users should be able to quickly refer to your core tasks when they need to find out how to do one specific thing, rather than having to look for the instructions in a bigger tutorial or example. Think of your tasks pages as a cookbook with different procedures your users can combine to create something more substantial.
diff --git a/content/en/cloud/self-hosted/_index.md b/content/en/cloud/self-hosted/_index.md
index e039a57c..5496d931 100644
--- a/content/en/cloud/self-hosted/_index.md
+++ b/content/en/cloud/self-hosted/_index.md
@@ -5,8 +5,7 @@ description: >
   Keep your MeshMap designs internal to your workplace. Get remote support from Layer5 when you need it.
 ---
 
-{{< figure src="images/self-hosted.svg" link="images/self-hosted.svg" class="image-right-no-shadow" >}}
-
+![self-hosted](images/self-hosted.svg)
 
 ## On-premises Deployment of Layer5 Cloud
 
@@ -18,13 +17,12 @@ Whitelabeling is supported by Layer5 Cloud. The following diagram illustrates th
 
 ## Considerations of Self-Hosted Deployments
 
-{{< figure src="images/self-hosted-deployment.svg" link="images/self-hosted-deployment.svg" class="image-center-no-shadow" >}}
+![self-hosted-deployment](images/self-hosted-deployment.svg)
 
 ## Considerations of Peer-to-Peer Communication and Central Coordination
 
 
-{{< figure src="images/meshmap-collaboration-networking.svg" link="images/meshmap-collaboration-networking.svg" class="image-center-no-shadow" >}}
-
+![meshmap-collaboration-networking](images/meshmap-collaboration-networking.svg)
 
 
 ## Consideration for Air-Gapped Deployments
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 82358647..dd428ab4 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -5,8 +5,8 @@
 <!-- Id for the image on the page is set to a random 6 numbers, chosen from 1 to 500 -->
 <!-- Onclick opens the modal, and displays/overlays the the image that has the id for the 
   clicked image. -->
-<!-- from: https://gist.github.com/zjeaton/0cdd7e4bed9d292ab6f3d76b0369f16d -->
+<!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
 
 <div class="md__image">
-    <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
+  <img style="width:100%;" id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
 </div>
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 99c2b22e..9636bab1 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -14,6 +14,6 @@
       {{ partial "footer.html" . }}
     </div>
     {{ partialCached "scripts.html" . }}
-    {{ partialCached "image-modal.html" . }}
+    {{ partial "image-modal.html" . }}
   </body>
 </html>
\ No newline at end of file
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 210b6af5..dbc53fa2 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -28,5 +28,6 @@
       {{ partial "footer.html" . }}
     </div>
     {{ partial "scripts.html" . }}
+    {{ partial "image-modal.html" . }}
   </body>
 </html>
\ No newline at end of file
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
index 2e87799e..f30215aa 100644
--- a/layouts/partials/image-modal.html
+++ b/layouts/partials/image-modal.html
@@ -5,32 +5,32 @@
 
 <!-- The Modal -->
 <div id="myModal" class="modal">
-    <button class="modal-close" onclick="closeModal()">close</button>
-    <div class="modal-content">
-      <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
-    </div>
+  <button class="modal-close" onclick="closeModal()">close</button>
+  <div class="modal-content">
+    <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
   </div>
-  
-  <script>
-  // Open the Modal
-  function openModal(clicked_id) {
-    var src = document.getElementById(clicked_id).src;
-    if (src.includes("#")) {
-      src = src.substring(0, src.indexOf( "#" ));
-    };
-    document.getElementById("modalPic").src = src;
-    document.getElementById("myModal").style.display = "block";
-    // Ensures the site footer is not shown if front of the modal. Remove if this is not an issue or
-    // there is no footer. "site-footer" id can also be changed appropriately.
-    document.getElementById("site-footer").style.display = "hidden";
-  }
-  
-  // Close the Modal
-  function closeModal() { 
-    // prevents flashing last modal image while new id is loading on open
-    document.getElementById("modalPic").src = "";
-    document.getElementById("myModal").style.display = "none";
-    // See note above regarding the footer 
-    document.getElementById("site-footer").style.display = "block";
-  }
-  </script>
\ No newline at end of file
+</div>
+
+<script>
+// Open the Modal
+function openModal(clicked_id) {
+  var src = document.getElementById(clicked_id).src;
+  if (src.includes("#")) {
+    src = src.substring(0, src.indexOf( "#" ));
+  };
+  document.getElementById("modalPic").src = src;
+  document.getElementById("myModal").style.display = "block";
+  // Ensures the site footer is not shown if front of the modal. Remove if this is not an issue or
+  // there is no footer. "site-footer" id can also be changed appropriately.
+  document.getElementById("site-footer").style.display = "hidden";
+}
+
+// Close the Modal
+function closeModal() { 
+  // prevents flashing last modal image while new id is loading on open
+  document.getElementById("modalPic").src = "";
+  document.getElementById("myModal").style.display = "none";
+  // See note above regarding the footer 
+  document.getElementById("site-footer").style.display = "block";
+}
+</script>
\ No newline at end of file

From 4347dfcb9f0ef76e17f203d707039419790295d1 Mon Sep 17 00:00:00 2001
From: Suruchi Kumari <suruchikumarimfp4@gmail.com>
Date: Wed, 8 Nov 2023 18:29:45 +0000
Subject: [PATCH 2/5] added classes to images

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>
---
 assets/scss/_elements_project.scss         | 3 +++
 content/en/cloud/_index.md                 | 2 +-
 content/en/cloud/concepts/_index.md        | 2 +-
 content/en/cloud/security/_index.md        | 4 ++--
 content/en/cloud/self-hosted/_index.md     | 6 +++---
 layouts/_default/_markup/render-image.html | 2 +-
 6 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/assets/scss/_elements_project.scss b/assets/scss/_elements_project.scss
index ee370129..cfb59d16 100644
--- a/assets/scss/_elements_project.scss
+++ b/assets/scss/_elements_project.scss
@@ -76,6 +76,9 @@ div.tip {
     padding-bottom: 10px;
     padding-top: 10px;
   }
+  .image-center-no-shadow{
+    width: 100%;
+  }
 
   .align-right {
     display: block;
diff --git a/content/en/cloud/_index.md b/content/en/cloud/_index.md
index 67245791..60bcd45e 100755
--- a/content/en/cloud/_index.md
+++ b/content/en/cloud/_index.md
@@ -6,7 +6,7 @@ menu: {main: {weight: 2}}
 cascade: 
     type: docs
 ---
-![layer5-cloud-provider](layer5-cloud-provider.svg)
+![layer5-cloud-provider](layer5-cloud-provider.svg "image-center-shadow")
 {{% pageinfo %}}
 
 ## Understanding the Meshery Ecosystem
diff --git a/content/en/cloud/concepts/_index.md b/content/en/cloud/concepts/_index.md
index a57deadb..f4ef416a 100644
--- a/content/en/cloud/concepts/_index.md
+++ b/content/en/cloud/concepts/_index.md
@@ -5,7 +5,7 @@ description: >
   An overview of Layer5 Cloud concepts and their relationships to one another.
 ---
 
-![concepts-overview](concepts-overview.svg)
+![concepts-overview](concepts-overview.svg "image-center-shadow")
 
 <!--
 {{% pageinfo %}}
diff --git a/content/en/cloud/security/_index.md b/content/en/cloud/security/_index.md
index 1538cc87..bc662c1b 100755
--- a/content/en/cloud/security/_index.md
+++ b/content/en/cloud/security/_index.md
@@ -7,9 +7,9 @@ categories: [Security]
 tags: [permissions]
 ---
 
-![roles](roles-overview.svg)
+![roles](roles-overview.svg "image-center-no-shadow")
 
-![provider](images/role-provider-admin.svg)
+![provider](images/role-provider-admin.svg#float-left "image-center-no-shadow")
 
 
 
diff --git a/content/en/cloud/self-hosted/_index.md b/content/en/cloud/self-hosted/_index.md
index 5496d931..cb119e2c 100644
--- a/content/en/cloud/self-hosted/_index.md
+++ b/content/en/cloud/self-hosted/_index.md
@@ -5,7 +5,7 @@ description: >
   Keep your MeshMap designs internal to your workplace. Get remote support from Layer5 when you need it.
 ---
 
-![self-hosted](images/self-hosted.svg)
+![self-hosted](images/self-hosted.svg "image-right-no-shadow")
 
 ## On-premises Deployment of Layer5 Cloud
 
@@ -17,12 +17,12 @@ Whitelabeling is supported by Layer5 Cloud. The following diagram illustrates th
 
 ## Considerations of Self-Hosted Deployments
 
-![self-hosted-deployment](images/self-hosted-deployment.svg)
+![self-hosted-deployment](images/self-hosted-deployment.svg "image-center-no-shadow")
 
 ## Considerations of Peer-to-Peer Communication and Central Coordination
 
 
-![meshmap-collaboration-networking](images/meshmap-collaboration-networking.svg)
+![meshmap-collaboration-networking](images/meshmap-collaboration-networking.svg "image-center-no-shadow")
 
 
 ## Consideration for Air-Gapped Deployments
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index dd428ab4..59b1ba45 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -8,5 +8,5 @@
 <!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
 
 <div class="md__image">
-  <img style="width:100%;" id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
+  <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" class="{{ . }}" {{ end }} />
 </div>
\ No newline at end of file

From b38a29f564ae9b9b4f8b5c17f63010e637fed326 Mon Sep 17 00:00:00 2001
From: Suruchi Kumari <suruchikumarimfp4@gmail.com>
Date: Mon, 13 Nov 2023 05:14:55 +0000
Subject: [PATCH 3/5] slight changes

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>
---
 assets/scss/_image-modal_project.scss | 17 ++++++++---------
 layouts/partials/image-modal.html     |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/assets/scss/_image-modal_project.scss b/assets/scss/_image-modal_project.scss
index 965b8033..0c8f72ff 100644
--- a/assets/scss/_image-modal_project.scss
+++ b/assets/scss/_image-modal_project.scss
@@ -7,20 +7,19 @@
 .modal {
   display: none;
   position: fixed;
-  z-index: 1;
+  z-index: 9999999;
   padding-top: 4em;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: black;
+  background: rgba(0,0,0,0.85);
 }
 
 /* Modal Content */
-.modal-content {
+.modal-cont {
   position: relative;
-  background-color: black;
   margin: auto;
   padding: 0;
   width: 90%;
@@ -40,16 +39,16 @@
   color: white;
   background-color: black;
   position: absolute;
-  top: .5em;
-  right: .5em;
-  font-size: 2em;
-  font-weight: bold;
+  top: 5px;
+  right: 5px;
+  font-size: 2.5em;
   height: 1em;
   width: 1em;
   text-indent: 10em;
   overflow: hidden;
   border: 0;
-}
+  z-index: 99;
+} 
 
 .modal-close::after {
   position: absolute;
diff --git a/layouts/partials/image-modal.html b/layouts/partials/image-modal.html
index f30215aa..03dc1a5a 100644
--- a/layouts/partials/image-modal.html
+++ b/layouts/partials/image-modal.html
@@ -6,7 +6,7 @@
 <!-- The Modal -->
 <div id="myModal" class="modal">
   <button class="modal-close" onclick="closeModal()">close</button>
-  <div class="modal-content">
+  <div class="modal-cont">
     <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
   </div>
 </div>

From 50c64fbf3bd714af21ef33670aec15bf601724a7 Mon Sep 17 00:00:00 2001
From: Suruchi Kumari <suruchikumarimfp4@gmail.com>
Date: Wed, 15 Nov 2023 10:34:49 +0000
Subject: [PATCH 4/5] changes

Signed-off-by: GitHub <noreply@github.com>
---
 layouts/_default/_markup/render-image.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 59b1ba45..4e63d744 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -8,5 +8,5 @@
 <!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
 
 <div class="md__image">
-  <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" class="{{ . }}" {{ end }} />
+  <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} class="{{ . }}" {{ end }} />
 </div>
\ No newline at end of file

From 881d26c7847a9f98785bab8153d944683f7374fc Mon Sep 17 00:00:00 2001
From: Suruchi Kumari <suruchikumarimfp4@gmail.com>
Date: Wed, 15 Nov 2023 16:31:36 +0530
Subject: [PATCH 5/5] Update README.md

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>
---
 README.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e9ef85b5..f31211de 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,12 @@ The significant keys in the YAML frontmatter are:
 
 <div>&nbsp;</div>
 
-## Join the Layer5 community!
+### Uploading Images to the site
+To display images in a pop-up modal, use the following syntax: `![alt text](/path/to/image.svg)`. 
+
+**Note-> For images to show correctly on subpages, always provide the complete image path**
+
+<hr/>
 
 <a name="contributing"></a><a name="community"></a>
 Our projects are community-built and welcome collaboration. 👍 Be sure to see the <a href="https://docs.google.com/document/d/17OPtDE_rdnPQxmk2Kauhm3GwXF1R5dZ3Cj8qZLKdo5E/edit">Layer5 Community Welcome Guide</a> for a tour of resources available to you and jump into our <a href="http://slack.layer5.io">Slack</a>!