Simple Bash Scripting for Web Designers:
Screenshots of Various Sizes

Written by:
chuckmathias

Have you every wanted screenshots of a webpage at different sizes. Here is a quick and easy way to write a bash script on ubuntu that will use a program called cutycapt and save webshot screenshots in a folder with one command! Here’s the code you will be working with:
We will name this file “download-images”.

First, the requirements. Cutycapt needs to be installed. It is a cross-platform program that can save screenshots in a number of different formats. Install instructions are here.
Mac users may want to use alternative programs like webkit2png (although I am not sure about using it to create screenshots of different sizes).
Let’s walk through the code.
If you are new to shell scripting #!/bin/bash just tells the computer to interpret the script as a bash script.
SITE="$1" creates a variable that is given when you enter the command in the terminal. For example, to use this bash script to download screenshots of our homepage we would navigate to the directory where the script is and type in the terminal: sh download-images motatemedia.com. This stores “motatemedia.com” as the variable SITE in our script.

On a side note…
you can start shell scripts in a few different ways. One of the best ways is to create a folder in your home directory and add it to your PATH. Typically, users will call this folder “bin”. To add folder to our PATH you can run on the commandline export PATH="~/bin:$PATH". You can check and make sure this is added to your path by typing $PATH in the terminal.

mkdir "$HOME/Pictures/$SITE" creates a folder in our Pictures folder called “motatemedia.com”. We will use this to put the screenshots we download from the website.
The last four lines of code uses cutycapt to download screenshots from the url (--url="http://$SITE/") at different widths (--min-width={width-here}) and save the output in the folder we created (--out="$HOME/Pictures/$SITE/{filename-here}.jpg"). You can add as many widths as you want and save in different file formats (e.g. png, pdf).

On another side note…
notice that there are "s around different sections of code. This is important to use " and not '. If you use ' it will remove all special characters, including the $. This means that it will not read $HOME or $SITE as variables, but rather just the text “$HOME” or “$CODE”.

Here’s what we get if we run the command sh download-images motatemedia.com: