Responsive Image Gallery in Jekyll

Image

If your website is powered by Jekyll, you already know how to insert images in markdown Jekyll posts. Simple rigth? But there might come a time when you need to add several images to a post or page and present them in a tiled layout (side by side) with a responsive and fluid design. This is possible by using an adaptive CSS layout.

With a little of CSS magic we can add images in a tiled fashion that adapt and responds to any device. Here’s a small snippet of code I’ve used on other projects that does the job well. It’s simple, light weight, and extremely easy to customize.

Step 1: CSS Styles

Copy the CSS styles to your site’s stylesheet

    /* Responsive Tiled Photo Gallery */
    .galleryWrap
    {
        overflow: hidden;
        margin: 10px;
    }
    .pictureBox
    {
        float: left;
        position: relative;
        width: 20%;
        padding-bottom: 20%;
    }
    .innerBox
    {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        overflow: hidden;
    }
    .innerBox img
    {
        width: 100%;
    }
    .innerBox .titleBox
    {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-bottom: -50px;
        background: #000;
        background: rgba(0, 0, 0, 0.5);
        color: #FFF;
        padding: 10px;
        text-align: center;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .innerBox:hover .titleBox
    {
        margin-bottom: 0;
    }
    @media only screen and (max-width : 480px)
    {
        /* Smartphone view: 1 tile */
        .pictureBox
        {
        width: 100%;
        padding-bottom: 100%;
        }
    }
    @media only screen and (max-width : 650px) and (min-width : 481px)
    {
        /* Tablet view: 2 tiles */
        .pictureBox
        {
        width: 50%;
        padding-bottom: 50%;
        }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px)
    {
        /* Small desktop / ipad view: 3 tiles */
        .pictureBox
        {
        width: 33.3%;
        padding-bottom: 33.3%;
        }
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px)
    {
        /* Medium desktop: 4 tiles */
        .pictureBox
        {
        width: 25%;
        padding-bottom: 25%;
        }
    }

Step 2: HTML Markup

Add the following HTML markup to your post or page. You would need to modify the source path for your images

    <div class="galleryWrap">
        <div class="pictureBox">
            <div class="innerBox">
                <img src="/assets/posts/2017-01-03-responsive-image-gallery-for-your-site/Gallery_Image_01.png">
                <div class="titleBox">Image 1</div>
            </div>
        </div>
        <div class="pictureBox">
            <div class="innerBox">
                <img src="/assets/posts/2017-01-03-responsive-image-gallery-for-your-site/Gallery_Image_02.png">
                <div class="titleBox">Image 2</div>
            </div>
        </div>
        <div class="pictureBox">
            <div class="innerBox">
                <img src="/assets/posts/2017-01-03-responsive-image-gallery-for-your-site/Gallery_Image_03.png">
                <div class="titleBox">Image 3</div>
            </div>
        </div>
        <div class="pictureBox">
            <div class="innerBox">
                <img src="/assets/posts/2017-01-03-responsive-image-gallery-for-your-site/Gallery_Image_05.png">
                <div class="titleBox">Image 5</div>
            </div>
        </div>
        <div class="pictureBox">
            <div class="innerBox">
                <img src="/assets/posts/2017-01-03-responsive-image-gallery-for-your-site/Gallery_Image_06.png">
                <div class="titleBox">Image 6</div>
            </div>
        </div>
    </div>

Step 2: Enjoy results

This is what you get when you apply the syles above to the HTML markup from step 1. To test the responsiveness and fuidity of the layout, resize your browser to different widths and you should see how the images adapt depending on the width.

Image 1
Image 2
Image 3
Image 5
Image 6

There are many tutorials out there that show more advanced functionality for an image gallery. If you find something better, please share!


Me

Luis Cabrera is a family man and a dedicated dad. He lives in Florida, where he works as an Applications Architect for one of the most recognizable brands in the US. In his spare time, Luis likes to develop apps using ionic and Firebase. Aside from technology and family, he enjoys the outdoors and working on his horse farm.

Older posts...

Written by

Get in touch!

Notice any mistakes?
Leave me a message