Magnific Image Modal Pop-up for Hugo

__Magnific Image Modal for Hugo.md

Magnific Image Pop-Up Modal for Hugo

A working demo of the pop-up can be found here.

I wanted a modal pop-up for images on my new Hugo site, and couldn't find one that worked with the styling that I do to the image path name. I'm new to Hugo, but I feel that the solution is simple and effective. The close button has been optimzed for accessibility as it is named close, but displays only × (×).

File Placement

The render-image.html file goes into layouts > _default > _markdown > render-image.html à la Hugo markup configuration. image-modal.html is a partial that should be placed before the closing body tag of baseof.html or any page that you would like an image modal. image-modal.css can be itegrated into the custom css file or used standalone and put into the custom css array.

Usage

Standard markdown image format should be used: ![alt text](/path/to/image.img). Hashtags for css styling can also be used with image file names: ![alt text](/path/to/image.img#float-left). When the image is clicked, the hash and everything to the right of the hash will be removed so the css styling doen't affect the image pop-up. In use, click the image to po-up the modal, and click the x or the popped-up image to close the modal. That's it!

image-modal.css

* The markdown image container */
.md__image {
  cursor: pointer;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 4em;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: black;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1400px;
}

.modal-pic {
  display: flex;
  align-content: center;
  cursor: pointer;
}

/* The Close Button */
/* Optimized for accessibility by using a button named close but 
  shifting the close text out of the button and only showing x */
.modal-close {
  color: white;
  background-color: black;
  position: absolute;
  top: .5em;
  right: .5em;
  font-size: 2em;
  font-weight: bold;
  height: 1em;
  width: 1em;
  text-indent: 10em;
  overflow: hidden;
  border: 0;
}

.modal-close::after {
  position: absolute;
  line-height: 0.5;
  top: 0.2em;
  left: 0.1em;
  text-indent: 0;
  content: "\00D7"
}

.modal-close:hover,
.modal-close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

image-modal.html

<!-- Place in layouts > partials > image-modal.html -->
<!-- Use the partial at the bottom of any page in which you want magnific pop-up images,
  or simply place at the bottom of baseof.html -->
<!-- Modal will open upon clicking the image. Modal will close with clicking the x or image. -->

<!-- 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>
</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>

render-image.html

<!-- Images that use the standard image format for markdown will be displayed in a 
  magnific modal popup. Use format ![alt text](/path/to/image.img) -->
<!-- Place this file in layouts > _default > _markup > render-image.html -->
<!-- Also place the image-modal.css and partial/image-modal.html appropriately. -->
<!-- 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. -->
<!-- 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 }} />
</div>