The Raspberry Pi is a small Linux computer designed to help children learn programming. Being a full Linux System, it can also be used as a server or as the basis for various projects. The Pi’s low power consumption makes it particularly suited to the role of always-on web server.

This post describes how to create a simple photo gallery on the Pi, which can be shared over the internet with or without password protection. While not as polished as Flickr, Smugmug or similar services, it allows you to retain ownetship, control and security of the shared images.

Raspberry Pi Installaion

My raspberry Pi is freshly installed with the latest Raspbian image of Debian Wheezy, 2014-06-20-wheezy-raspbian.zip, which was downloaded from http://www.raspberrypi.org/downloads. However, this procedure should also work for other distributions.

Install Apache

Install the Apache web server with these commands. It will take two or three minutes to complete. A few other packages will be installed at the same time.

pi@raspberrypi ~ $ sudo apt-get update
pi@raspberrypi ~ $ sudo apt-get install apache2

Check the New Websitee

In a web browser, surf to the URL http://<ip address of your Pi>, and look at your new web site.

Note: The IP address of your Pi can be found with the ifconfig command:

pi@raspberrypi ~ $ ifconfig | grep inet
          inet addr:192.168.1.71  Bcast:192.168.1.255  Mask:255.255.255.0
          inet addr:127.0.0.1  Mask:255.0.0.0

My Raspberry Pi’s IP address is 192.168.1.71, so I go to http://192.168.1.71

You should see a web page with these words:
It works!
This is the default web page for this server.
The web server software is running but no content has been added, yet.

The web page will be visible from any computer, smartphone or tablet on your home network, even in a browser running on the Pi itself.

Install Imagemagick and Zip

We will be using “convert” to make thumbnail pictures, a part of the Imagemagick suite. And zip will be needed to pre-package pictures for download. Install them both now.

pi@raspberrypi ~ $ sudo apt-get install imagemagick
pi@raspberrypi ~ $ sudo apt-get install zip

Create a Directory for your Pictures

Create a directory for your pictures under /var/www. I am sharing some wedding photographs, so I will just call it “wedding”.

pi@raspberrypi ~ $ sudo mkdir /var/www/wedding

Upload a few photographs into the folder just created. Use sftp from a Linux PC. If your pictures are on a Windows PC, use WinSCP, Filezilla or another commonly available FTP tool. In order to make this part a bit easier, open up the permissions on the new folder.

pi@raspberrypi ~ $ sudo chmod 777 /var/www/wedding

We will change it back later.

Download the Gallery Script

The following script will create thumbnails of each uploaded photo, along with a simple page of HTML which will allow users to browse and download the pictures. And a link allowing all images to be downloaded as a single zip file.

Right click and save this file: gallery.txt. Save it into the home directory of your Pi user. Then change the name and permissions to make it runnable:

pi@raspberrypi ~ $ mv gallery.txt gallery.sh
pi@raspberrypi ~ $ chmod 555 gallery.sh

Run the Gallery Script

cd into your picture directory and run the script. There is only one argument, which is the title you want the web page to have.

pi@raspberrypi ~ $ cd /var/www/wedding
pi@raspberrypi /var/www/wedding $ ~/gallery.sh "Wedding Pictures"
Processing file 20140503_102747.jpg
convert 20140503_102747.jpg -resize 10% thumb_20140503_102747.jpg
Processing file 20140503_103254.jpg
convert 20140503_103254.jpg -resize 10% thumb_20140503_103254.jpg
Processing file 20140503_103405.jpg
convert 20140503_103405.jpg -resize 10% thumb_20140503_103405.jpg
  adding: 20140503_102747.jpg (deflated 0%)
  adding: 20140503_103254.jpg (deflated 0%)
  adding: 20140503_103405.jpg (deflated 0%)

Notice the tilde (~) at the start of the command. (Although it looks more like a hyphen above). The tilde just means “home directory”. It is just a quick way of typing “/home/pi/gallery.sh”

As the script runs, it produces a few messages about the files being created. Be patient. Each thumbnail takes about 15 or 20 seconds to generate on a Pi with no overclocking (when the original pictures are about 2 Mb in size)

Check the Gallery

In a browser, surf to http://<ip address of your Pi>/wedding (replacing “wedding” with whatever you called your pictures folder). There you should see a selection of thumbnails. Click on a thumbnail to view the image full size. At the bottom of the page is a link, which your visitors can use to download all the pictures at once, should they wish to do so.

Note: I have chosen a large size for the thumbnail images and the text, which displays well on smartphones and tablets, as well as PCs.

Re-running the Gallery Script
For the sake of speed, gallery.sh will only create thumbnail files that do not already exist. If you add more pictures and re-run the script, thumbnails will only be created for the additional pictures. If you want to re-create all thumbnails, just delete the existing ones before running the script. The same applies to the zip file. For example:

pi@raspberrypi /var/www/wedding $ rm *thumb* *zip
pi@raspberrypi /var/www/wedding $ ~/gallery.sh "Wedding Pictures"

Be careful not to accidentally delete your original pictures.

Picture Tooltips

As it runs, the script will create an empty text file for each photo, called <photo name>.txt. If you edit this file and put some text in it, it will appear as a “tooltip” on the final web page, which users will see if they hover over the thumbnail. More usefully, it will also appear as a picture caption if you select “Option 3” or “Option 4” below.

If you don’t add any picture text, the tooltip will contain just the name of the image file by default.

Picture Frames and Captions

By default, the gallery.sh script will create thumbnails without frames or captions. But it can do both. By experimenting with the various options of Imagemagick, I have obtained a few interesting effects, which can be chosen to suit the mood of your pictures. See the comments in the script for more information.

Option 2. Frames

For example, to have your thumbnails displayed in a neat frame, comment out the “Option 1” paragraph and uncomment the “Option 2” paragraph. Then delete your thumbnails and re-run the script. Eg:

pi@raspberrypi /var/www/wedding $ rm *thumb*
pi@raspberrypi /var/www/wedding $ ~/gallery.sh "Wedding Pictures"
...

Wait for the script to complete. Reload your view of the web page and you should see the effect.

Option 3. Frame with Title

To get this effect, comment out the “Option 2” paragraph and uncomment the “Option 3” paragraph. Delete the thumbnail files and rerun the script. Reload the browser view and there should be a frame around each photo with your caption at the bottom of the picture.

pi@raspberrypi /var/www/wedding $ echo "Outside the church" > 20140503_102747.jpg.txt
pi@raspberrypi /var/www/wedding $ rm thumb_20140503_102747.jpg
pi@raspberrypi /var/www/wedding $ ~/gallery.sh "Wedding Pictures"
Processing file 20140503_102747.jpg
convert 20140503_102747.jpg -resize 10% thumb_20140503_102747.jpg
Processing file 20140503_103254.jpg
Processing file 20140503_103405.jpg

Option 4. Polaroid

The most fancy effect is probably the last one (“Option 4”). It will make your pictures look like polaroids carelessly tossed onto a tabletop, complete with curl, shadow effect and random rotation. Comment out the paragraph for Option 3 (or whichever option is currently active) and uncomment the lines for Option 4. NB. You can fix the angle of rotation at zero (boring) or randomise it by commenting/uncommenting the appropriate “angle=” line.

After the change, delete the thumbails again, rerun the script, reload the browser. NB It takes quite a long time to produce the polaroid effect on the Pi – about a minute for a 1 or 2 Mb size picture.

Security

When you have finished experimenting, put back the proper permissions on your picture directory. We made it 777 earlier. restore it to 755.

pi@raspberrypi /var/www/wedding $ sudo chmod 755 .

Remember if you re-run the gallery script, you will now have to do it with sudo (sudo /home/pi/gallery.sh “Wedding 2014”). Otherwise it will not be able to create the thumbnails and other files in the directory whose permissions we have just tightened. Alternatively, loosen the permissions and run the script without sudo, but do not then forget to tighten the permissions to 755 again).

Going Public

If you want the picture gallery to be visible from outside your own home, for example from your office or school, you will need to forward a port on your router. I won’t detail that here, as it is covered widely on the internet and elsewhere on this blog.

---

Adding a Password

Thanks for reading so far. If you are sharing photos with family or friends across the Internet, it would be nice to have a little privacy. The rest of this article describes how to protect your photo gallery page with a password.  In fact the same process works for any apache web page or site. Proceed as follows.

Enable digest authentication in Apache

pi@raspberrypi ~ $ sudo a2enmod auth_digest
Enabling module auth_digest.
To activate the new configuration, you need to run:
  service apache2 restart

Don’t bother restarting Apache just yet.

Create User and Password

Create a directory to hold the password information. It is important that this is NOT put under /var/www. We will use /var/wwwpasswd:

pi@raspberrypi ~ $ sudo mkdir /var/wwwpasswd

Now create a user and password for the gallery. The following command creates a password file called “.htpasswd_wedding2014”, but you can use whatever name is appropriate for your site. “Wedding 2004” is called the “realm”. It is just a title. It is what site visitors will see when challenged for a password, so make it something reasonable. Finally, “tophat” is the name that visitors must use to get into the site.

pi@raspberrypi ~ $ sudo htdigest -c /var/wwwpasswd/.htpasswd_wedding2014 "Wedding 2014" tophat

Type the new password when promted. This will be the password for the site.

Create .htaccess

Next, in your picture directory, create a file “.htaccess”. Recall my picture directory was called “wedding”, so I type:

pi@raspberrypi ~ $ sudo vi /var/www/wedding/.htaccess

and put lines into it as below. The AuthUserFile must be the same as the password file you created above with the htdigest command. The Authname must also be the same as the “realm” from your htdigest command.

AuthUserFile /var/wwwpasswd/.htpasswd_wedding2014
AuthGroupFile /dev/null
AuthName "Wedding 2014"
AuthType Digest
require valid-user

Reconfigure Apache

Next, edit the Apache default configuration file.

pi@raspberrypi ~ $ vi /etc/apache2/sites-available/default

Modify the file as shown below. Add a paragraph for your site like the one I have added in bold. Remember to use your own directory name, not “wedding” (that was mine). Also change “Allowoverride None” to “Allowoverride AuthConfig”, as shown in bold.

<VirtualHost *:80>
ServerAdmin webmaster@localhost

DocumentRoot /var/www
<Directory />
Options FollowSymLinks
AllowOverride AuthConfig
</Directory>
<Directory /var/www/>
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order allow,deny
allow from all
</Directory>

        <Directory /var/www/wedding>
                #Satisfy Any
                AllowOverride AuthConfig
                allow from all
        </Directory>

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
<Directory “/usr/lib/cgi-bin”>
AllowOverride None
Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
Order allow,deny
Allow from all
</Directory>

ErrorLog ${APACHE_LOG_DIR}/error.log

# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn

CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

 

Restart Apache

Finally, restart apache. Ignore the errors about “domain name” for now.

pi@raspberrypi ~ $ sudo service apache2 restart
[....] Restarting web server: apache2apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1 for ServerName
 ... waiting apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1 for ServerName

Reload the site in your browser, and you should be prompted for a user name and password. Type in the credentials and the gallery will be displayed. NB: if you are not challenged for a password, close the browser window or tab,  delete your browser cache/history. Then surf to the site again.

Conclusion

Thanks for reading. Using your Pi to share images is a little more fun that using Flickr, Smugmug, Picasa or similar. While not as polished as those services, it nontheless allows you to retain control, security and ownership of your pictures.

Disclaimer. Note that the gallery.sh script above, as per the title of this article, is intended as a quickly written and simple script allowing learners to process pictures in a flexible way. It is not offered as a productised, polished, or foolproof tool or application, and is used entirely at your own risk.