Upload Images to a NextJS Folder from anywhere on your Mac

Ingredients

• sips terminal image library
• next/image | Next.js
• Automator

Recipe

#!/bin/zsh

# get the widthxheight dimensions of an image and
# append that to the file's basename.
# Legend: a = absolute path, a:r = path and basename, a:e = extension
#
# Usage: dim.zsh image1.ext image2.ext ... imagen.ext

for f in "$@"
do
    # generate widthxheight string by joining array elements w/'x' as separator
    wxh=${(j:x:)$(/usr/bin/sips -g pixelWidth -g pixelHeight ${f:a} |\
        /usr/bin/awk '{getline;print $2}')}
    localname="${f##*/}"
    echo "<Image src=\"/$localname\" width=\"${wxh:0:4}\" height=\"${wxh:5:4}\" />"
	cp "$f" "NEXT_JS_DIRECTORY_FULL_PATH/public"
done

This script uses sips to get the dimensions of a image file, copies it to your public folder in a NextJS directory and writes a JSX string in the form of: <Image src="" width="" height="" />

You can add a Copy to Clipboard action right after to copy the image string to clipboard.

Considerations

• occasionally sips will fail to capture the dimensions correctly and leave a weird {witdh}x bug instead of the expected {width}x{height}. In those cases I use "Get Info" and update the dimensions manually. This probably has something to do with width=\"${wxh:0:4}\" height=\"${wxh:5:4}\" but it doesn't happen frequently enough for me to want to fix it