Creating a Custom Portfolio Gallery with Masonry Layout in Jekyll

Creating a visually appealing and organized portfolio gallery is essential for showcasing your work effectively. In Jekyll, a static site generator, you can customize your portfolio layout using Masonry, a grid layout library that arranges items in an optimal position based on available vertical space. This guide will walk you through the steps to create a custom portfolio gallery with a Masonry layout in Jekyll.

Setting Up Your Jekyll Project

Begin by creating or opening your Jekyll project. Ensure you have a folder for your portfolio items, typically under _posts or a custom collection. Organize your images and descriptions within this folder. Next, install necessary dependencies, such as Masonry.js, by downloading it or linking to a CDN.

Including Masonry in Your Site

Add the Masonry library to your site by inserting the following script tag into your _includes or directly into your _layouts file, typically in the head or before the closing </body> tag:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Creating the Portfolio Grid

Next, create a grid container in your HTML where your portfolio items will be displayed. Use a class like .grid for styling. Each item should be wrapped in an element with a class, such as .grid-item.

Example HTML structure:

<div class="grid">

<div class="grid-item">Content 1</div>

<div class="grid-item">Content 2</div>

<div class="grid-item">Content 3</div>

</div>

Initializing Masonry with JavaScript

To activate Masonry, add a JavaScript snippet that initializes Masonry on your grid container after the page loads. You can include this in a script tag at the bottom of your page or in an external JS file.

Example script:

<script>

document.addEventListener('DOMContentLoaded', function() {

var grid = document.querySelector('.grid');

new Masonry(grid, {

itemSelector: '.grid-item',

columnWidth: '.grid-sizer',

percentPosition: true

});

});

</script>

Styling Your Portfolio

Apply CSS styles to your grid and items to enhance appearance. For example:

.grid {

display: block;

margin: 0 auto;

}

.grid-item {

width: 30%;

margin-bottom: 20px;

background-color: #f0f0f0;

padding: 10px;

box-sizing: border-box;

}

Final Tips

Test your gallery on different devices to ensure responsiveness. Adjust CSS widths and Masonry options as needed. With these steps, you can create a dynamic, responsive portfolio gallery that showcases your work beautifully using Jekyll and Masonry.