portfolio-items

Multi-Image Portfolio Item

Multi-Image Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with multiple image galleries using the Snowlake Jekyll theme.

Front Matter Configuration

General Metadata

date: YYYY-MM-DD                  # Publication date of the portfolio item
layout: portfolio/items/multiple-img-layout  # Required layout for multi-image portfolio
title: "Portfolio Item Title"     # Main title of the portfolio item
sub_title: "Subtitle Description" # Optional subtitle
header_image: "/path/to/header-image.webp"  # Full-width header image

Client Information

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

Categorization

grouped_by: fullscreen_grid       # Layout grouping method
filters:                          # Categorization tags
  - branding                      # Example tags: branding, design, corporate, etc.
  - corporate

Visual Content

thumbnail: "/path/to/thumbnail.webp"  # Thumbnail image for portfolio listing
galleries:                        # Multiple image galleries
  - title: "First Gallery"        # Gallery title (optional)
    images:                       # List of images in the gallery
      - path: "/path/to/image1.webp"
        col: 12                   # Column width (Bootstrap grid system)
      - path: "/path/to/image2.webp"
        col: 6                    # Half-width column
  - title: "Second Gallery"       # Additional gallery
    images:
      - path: "/path/to/image3.webp"
        col: 12                   # Full-width image

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
  • Use <!-- gallery --> comments as placeholders for automatic gallery insertion

Example Structure

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

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

Detailed project description and context.

<!-- gallery -->

Additional project details or insights.

<!-- gallery -->
  • Support multiple galleries per portfolio item
  • Use Bootstrap column classes (1-12) to control image layout
  • Recommended image formats: WebP for optimal performance
  • Consistent image aspect ratios improve visual appeal

Best Practices

  1. Use high-quality, relevant images
  2. Provide meaningful titles and descriptions
  3. Optimize images for web (compress, use WebP)
  4. Maintain consistent styling across portfolio items
  5. Use descriptive file names for images

Troubleshooting

  • Ensure image paths are correct
  • Check image file permissions
  • Verify front matter syntax
  • Use Jekyll’s built-in validation