portfolio-items

Snowlake Jekyll Portfolio Layouts Guide

Overview

This guide provides comprehensive documentation for each portfolio layout type in the Snowlake Jekyll theme. Each layout offers unique ways to showcase your projects.

1. Video Layout

Description

Perfect for projects with video content, providing a clean and professional presentation.

Front Matter Example

---
date: 2024-08-02 20:37:13 +0600
layout: portfolio/items/video-layout
title: "Video Project Showcase"
sub_title: "Innovative Video Production"
video_image: "/assets/media/video-thumbnail.jpg"
video: "/assets/media/project-video.mp4"
client: "Creative Media Co."
filters:
  - video
  - branding
---

Unique Features

  • Displays video with custom thumbnail
  • Shows project metadata (date, categories, client)
  • Supports lead paragraph and detailed description

Description

Ideal for projects with multiple images that you want to showcase in an interactive carousel.

Front Matter Example

---
date: 2024-08-02 20:37:13 +0600
layout: portfolio/items/carousel-layout
title: "Multi-Image Project"
sub_title: "Visual Design Journey"
carousel_images:
  - "/assets/media/carousel1.jpg"
  - "/assets/media/carousel2.jpg"
  - "/assets/media/carousel3.jpg"
client: "Design Studio"
filters:
  - design
  - photography
---

Unique Features

  • Interactive image carousel
  • Multiple image display
  • Smooth navigation between project images

3. Multiple Images Layout

Description

Provides a flexible layout for displaying multiple project images in a grid or stacked format.

Front Matter Example

---
date: 2024-08-02 20:37:13 +0600
layout: portfolio/items/multiple-img-layout
title: "Multi-Image Project Showcase"
sub_title: "Comprehensive Visual Story"
images:
  - "/assets/media/project1.jpg"
  - "/assets/media/project2.jpg"
  - "/assets/media/project3.jpg"
  - "/assets/media/project4.jpg"
client: "Visual Arts Agency"
filters:
  - photography
  - multi-image
---

Unique Features

  • Flexible image grid
  • Support for 2-4 images
  • Responsive design

4. Slider Layout

Description

A dynamic layout that presents project images in a sliding presentation.

Front Matter Example

---
date: 2024-08-02 20:37:13 +0600
layout: portfolio/items/slider-layout
title: "Project Slider Showcase"
sub_title: "Interactive Visual Presentation"
slider_images:
  - "/assets/media/slider1.jpg"
  - "/assets/media/slider2.jpg"
  - "/assets/media/slider3.jpg"
client: "Interactive Design"
filters:
  - slider
  - web-design
---

Unique Features

  • Smooth image sliding
  • Full-width image presentation
  • Clean, modern interface

5. Columns Layout

Description

Structured layout presenting project details in a columnar format, great for detailed project information.

Front Matter Example

---
date: 2024-08-02 20:37:13 +0600
layout: portfolio/items/columns-layout
title: "Structured Project Presentation"
sub_title: "Detailed Project Insights"
featured_image: "/assets/media/project-main.jpg"
client: "Enterprise Solutions"
project_details:
  duration: "3 months"
  team_size: "5 members"
filters:
  - web-development
  - consulting
---

Unique Features

  • Organized information display
  • Supports additional project metadata
  • Clean, professional layout

6. Masonry Layout

Description

A dynamic, grid-based layout with varying image sizes, creating an engaging visual presentation.

Front Matter Example

---
date: 2024-08-02 20:37:13 +0600
layout: portfolio/items/masonry-layout
title: "Masonry Portfolio Showcase"
sub_title: "Creative Visual Composition"
masonry_images:
  - "/assets/media/masonry1.jpg"
  - "/assets/media/masonry2.jpg"
  - "/assets/media/masonry3.jpg"
  - "/assets/media/masonry4.jpg"
client: "Creative Collective"
filters:
  - masonry
  - art
---

Unique Features

  • Non-uniform grid layout
  • Dynamic image sizing
  • Modern, artistic presentation

Common Best Practices

  1. Use high-resolution, professionally edited images
  2. Maintain consistent image aspect ratios
  3. Optimize images for web performance
  4. Write clear, concise project descriptions
  5. Choose appropriate layout based on project type

Troubleshooting

  • Ensure image paths are correct
  • Check Jekyll build process
  • Verify front matter matches layout requirements

Customization

Layouts can be further customized by modifying corresponding HTML files in _layouts/portfolio/items/.