Using Powershell to Resize Images for Gamma Gallery

One of my colleagues fell in love with this photo gallery: Gamma Gallery

It uses the device width to determine which images to load to achieve a fluid, responsive, mobile-friendly image grid. Cool stuff. But it requires that seven different sizes be available for each image. For him, that meant manually resizing around 100 photos, or trying to find a tool that could do it. We couldn’t find anything so I created a script for it.

If you look at the plugin, it requires the following:

<ul class="gamma-gallery"> 
<div data-alt="img01" data-description="<h3>Assemblage</h3>" data-max-width="1800" data-max-height="2400">
<div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div>
<div data-src="images/xxlarge/1.jpg" data-min-width="1000"></div>
<div data-src="images/xlarge/1.jpg" data-min-width="700"></div>
<div data-src="images/large/1.jpg" data-min-width="300"></div>
<div data-src="images/medium/1.jpg" data-min-width="200"></div>
<div data-src="images/small/1.jpg" data-min-width="140"></div>
<div data-src="images/xsmall/1.jpg"></div>
<img src="images/xsmall/1.jpg" alt="img01"/>
</noscript> </div> </li> <li> <!-- ... --> </li> <!-- ... --> </ul>

So, for each image, we need to drop a resized version of it into one of seven folders. Here’s the powershell script that does just that:

$targetFolders = @{ 
$myEncoder = [System.Drawing.Imaging.Encoder]::Quality 
$encoderParams = New-Object System.Drawing.Imaging.EncoderParameters(1)
$encoderParams.Param[0] = New-Object System.Drawing.Imaging.EncoderParameter($myEncoder, 100)
$myImageCodecInfo = [System.Drawing.Imaging.ImageCodecInfo]::GetImageEncoders()|where {
$_.MimeType -eq 'image/jpeg'
$originalImagesDirectory = "C:\YOURDIRECTORY\originalImages" $newImagesDirectory = "C:\YOURDIRECTORY\newImages"
Remove-Item $newImagesDirectory\* 
$targetFolders.GetEnumerator() | 
% {
New-Item ($newImagesDirectory +'\' + $_.key) -type directory
Function ResizeImage ($targetWidth, $targetImage) { 
   #compute the ratio to use - width dependent only 
$ratio = $targetWidth / $bmp.Width;
   #create resized bitmap 
$newWidth = [int] ($bmp.Width*$ratio)
$newHeight = [int] ($bmp.Height*$ratio)
$bmpResized = New-Object System.Drawing.Bitmap($newWidth, $newHeight)
$graph = [System.Drawing.Graphics]::FromImage($bmpResized)
$graph.DrawImage($bmp,0,0 , $newWidth, $newHeight)
return $bmpResized
Get-ChildItem $originalImagesDirectory | 
$fileLocation = $_.FullName
$fileName = $_.Name
if (!(Test-Path $fileLocation)){throw( "Cannot find the source image")}
$bmp = [System.Drawing.Image]::FromFile($fileLocation)
   $targetFolders.GetEnumerator() | 
% {
$newTarget = ($newImagesDirectory +'\' + $_.key + '\' + $fileName)
Write-Host "targeting image $fileLocation to be dropped at $newTarget"
if ($bmp.Width -gt $_.value){
$newImage = ResizeImage -targetWidth $_.value -targetImage $bmp
$newImage.Save($newTarget, $myImageCodecInfo, $($encoderParams))
Copy-Item $fileLocation $newTarget
Write-Host "done"

Thanks for reading!