Markdown: A Script toPaste an Image


A Markdown-Jekyll Powershell script to simplify pasting images into a Jekyll blog post.

You can paste an image directly into some Markdown editors, but this often results in the image being saved in the root folder of the project with a bland filename. This script allows you to save the image to a specified media folder with a meaningful filename and generates the appropriate Markdown syntax for easy inclusion in your documents.

About the Script

  • Copy image on clipboard to /media folder (or specified folder)
  • Prompt for filename (with default based on date/time)
  • Output Markdown syntax to reference the image
  • Markdown is copied to clipboard for easy pasting
  • Provides 2 formats for image reference
    • Standard Markdown
    • Custom resizing image macro for a Jekyll site
    • Having both allows the image to viewed in the editor’s preview.
      • Can delete or comment out the Markdown syntax version.

Usage:

The script, as below is saved to ` .\scripts\SaveClipboardImage.ps`
Copy an image to clipboard, then run the script from a PowerShell terminal:

   .\scripts\SaveClipboardImage.ps1 [-MediaFolder <path>]

The Script

# SaveClipboardImage.ps1
param(
    [string]$MediaFolder = "media"
)

# Ensure media folder exists
if (-not (Test-Path $MediaFolder)) {
    New-Item -ItemType Directory -Path $MediaFolder | Out-Null
}

# Get image from clipboard
Add-Type -AssemblyName System.Windows.Forms
$image = [System.Windows.Forms.Clipboard]::GetImage()

if ($null -eq $image) {
    Write-Host "❌ No image found in clipboard."
    exit
}

# Generate default filename
$defaultFileName = "image-$((Get-Date).ToString('yyyyMMdd-HHmmss')).png"

# Prompt user for filename (default shown in brackets)
$inputFileName = Read-Host "Enter filename (default: $defaultFileName)"
if ([string]::IsNullOrWhiteSpace($inputFileName)) {
    $fileName = $defaultFileName
} else {    
    # Ensure .png extension if missing
    if (-not $inputFileName.EndsWith(".png")) {
        $inputFileName += ".png"
    }
    $fileName = $inputFileName
}

$filePath = Join-Path $MediaFolder $fileName
$filePath = ".\" + $filePath 

# Save image
$image.Save($filePath, [System.Drawing.Imaging.ImageFormat]::Png)

# Output Markdown syntax
$markdown = "![${fileName}](/${MediaFolder}/${fileName}"
$markdownAlt = "<See below, in red box>"
$merged = "$markdown`n$markdownAlt"
write-host ""
Write-Host  -ForegroundColor DarkMagenta  "Image saved to $filePath"
write-host ""
Write-Host -ForegroundColor Blue  "Markdown:"
Write-Host -ForegroundColor Green  $merged
Write-Host -ForegroundColor Blue "Copied to clipboard."
# $merged | Set-Clipboard
write-host ""
Write-Host -ForegroundColor Red "Paste Markdown from clipboard."
Write-Host -ForegroundColor Red "Make sure that the tag is unique for the page."
write-host ""

Jekyll Include Macro Format

The $markdownAlt line is as follows (in the red box):

This uses the custom Jekyll image.html include to render images with resizing capabilities.

Comment

Whilst you can directly paste an image into some Markdown editors, having the image saved in the media folder and referenced via Markdown syntax ensures better organization and portability of your content. When you do directly paste an image, it is saved in the root folder of the project with a bland filename, which is not ideal.

This script enables you to paste an image into a specified folder, prompt for a meaningful filename, and generate the appropriate Markdown syntax for easy inclusion in your documents.

Nb: The tag property needs to be different for each image on a page, when using the Jekyll include macro. This may need to be manually modified once the Markdown is pasted into the editor.

Making life easier! 😃

 TopicSubtopic
<  Prev:   GitHub
   
 This Category Links 
Category:Web Sites Index:Web Sites
<  Prev:   Jekyll-Markdown