post

Markdown with Image Guide

Markdown Post with Image Guide

Overview

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

Advanced Metadata

badge_color: "bg-leaf"             # 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

Image Integration Techniques

Basic Markdown Image

![Alt Text](/path/to/image.webp)

Kramdown Image with CSS Class

![Image with Class](/path/to/image.webp){:class="img-responsive"}

Image Attributes

![Image with Attributes](/path/to/image.webp){:class="img-responsive" width="800" height="600"}

Responsive Image Best Practices

![Responsive Image](/path/to/image.webp){:class="img-fluid" alt="Descriptive text"}

Image Optimization Techniques

Image Formats

  • Prefer WebP for web performance
  • Provide fallback formats (JPEG, PNG)
  • Use modern image compression techniques

Responsive Image Strategies

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive text" class="img-responsive">
</picture>

Best Practices

Content Writing

  1. Use high-quality, relevant images
  2. Provide descriptive alt text
  3. Optimize image file sizes
  4. Maintain visual consistency
  5. Use images to enhance storytelling

Image Selection

  • Choose clear, high-resolution images
  • Ensure images are contextually relevant
  • Maintain consistent visual style
  • Use professional, engaging visuals

Performance Optimization

  • Compress images
  • Use lazy loading
  • Implement responsive image techniques
  • Minimize image file sizes
  • Use modern image formats

Customization Options

  • Add custom CSS classes
  • Implement image galleries
  • Create responsive layouts
  • Control image positioning
  • Add captions and annotations

SEO Optimization

  • Use descriptive file names
  • Include relevant alt text
  • Optimize image metadata
  • Implement schema.org markup
  • Ensure fast image loading

Accessibility Considerations

  • Provide meaningful alt text
  • Support screen readers
  • Ensure color contrast
  • Use semantic HTML
  • Include image descriptions

Troubleshooting

  • Verify image file paths
  • Check image loading performance
  • Validate Markdown syntax
  • Test responsive behavior
  • Ensure cross-browser compatibility

Example Workflow

  1. Select compelling images
  2. Optimize image files
  3. Write descriptive alt text
  4. Integrate images in Markdown
  5. Apply responsive techniques
  6. Review and refine
  7. Publish