Improving Embedded Images
Well this is a bit of a minor post. But I got it so I can have images within my posts be a little better in my opinion.
Why
Before I go into the how I’d like to explain why. Previously most of my images that I have on this site are implemented in one of a couple of ways. With them either being the default Markdown image link () or using a combination of HTML div and img elements that I end up tweaking to fit the page. And while this was find it led to a couple of issues.
- Quite of bit of the custom HTML was repetitive copy and paste. Which can be very prone to error.
- I can constantly need to tweak the size of the images in a “gallery” (Example below) in order to make them still legible. With the only way that a user could “zoom in” being to open the image in another tab.
- The “galleries” I’ve placed on here previously do not change for mobile devices. Causing them to be extremely small.
How
So after discovering I can do something akin to react components using Jekyll/Liquid I decided to try it out. The result being that I now have three new components. A modal component I can use to set up simple modals without the need to copy and paste often. A image component that takes and image source and an optional caption to create a clickable image that will expand into a modal. Which can also be disabled. As well as a gallery component that takes a list of image sources and a list of captions to create a gallery that automatically sizes the images based on a few parameters.
Now this was all possible due to Liquid. Which is the Markdown Template Engine that Jekyll uses to generate it’s pages. One of the features of it is that you can create a directory called _includes. And place what can equate to HTML snip-its into. You can then call these “snip-its” using include fileName and if the snip-it uses variables to generate differently you also set them there. And while Liquid may not be a “real programming language” it does provide some logic. Such as loops and conditionals. Which with enough patients can give you rather nice results. Such as below. Which is an older version of my image component. Which also makes use of the modal component I built.
{-%- if include.id -%-}
{-%- assign imageId = include.id -%-}
{-%- assign imageModalId = imageId | append: "modal" -%-}
{-%- else -%-}
{-%- if imageCount -%-}
{-%- assign imageCount = imageCount | plus: 1 -%-}
{-%- else -%-}
{-%- assign imageCount = 0 -%-}
{-%- endif -%-}
{-%- assign imageId = "image"| append: imageCount -%-}
{-%- assign imageModalId = imageId | append: "modal" -%-}
{-%- endif -%-}
{-% capture imageContent %-}
<img style="width: 100%;" {-% if include.alt %-} title="{-{include.alt}-}" {-% endif %-} src="{-{include.src}-}" alt="{-{include.alt}-}">
{-%- if include.alt -%-}
<p style="text-align: center;"></p>
{-%- endif -%-}
{-% endcapture %-}
<div>
<div id="" style="cursor: pointer;" >
{-{ imageContent }-}
</div>
{-% unless include.disableModal %-}
{-% include modal.html modalId=imageModalId clickId=imageId content=imageContent %-}
{-% endunless %-}
</div>
And it is with this functionality that I created the components I am currently using. And I also have plans to expand upon them in the futures. Because these components allow me to eliminate the need to copy paste HTML within the source markdown files of this site. Which as stated previously can be error prone. While also adding functionality that allows the images to be easier to view. I also plan on using it to make the presentation of images on this site more consistent.
That’s it. It’s not much.
And that really is all this post is about. As of writing this these components are only in use on this post. And once this goes live should also be in use on my post about the OCR project I worked on. Though I plan on expanding it’s use farther by reworking older posts to use the new system. I also plan on adding other features as well in the future.
P.S.
Quite a bit of the styling is done in-line. Unfortunately at the moment it doesn’t seem possible to have Liquid run within CSS. If there is a method I’ll update it to use it. But until then this works and it’s something I plan on improving.
Examples
Before
Default Markdown Method
What I Had Been doing
Top Left
Top Middle
Top Right
Bottom Left
Bottom Middle
Bottom Right
<div style="display:grid;grid-template-columns: 33% 33% 33%;grid-gap:5px">
<!-- Start of what I did for single images with captions. -->
<div>
<img src="/assets/images/old-projects/2D-map.png">
<p>Top Left</p>
</div>
<!-- End of Single -->
<div>
<img src="/assets/images/old-projects/2D-map.png">
<p>Top Middle</p>
</div>
<div>
<img src="/assets/images/old-projects/2D-map.png">
<p>Top Right</p>
</div>
<div>
<img src="/assets/images/old-projects/2D-map.png">
<p>Bottom Left</p>
</div>
<div>
<img src="/assets/images/old-projects/2D-map.png">
<p>Bottom Middle</p>
</div>
<div>
<img src="/assets/images/old-projects/2D-map.png">
<p>Bottom Right</p>
</div>
</div>
After
Single Images
Example of a Single Image With Caption
Example of a Single Image With Caption
Example of a Single Image With Caption. With Modal Disabled.
Code Example
<!-- Jekyll Code (Remove "-" for it to be valid. ) -->
<!-- Only Image -->
{-% include image.html src="/assets/images/old-projects/2D-map.png" %-}
<!-- Image with Caption and Modal Disabled -->
{-% include image.html disableModal=true src="/assets/images/old-projects/2D-map.png" alt="Example of a Single Image With Caption. With Modal Disabled." %-}
<!-- Image With Caption(Alt) -->
{-% include image.html src="/assets/images/old-projects/2D-map.png" alt="Example of a Single Image" %-}
<!-- Generated Result (With Alt and Modal) -->
<div class="image-box">
<div id="image3" class="image-box-modal" >
<img title="Test" src="/assets/images/old-projects/2D-map.png" alt="Test"><p>Test</p>
</div>
<div>
<div id="image3modal" class="modal">
<div class="modal-content">
<div>
<span id="image3modal-close" class="close">×</span>
</div>
<div>
<img title="Test" src="/assets/images/old-projects/2D-map.png" alt="Test"><p>Test</p></div>
</div>
</div>
<script>
// Open Modal Event Listener
document.getElementById("image3").onclick = function () {
document.getElementById("image3modal").style.display = "block";
// One of Two Modal Close Event Listeners (Click outside of Modal)
window.onclick = function (event) {
if (event.target == document.getElementById("image3modal")) {
document.getElementById("image3modal").style.display = "none";
}
}
}
// One of Two Modal Close Event Listeners (Click X to close)
document.getElementById("image3modal-close").onclick = function () {
document.getElementById("image3modal").style.display = "none";
}
</script>
</div>
</div>
Gallery
2 Images Wide
One
One
Two
Two
Three
Three
Four
Four
Five
Five
3 Images Wide
One
One
Two
Two
Three
Three
Four
Four
Five
Five
Code Example of 3 Images Wide
<!-- Jekyll Code (Remove "-" for it to be valid. ) -->
{-% capture imagesForGallery %-}
/assets/images/old-projects/2D-map.png,
/assets/images/old-projects/2D-map.png,
/assets/images/old-projects/2D-map.png,
/assets/images/old-projects/2D-map.png,
/assets/images/old-projects/2D-map.png
{-% endcapture %-}
{-% capture altForGallery %-}
One,
Two,
Three,
Four,
Five
{-% endcapture %-}
{-% include gallery.html minwidth="600px" width=3 images=imagesForGallery alts=altForGallery %-}
<!-- Generated Result -->
<style>
@media (min-width: 600px){
#gallery2{
flex-flow: row wrap;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#gallery2 > div{
width: calc(33% - 2.5px);
}
}
</style>
<div id="gallery2">
<div class="image-box">
<div id="image14" class="image-box-modal" >
<img title="
One" src="
/assets/images/old-projects/2D-map.png" alt="
One"><p>
One</p>
</div>
<div>
<div id="image14modal" class="modal">
<div class="modal-content">
<div>
<span id="image14modal-close" class="close">×</span>
</div>
<div>
<img title="
One" src="
/assets/images/old-projects/2D-map.png" alt="
One"><p>
One</p></div>
</div>
</div>
<script>
// Open Modal Event Listener
document.getElementById("image14").onclick = function () {
document.getElementById("image14modal").style.display = "block";
// One of Two Modal Close Event Listeners (Click outside of Modal)
window.onclick = function (event) {
if (event.target == document.getElementById("image14modal")) {
document.getElementById("image14modal").style.display = "none";
}
}
}
// One of Two Modal Close Event Listeners (Click X to close)
document.getElementById("image14modal-close").onclick = function () {
document.getElementById("image14modal").style.display = "none";
}
</script>
</div>
</div>
<div class="image-box">
<div id="image15" class="image-box-modal" >
<img title="
Two" src="
/assets/images/old-projects/2D-map.png" alt="
Two"><p>
Two</p>
</div>
<div>
<div id="image15modal" class="modal">
<div class="modal-content">
<div>
<span id="image15modal-close" class="close">×</span>
</div>
<div>
<img title="
Two" src="
/assets/images/old-projects/2D-map.png" alt="
Two"><p>
Two</p></div>
</div>
</div>
<script>
// Open Modal Event Listener
document.getElementById("image15").onclick = function () {
document.getElementById("image15modal").style.display = "block";
// One of Two Modal Close Event Listeners (Click outside of Modal)
window.onclick = function (event) {
if (event.target == document.getElementById("image15modal")) {
document.getElementById("image15modal").style.display = "none";
}
}
}
// One of Two Modal Close Event Listeners (Click X to close)
document.getElementById("image15modal-close").onclick = function () {
document.getElementById("image15modal").style.display = "none";
}
</script>
</div>
</div>
<div class="image-box">
<div id="image16" class="image-box-modal" >
<img title="
Three" src="
/assets/images/old-projects/2D-map.png" alt="
Three"><p>
Three</p>
</div>
<div>
<div id="image16modal" class="modal">
<div class="modal-content">
<div>
<span id="image16modal-close" class="close">×</span>
</div>
<div>
<img title="
Three" src="
/assets/images/old-projects/2D-map.png" alt="
Three"><p>
Three</p></div>
</div>
</div>
<script>
// Open Modal Event Listener
document.getElementById("image16").onclick = function () {
document.getElementById("image16modal").style.display = "block";
// One of Two Modal Close Event Listeners (Click outside of Modal)
window.onclick = function (event) {
if (event.target == document.getElementById("image16modal")) {
document.getElementById("image16modal").style.display = "none";
}
}
}
// One of Two Modal Close Event Listeners (Click X to close)
document.getElementById("image16modal-close").onclick = function () {
document.getElementById("image16modal").style.display = "none";
}
</script>
</div>
</div>
<div class="image-box">
<div id="image17" class="image-box-modal" >
<img title="
Four" src="
/assets/images/old-projects/2D-map.png" alt="
Four"><p>
Four</p>
</div>
<div>
<div id="image17modal" class="modal">
<div class="modal-content">
<div>
<span id="image17modal-close" class="close">×</span>
</div>
<div>
<img title="
Four" src="
/assets/images/old-projects/2D-map.png" alt="
Four"><p>
Four</p></div>
</div>
</div>
<script>
// Open Modal Event Listener
document.getElementById("image17").onclick = function () {
document.getElementById("image17modal").style.display = "block";
// One of Two Modal Close Event Listeners (Click outside of Modal)
window.onclick = function (event) {
if (event.target == document.getElementById("image17modal")) {
document.getElementById("image17modal").style.display = "none";
}
}
}
// One of Two Modal Close Event Listeners (Click X to close)
document.getElementById("image17modal-close").onclick = function () {
document.getElementById("image17modal").style.display = "none";
}
</script>
</div>
</div>
<div class="image-box">
<div id="image18" class="image-box-modal" >
<img title="
Five
" src="
/assets/images/old-projects/2D-map.png
" alt="
Five
"><p>
Five
</p>
</div>
<div>
<div id="image18modal" class="modal">
<div class="modal-content">
<div>
<span id="image18modal-close" class="close">×</span>
</div>
<div>
<img title="
Five
" src="
/assets/images/old-projects/2D-map.png
" alt="
Five
"><p>
Five
</p></div>
</div>
</div>
<script>
// Open Modal Event Listener
document.getElementById("image18").onclick = function () {
document.getElementById("image18modal").style.display = "block";
// One of Two Modal Close Event Listeners (Click outside of Modal)
window.onclick = function (event) {
if (event.target == document.getElementById("image18modal")) {
document.getElementById("image18modal").style.display = "none";
}
}
}
// One of Two Modal Close Event Listeners (Click X to close)
document.getElementById("image18modal-close").onclick = function () {
document.getElementById("image18modal").style.display = "none";
}
</script>
</div>
</div>
</div>