portfolio-items

Masonry Portfolio Item

Masonry Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with masonry-style image layouts using the Snowlake Jekyll theme.

Front Matter Configuration

General Metadata

date: YYYY-MM-DD                  # Publication date of the portfolio item
layout: portfolio/items/masonry-layout  # Required layout for masonry portfolio
title: "Portfolio Item Title"     # Main title of the portfolio item
sub_title: "Subtitle Description" # Optional subtitle
background_image: "/path/to/background-image.webp"  # Background image for the portfolio item

Client Information

client: "Client Name"        # Name of the client or organization

Categorization and Images

filters:                          # Categorization tags
  - branding
  - corporate

masonry_images:                   # Masonry image configuration
  - thumbnail: "/path/to/thumbnail1.webp"  # Thumbnail image for grid view
    full_size: "/path/to/full-image1.webp" # Full-size image for lightbox/modal
    col: 6                        # Column width (Bootstrap grid system)
  - thumbnail: "/path/to/thumbnail2.webp"
    full_size: "/path/to/full-image2.webp"
    col: 6
  # Add more images as needed

Masonry Image Configuration

Image Properties

  • thumbnail: Smaller image displayed in the masonry grid
  • full_size: High-resolution image for detailed view
  • col: Column width (1-12) determining image size in the grid

Grid Layout Tips

  • Use consistent col values for balanced layout
  • Recommended combinations:
    • All images col: 6 for equal-width two-column layout
    • Mix of col: 4 and col: 8 for varied grid appearance
    • Ensure total column width per row does not exceed 12

Content Sections

Project Description

Use standard Markdown and HTML to describe the project:

  • Use <p class="lead"> for prominent introductory or summary paragraphs
  • Add descriptive text about the project
  • Markdown and HTML are both supported

Example Structure

---
# Front Matter (as described above)
---

## About the Project
<p class="lead">Project overview or key highlights.</p>

Detailed project description and context.

Image Guidelines

  1. Thumbnail and Full-Size Images

    • Provide both thumbnail and full-size versions
    • Thumbnails should be smaller, optimized for grid display
    • Full-size images for detailed viewing

  2. Image Optimization

    • Use WebP format for best performance
    • Compress images without losing quality
    • Maintain consistent aspect ratios
    • Use descriptive file names

Best Practices

  1. Choose high-quality, relevant images
  2. Maintain visual consistency
  3. Optimize images for web performance
  4. Use meaningful titles and descriptions
  5. Ensure images complement the project narrative

Troubleshooting

  • Verify image paths and file permissions
  • Check front matter syntax
  • Ensure image sizes are appropriate
  • Test responsiveness on different devices