Add Image Gallery for the All Images in Markdown Post
Recently, I got a question asking about the functionality to make image pop up so viewer can have a better look at it. I’m not sure what is the common name of the functionality (popup image? image gallery?), but I happens to have thought about the same feature long time ago, but never started implementation. So I thought this would be the good time to start it!
And it took whole friday night because I didn’t know that element.src and element.getAttribute(src) returns different thing
Extension Candidates
Apparently, there are many image gallery Javascript/JQuery extensions.
Since I have NO idea about which is better, I simply went to their github and tried the one that are still actively maintained. Which was PhotoSwipe. But it had a huge problem. It does not support auto calculation of the image size!
After some digging, I found a perfect candidate LightBox plugin for the Jekyll. It’s very simple and easy to play with. I had to make some change so it can be used with Hydejack theme.
I highly appreciate for the Jekyll Codex. Codex done all the hard work and made my day easier.
What it does
The Jekyll converts markdown image syntax  to html like <p><img src="src_path" alt="alt_txt"></p>. But what we need is img tag surrounded by anchor tag.
So the modified version of lightbox.js parses all the img tag and wrap it with a tag before doing anything else. If you want particular image not to be touched, put no-lightbox class to it.
Example:
Left: LightBox on / Right: LightBox off
You need bigger image to maximize Neo’s cuteness.
Markdown:
{:.no-lightbox}
Implementation
If you think code speaks all, here is the link to the commit.
Download Necessary Files
The plugin comes with two files. lightbox.js and lightbox.css. Save those to the /assets/js & /assets/css accordingly.
The given link to the lightbox.js is not identical to the one from the original page. I have made some changes to it and it is necessary for you to download the fixed version to run it in Hydejack blog.
_config.yml
Simply puts below option to anywhere.
(Somewhere around # 3rd Party Integrations would be sufficient)
# file: "_config.yml"
lightbox: true
links-static.html
Add below to the end of the file so the css file can be linked.
<!-- file: "_includes/head/links-static.html" -->
{% if site.lightbox %}
<link rel="stylesheet" href="/assets/css/lightbox.css">
{% endif %}
my-scripts.html
Import js script file that we’ve downloaded, and use Hydejack event listener so the code can be executed every time the new page gets loaded.
<!-- file: "_includes/my-scripts.html" -->
{% if site.lightbox %}
<script src="/assets/js/lightbox.js"></script>
{% endif %}
<script>
document
.getElementById("_pushState")
.addEventListener("hy-push-state-load", function () {
apply_lightbox();
});
</script>
Remove LightBox Effect From a Blog Layout
As @metehanozdeniz mentioned on a comment, LightBox also affects blog layout so if you click the image from a list of posts, it will lead you to a post page and image will be displayed on a pop up. Which require a viewer to click on a background to close the image pop up.
I have made the commit to fix this issue.
_includes/components/post.html
<!-- file: "_includes/components/post.html" -->
<!-- ... -->
{% assign no_lightbox = include.no_lightbox %}
<!-- ... -->
<div class="img-wrapper lead aspect-ratio sixteen-nine flip-project-img">
<!-- {% include_cached components/hy-img.html img=post.image alt=post.title width=864 height=486 %} -->
{% include_cached components/hy-img.html img=post.image alt=post.title width=864 height=486 %}
{% if no_lightbox %}
{% include_cached components/hy-img.html img=post.image alt=post.title class="no-lightbox" width=864 height=486 %}
{% else %}
{% include_cached components/hy-img.html img=post.image alt=post.title width=864 height=486 %}
{% endif %}
</div>
<!-- ... -->
_layouts/blog.html
<!-- file: "_layouts/blog.html" -->
<!-- ... -->
<!-- {% include_cached components/post.html post=post no_link_title=page.no_link_title no_excerpt=page.no_excerpt hide_image=page.hide_image %} -->
{% include_cached components/post.html post=post no_link_title=page.no_link_title no_excerpt=page.no_excerpt hide_image=page.hide_image no_lightbox=true %}
<!-- ... -->
