Jan 25, 2015

Automate your portfolio update

The repeating steps needed when (re)building a portfolio from scratch can be tiresome: taking screenshots, creating thumbnails and exporting preview versions of print pdfs. This can help you out.

Compile a list of projects to shed light on

# urllist

http://example.com/project.html
http://sideproject.com/hello.html

In the next step, a script will fetch the list, generate filenames from domain names and use cutycapt to create screenshots and store them in a generated folder (source).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/bin/bash

output="automagic"
urls=$(cat "urllist")

if [ ! -e $output ]; then
mkdir -p $output
fi

i=1
for url in $urls; do
    # Convert url to file name
    path=$(echo $url | sed -e 's/http:\/\/domain\.name\///g')
    if [ -z $path ]; then
        path=home
    fi
    escaped=$(echo $path | sed -e 's/http:\/\///g' | sed -e 's/\..*$//g')
    printf -v filename "%s.png" "$escaped"

    # Begin capture
    echo "Generating $filename..."
    cutycapt --url="$url" --out="$output/$filename" \
    --min-width=1024 --min-height=768 > /dev/null 2>&1
    i=$(($i + 1))
done

Image Works

Cropping the screenshots to 1024x768 and generate a corresponding thumbnail.

for img in $output/*.png; do convert -gravity north $img -crop 1024x768 $img; done
for img in $output/*.png; do convert -resize 288x192 $img; done

More post-processing, using pngquant to do filesize optimization

for img in *.png; do convert $img -resize 512x384 -quality 1 thumb_$img; done
pngquant -f thumb_*.png
rename -f 's/\-fs8//' thumb_*.png

Create preview images from CMYK print PDFs. Beware of used ICC color profile paths - they will be missing or differ in path or name on your system. ImageMagicks "convert" is for PDF-conversion a wrapper to ghostscript and is less performant but I feel has a better UI for first-time users. Test which line serves you best.

# imagemagick: pdf -> png
for i in *.pdf; do convert -verbose -density 300 $i[0] -profile ~/.local/share/color/icc/ISOcoated_v2_300_eci.icc -profile /usr/share/color/icc/sRGB.icc -resize 1024x768+0+0 -crop 1024x768+0+0 $i.png; done
pngquant -f *.png
rename -f 's/\-fs8//' *.png

# imagemagick: pdf -> jpg (progressive jpgs)
for i in *.pdf; do convert -verbose -density 300 $i[0] -profile ~/.local/share/color/icc/ISOcoated_v2_300_eci.icc -profile /usr/share/color/icc/sRGB.icc -resize 1024x768+0+0 -interlace Plane -crop -quality 90 1024x768+0+0 $i.jpg; done

# ghostscript: pdf -> png
for i in *.pdf; do gs -sDEVICE=pngalpha -dGraphicsAlphaBits=4 -dTextAlphaBits=4 -dDOINTERPOLATE -sOutputFile=$i-%02d.png -dSAFER -dBATCH -dNOPAUSE -r112 $i; done

# ghostscript: pdf -> jpg
for i in *.pdf; do gs -sDEVICE=jpeg -dGraphicsAlphaBits=4 -dTextAlphaBits=4 -dDOINTERPOLATE -sOutputFile=$i-%02d.jpg -dSAFER -dBATCH -dNOPAUSE -r112 $i; done

The PHP in your HTML

To finish off, categorize the printfiles into folders 1-level deep. The php will read out the directory name and use it to tag the images. You can use this for filtering later on.

<?php

$index = glob("print/*/*.{svg,jpg,png}",GLOB_BRACE);

// choose ordering: asort, rsort, arsort, natsort, shuffle 
rsort($index);
$files = array_values($index);

$array_length = count($files);
for ($i=0; $i<$array_length; $i++)
{
    $num = $files[$i];
    $pattern = '/(?<=\/)(.*?)(?=\/)/';
    preg_match($pattern, $files[$i], $tag);
    echo '<div class="block" style="display:none;"><a class="fullsizable" href="'.$num.'" title="image tags: '.$tag[0].'"><img src="thumb/'.$num.'" alt="image tags: '.$tag[0].'"></a></div>\n';
}