portfolio-items

Fullscreen Grid Portfolio Item

Fullscreen Grid Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with fullscreen grid layouts 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 fullscreen grid 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       # Fullscreen grid layout grouping
filters:                          # Categorization tags
  - branding
  - corporate

Visual Content Configuration

thumbnail: "/path/to/thumbnail.webp"  # Thumbnail for portfolio listing

galleries:                        # Multiple image galleries
  - title: "First Gallery"        # Optional gallery title
    images:                       # Array 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
      - path: "/path/to/image4.webp"
        col: 4                    # One-third width column
      - path: "/path/to/image5.webp"
        col: 8                    # Two-thirds width column

Image Properties

  • path: Full path to the image file
  • col: Column width using Bootstrap grid system (1-12)

Grid Layout Strategies

  1. Full-width Images
    • Use col: 12 for images spanning entire width
  2. Mixed-width Layouts
    • Combine different column widths
    • Ensure total column width per row does not exceed 12
  3. Recommended Combinations
    • 12 for full-width
    • 6, 6 for two equal columns
    • 4, 8 for asymmetric layouts
    • 4, 4, 4 for three equal columns

Content Structure

Markdown Content

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

## About the Project
<p class="lead">
Introductory lead paragraph explaining the project's essence.
</p>

Detailed project description and context.

<!-- gallery -->  # Placeholder for automatic gallery insertion

<p class="lead">
Additional summary or concluding thoughts.
</p>

<!-- gallery -->  # Second gallery placeholder

Best Practices

Image Selection

  1. Use high-quality, relevant images
  2. Maintain consistent image styles
  3. Tell a visual story
  4. Optimize for web performance

Layout Considerations

  • Balance text and visual content
  • Use gallery titles for context
  • Experiment with column widths
  • Ensure responsive design

Performance Optimization

  • Compress images
  • Use WebP format
  • Implement lazy loading
  • Minimize large image files

Customization Options

  • Multiple galleries per portfolio item
  • Flexible column width configurations
  • Automatic gallery insertion
  • Responsive design

Troubleshooting

  • Verify image paths
  • Check file permissions
  • Ensure consistent image aspect ratios
  • Test on multiple devices and screen sizes

Accessibility Guidelines

  • Provide alt text for images
  • Ensure color contrast
  • Make navigation intuitive
  • Support keyboard interactions

Example Workflow

  1. Select compelling project
  2. Gather high-quality images
  3. Plan gallery layout
  4. Write engaging description
  5. Configure front matter
  6. Review and refine layout