Jekyll: Image Trannsform Script


Have previously added some functionality to the blog site to make images more viewable in a phone by constraining image widths on the phone to 600px so that the post text remains as full with.

An include file image.htmlis used in Jekyll:
Upon being built, the following:

… is replaced by:

Previously, when authoring a page, the first format was used to check references to the image file and then that was manually transformed into the second format. This process was error-prone and time-consuming, especially for posts with many images. The new script automates this transformation, making it faster and more reliable.

The script uses a REGEX patter search for the standard Markdown image syntax and transforms it to the second format having identified the image file path and the alt property; which is used for the tag.

Usage: scripts\transform-image.ps1 -FileName "yourfile.md"

  • The script transform-image.ps1 is located in the scripts folder.
  • The file is assumed to be in the _posts folder
# PowerShell script to convert Markdown image syntax to Jekyll include format
# Usage: scripts\transform-image.ps1 -FileName "yourfile.md"


param(
    [Parameter(Mandatory=$true)]
    [string]$FileName
)


# Prepend _posts/ to filename and get full path from repo root
$RepoRoot = Resolve-Path "$PSScriptRoot\.." | Select-Object -ExpandProperty Path
$FullPath = Join-Path $RepoRoot "_posts\$FileName"
if (!(Test-Path $FullPath)) {
    Write-Error "File not found: $FullPath"
    exit 1
}

$content = Get-Content $FullPath -Raw

# Regex pattern for Markdown image
$pattern = '!\[([^\]]*)\]\(([^)]+)\)'
$replacement = '

<div id="$1" style="Display:none">
    <img src="$2" alt="">
</div>

<div id="$1small" style="Display:none">
    <a href="$2" target="_blank"><img src="$2" width="360" alt=""></a>
<br /><small><i>Tap and rotate phone to enlarge.</i></small>
</div>

<script>
    if (document.body.clientWidth >=680 )
    {
        document.getElementById('$1').style.display = "block";
        document.getElementById('$1small').style.display = "none";
    }
    else
    {
        document.getElementById('$1').style.display = "none";
        document.getElementById('$1small').style.display = "block";
    }
</script>

    '

# Replace all Markdown images
$newContent = [System.Text.RegularExpressions.Regex]::Replace($content, $pattern, $replacement)



# Backup original file as file.md.bak
$backupPath = "$FullPath.bak"
if ($FullPath -match "\.md$") {
    $backupPath = $FullPath + ".bak"
}

# Only transform if backup does not exist
if (Test-Path $backupPath) {
    Write-Host "Backup file $backupPath already exists. No transformation performed."
    Write-Host "To reverse a previous transformation, delete the .md file and rename the .md.bak file to .md."
    exit 0
}

Copy-Item $FullPath $backupPath -Force

# Write the new content back to the file
Set-Content $FullPath $newContent

Write-Host "Conversion complete. Backup saved as $backupPath"
Write-Host "To reverse this transformation, delete the .md file and rename the .md.bak file to .md."

When run, a back up file is created (the filename with .bak post-pended). If it exists then the process is aborted. That way, the original markdown is never overwritten.

Also, The script is now called with a build actioned by the buildjekyl.ps1 script such that it is called before the build on the last post file created . scripts\buildjekyl.ps1 -B.

Also the build ignores .bak file via an exclude entry in the _config.yml file.

exclude: ["*.md.bak"]

Conclusion

You can now author a post page and check how images appear in the VS Markdown preview without having to manually adjust the image syntax. Then when ready you can do a local run to further test. When satisfied you can do a seamless transform of the image syntax, build and deploy using the buildjekyl script.

 TopicSubtopic
   
 This Category Links 
Category:Application Dev Index:Application Dev
<  Prev:   Photo Finish