Post Images System

This system automatically creates organized image folders for each blog post and provides a simple Jekyll include for referencing images.

Quick Start

1. Create image folders for posts:

   npm run create-post-folders
   

2. Add images to your post’s folder:
   • Each post gets its own folder in assets/images/posts/[post-slug]/
   • Example: 2025-04-2-Getting-Started-With-HDK.md → assets/images/posts/Getting-Started-With-HDK/
3. Use images in your posts: ```liquid

## How It Works

### Folder Structure

assets/images/posts/ ├── Getting-Started-With-HDK/ │ ├── diagram.png │ └── demo.gif ├── Tauri-DragAndDrop-Issues/ │ ├── dragdrop_demo.gif │ └── error_screenshot.png └── [other-post-slugs]/

### Post Slug Generation
The script converts post filenames to folder names:
- `2025-04-2-Getting-Started-With-HDK.md` → `Getting-Started-With-HDK`
- `2026-01-14-Tauri-DragAndDrop-Issues.md` → `Tauri-DragAndDrop-Issues`

## Jekyll Include Usage

The `post_image.html` include provides several options:

### Basic Usage
```liquid















<div>
<figure class="post-image-figure">
<img src="/assets/images/posts//image.png"
alt="image.png"
class="post-image"
/>
<caption class="post-image-caption"></caption>
</figure>
</div>

With Alt Text

<div>
<figure class="post-image-figure">
<img src="/assets/images/posts//screenshot.png"
alt="Application screenshot"
class="post-image"
/>
<caption class="post-image-caption"></caption>
</figure>
</div>

With Caption

<div>
<figure class="post-image-figure">
<img src="/assets/images/posts//chart.svg"
alt="Performance chart"
class="post-image"
/>
<caption class="post-image-caption">Memory usage over time</caption>
</figure>
</div>

With CSS Classes

<div>
<figure class="post-image-figure">
<img src="/assets/images/posts//logo.png"
alt="Logo"
class="small"
/>
<caption class="post-image-caption"></caption>
</figure>
</div>

















<div>
<figure class="post-image-figure">
<img src="/assets/images/posts//banner.jpg"
alt="Banner"
class="full-width"
/>
<caption class="post-image-caption"></caption>
</figure>
</div>

With Custom Dimensions

<div>
<figure class="post-image-figure">
<img src="/assets/images/posts//icon.png"
alt="Icon"
class="post-image"
/>
<caption class="post-image-caption"></caption>
</figure>
</div>

Available CSS Classes

• small - Max width 400px
• medium - Max width 600px
• full-width - 100% width
• Default styling includes hover effects and responsive behavior

Workflow

1. Create a new post (e.g., 2026-01-15-My-New-Post.md)
2. Run the script to create the image folder:

   npm run create-post-folders
   

3. Add your images to assets/images/posts/My-New-Post/
4. Reference images in your markdown using the include: ```liquid

## Benefits

- ✅ **Organized**: Each post has its own image folder
- ✅ **Simple**: Just use the filename, no path needed
- ✅ **Automatic**: Script creates folders for all existing posts
- ✅ **Consistent**: Standardized image styling and structure
- ✅ **Responsive**: Images work well on all device sizes
- ✅ **Accessible**: Proper alt text and semantic HTML

## Manual Folder Creation

If you need to create a folder for a single post manually:

```bash
mkdir "assets/images/posts/Your-Post-Slug"

The post slug follows the pattern of removing the date prefix and .md extension from your post filename.