Medium Embed - Artboard + Phone Case

artboard_plus_phone_case.sh

#!/bin/bash

# The folders where the artboards and the result is stored
folder_artboards="./artboards"
folder_composite="./composite"

# Phone case
bg_name="phone_case.png"
bg_size=`identify -format '%wx%h' "$bg_name"`

# Artboards size and position
overlay_size=`identify -format '%wx%h' "$folder_artboards/start.png"`
overlay_position="43+175"

# If you want to start from scratch you can delete all
# find $folder_composite -name "*.png" -type f -delete

# Loop over the artboards folder and do some magic on the images
for i in $(find $folder_artboards -name "*.png" -type f);
do
    # Extrat the image name
    base_name=$(basename "$i")
    date_source=`stat -f "%Sm" -t "%Y%m%d%H%M.%S" "$folder_artboards/$base_name"`

    # This is a little bit of a magic, if the artboard and the already
    # existing combined image have the same modification date
    # then it skip this image.
    # There is not need to create a new composite if it already exist
    if [ -f "$folder_composite/$base_name" ];
    then
        date_composite=`stat -f "%Sm" -t "%Y%m%d%H%M.%S" "$folder_composite/$base_name"`
        if [ "$date_source" == "$date_composite" ];
        then
            echo "Skip :: $base_name"
            continue
        fi
    fi

    # Convert is an Imagemagick tool that does a lot of stuff
    # One of it is compose images: http://www.imagemagick.org/script/convert.php
    convert \
        -size $bg_size \
        -composite "$bg_name" "$i" \
        -geometry $overlay_size+$overlay_position \
        -depth 8 \
        "$folder_composite/$base_name"

    # Set the modification timestamp to the artboard
    # This make the previews magic match work
    touch -t "$date_source" "$folder_composite/$base_name"
    echo "Create :: $base_name"
done