portfolio-items

Product Portfolio Item Guide

Product Portfolio Item Guide

Overview

This guide explains how to create a portfolio item for product showcases using the Snowlake Jekyll theme.

Front Matter Configuration

Layout and Basic Information

layout: portfolio/items/multiple-img-layout  # Required layout for product portfolio
title: "Product Name"             # Product or project title
sub_title: "Product Category"     # Optional subcategory or description

Visual Assets

sm_img: "/path/to/small-image.webp"    # Small thumbnail image
big_img: "/path/to/large-image.webp"   # Larger featured image
header_image: "/path/to/header-bg.webp"  # Full-width header background

client: "Client Name"             # Company or client associated with the product
link: "/"                         # Optional link to product page or website

Categorization

grouped_by: product_items         # Grouping for product portfolios
filters:                          # Categorization tags
  - corporate
  - design

Image Galleries

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

Content Structure

Markdown Content Guidelines

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

<p class="lead">
Introductory lead paragraph highlighting product essence or key value proposition.
</p>

Detailed product description and context.

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

<p class="lead">
Additional summary or product features overview.
</p>

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

Image Properties

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

Grid Layout Strategies

  1. Full-width Product Shots
    • Use col: 12 for comprehensive product images
  2. Comparative Layouts
    • Mix column widths to show different perspectives
    • Ensure total column width per row does not exceed 12
  3. Recommended Layouts
    • 12 for full-width hero images
    • 6, 6 for side-by-side comparisons
    • 4, 8 for detailed views
    • 4, 4, 4 for multiple product angles

Best Practices

Product Visualization

  1. Use high-quality, professional images
  2. Show product from multiple angles
  3. Include context or usage scenarios
  4. Maintain consistent image style
  5. Highlight unique product features

Content Strategy

  • Craft compelling product descriptions
  • Focus on benefits and unique selling points
  • Use clear, concise language
  • Include technical specifications if relevant

Performance Optimization

  • Compress product images
  • Use WebP format
  • Implement lazy loading
  • Optimize image sizes

Customization Options

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

Troubleshooting

  • Verify image paths and permissions
  • Ensure consistent image aspect ratios
  • Test responsiveness across devices
  • Check gallery placeholder usage

Accessibility Considerations

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

Example Workflow

  1. Gather high-quality product images
  2. Plan gallery layout
  3. Write compelling product description
  4. Configure front matter
  5. Add galleries and placeholders
  6. Review and refine presentation