post

Markdown Post with Gallery Guide

Markdown Post with Gallery Guide

Overview

This guide explains how to create a Markdown-formatted blog post with an image gallery 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

gallery:                            # Image gallery configuration
  - img: "/path/to/thumbnail1.webp" # Thumbnail image
    full_src: "/path/to/full-image1.webp"  # Full-size image
    alt: "Image Description"        # Alt text
    caption: "Image Caption"        # Optional caption
  - img: "/path/to/thumbnail2.webp"
    full_src: "/path/to/full-image2.webp"
    alt: "Another Image"
    caption: "Another Caption"

Advanced Metadata

badge_color: "bg-meander"          # Optional badge color
trending: true/false                # Mark as trending
meta_title: "SEO Title"            # SEO-optimized title
meta_description: |                # SEO description
  Detailed description of the post
permalink: "/posts/post-slug"      # Custom permalink

{% raw %}{% include posts/gallery-layout.html images=page.gallery %}{% endraw %}

Image Selection

  1. Choose high-quality, visually cohesive images
  2. Maintain consistent image style
  3. Use meaningful captions
  4. Provide descriptive alt text
  5. Optimize image sizes
  • Grid layout
  • Masonry layout
  • Carousel/Slider
  • Lightbox integration
  • Responsive design

Customization Options

  • Control gallery layout
  • Implement image filtering
  • Add hover effects
  • Create interactive galleries
  • Support multiple gallery types

Performance Optimization

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

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

Troubleshooting

  • Verify image file paths
  • Check image loading performance
  • Test gallery responsiveness
  • Validate front matter configuration
  • Ensure cross-browser compatibility

Example Workflow

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