post

Markdown Post with Carousel Guide

Markdown Post with Carousel Guide

Overview

This guide explains how to create a Markdown-formatted blog post with a carousel using the Snowlake Jekyll theme.

Front Matter Configuration

Layout and Basic Information

layout: posts/post                # Required layout for post
title: "Post Title"               # Main title of the blog post
date: YYYY-MM-DD HH:MM:SS +TIMEZONE  # Publication date and time

Categorization and Metadata

categories: [category1, category2]  # Post categories
tags: [tag1, tag2]                  # Post tags
author: "Author Name"               # Post author
post_image: "/path/to/featured-image.webp"  # Featured post image

post_format: "carousel"            # Indicates carousel post type
gallery:                            # Carousel image configuration
  - img: "/path/to/image1.webp"     # Image paths
  - img: "/path/to/image2.webp"
  - img: "/path/to/image3.webp"

Advanced Metadata

badge_color: "bg-purple"           # Optional badge color
meta_title: "SEO Title"            # SEO-optimized title
meta_description: |                # SEO description
  Detailed description of the post
permalink: "/posts/post-slug"      # Custom permalink

{% raw %}
# Gallery Layout
{% include posts/gallery-layout.html images=page.gallery %}

# Carousel Layout
{% include posts/carousel-layout.html images=page.gallery id="unique-carousel-id" %}
{% endraw %}

Image Selection

  1. Choose high-quality, visually cohesive images
  2. Maintain consistent image style
  3. Optimize image sizes
  4. Use meaningful captions
  5. Provide descriptive alt text
  • Responsive layout
  • Touch-friendly interactions
  • Smooth transitions
  • Navigation controls
  • Autoplay options

Customization Options

  • Control carousel behavior
  • Implement custom transitions
  • Add navigation controls
  • Create multi-carousel layouts
  • Support touch and mouse interactions

Performance Optimization

  • Use WebP image format
  • Implement lazy loading
  • Compress images
  • Minimize initial page load time
  • Use efficient carousel libraries

SEO Considerations

  • Add descriptive alt text
  • Use meaningful file names
  • Implement schema.org markup
  • Optimize image metadata
  • Support image search indexing

Accessibility Guidelines

  • Provide comprehensive alt text
  • Support keyboard navigation
  • Ensure color contrast
  • Add ARIA labels
  • Support screen readers
  • Implement pause/play controls

Troubleshooting

  • Verify image file paths
  • Check carousel loading performance
  • Test responsive behavior
  • Validate front matter configuration
  • Ensure cross-browser compatibility

Example Workflow

  1. Select compelling images
  2. Prepare image assets
  3. Configure carousel metadata
  4. Write descriptive content
  5. Implement carousel layout
  6. Review and refine
  7. Publish
  • Support multiple carousel types
  • Create filterable carousels
  • Implement image zoom
  • Add image metadata
  • Support lightbox interactions
  • Create responsive galleries