portfolio-items

Slider Portfolio Item Guide

Slider Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with slider-based layouts using the Snowlake Jekyll theme.

Front Matter Configuration

General Metadata

date: YYYY-MM-DD                  # Publication date of the portfolio item
layout: portfolio/items/slider-layout  # Required layout for slider 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: slider                # Slider layout grouping
filters:                          # Categorization tags
  - branding
  - corporate

Visual Content Configuration

thumbnail: "/path/to/thumbnail.webp"  # Thumbnail for portfolio listing
big_image: "/path/to/big-image.webp"  # Large featured image
link: "/"                         # Optional link to project details
slider_images:                    # Array of images for slider
  - "/path/to/slider-image1.webp"
  - "/path/to/slider-image2.webp"
  - "/path/to/slider-image3.webp"

Slider Configuration

Image Selection Guidelines

  • Recommended number of images: 3-6
  • Use high-quality, visually cohesive images
  • Maintain consistent image style and aspect ratio
  • Represent different aspects of the project

Slider Behavior

  • Automatic sliding
  • Manual navigation controls
  • Responsive design
  • Touch-friendly for mobile devices
  • Supports pause and play functionality

Content Structure

Markdown Content Guidelines

---
# 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.

### Features:
- Feature 1
- Feature 2
- Feature 3

Additional project insights or background information.

[See Project](#)  # Optional project link

Best Practices

Image Preparation

  1. Use high-resolution images
  2. Optimize for web performance
  3. Maintain visual consistency
  4. Tell a visual story through images
  5. Compress images without losing quality

Content Strategy

  • Craft engaging project descriptions
  • Use <p class="lead"> for prominent text
  • Include key features or highlights
  • Provide context and background
  • Keep text concise and informative

Slider Design Considerations

  • Ensure smooth image transitions
  • Provide clear navigation controls
  • Support keyboard and touch interactions
  • Implement responsive design
  • Optimize for different screen sizes

Customization Options

  • Adjust number of slider images
  • Customize slider navigation
  • Control slide duration and transition effects
  • Add captions or overlays
  • Implement custom slider behaviors

Performance Optimization

  • Use WebP image format
  • Compress and resize images
  • Implement lazy loading
  • Minimize initial page load time
  • Use responsive image techniques

Accessibility Guidelines

  • Provide alt text for all images
  • Ensure keyboard navigability
  • Support screen readers
  • Maintain sufficient color contrast
  • Add ARIA labels for slider controls

Troubleshooting

  • Verify image paths
  • Check file permissions
  • Ensure image compatibility
  • Test on multiple devices and browsers
  • Validate front matter configuration

Example Workflow

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

Technical Considerations

  • Compatible with modern browsers
  • Uses responsive slider component
  • Supports touch and mouse interactions
  • Lightweight and performant
  • Flexible customization options

Slider Interaction Modes

  1. Automatic Sliding
    • Configurable slide duration
    • Smooth transitions
  2. Manual Navigation
    • Prev/Next buttons
    • Thumbnail navigation
  3. Touch Interactions
    • Swipe gestures
    • Mobile-friendly controls

SEO and Metadata

  • Add descriptive slider title
  • Include relevant keywords
  • Provide comprehensive description
  • Use schema.org image gallery markup
  • Optimize for search engines