Just another WordPress site

Main menu

Post navigation

Simple Picture Gallery on Raspberry Pi

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.

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:

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:

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:

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.

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

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.

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.

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.

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.

I was checking my apache access.log and realized that there the CulturualDiversity link was being accessed due to this wonderful tutorial 🙂

I’ve deleted the CulturalDiversity pictures, but have had other events and this is still the best way to share the pictures to everyone (versus emailing a bunch of picture attachments). I’ll make sure to do a symbolic link to the latest pictures on the server so Cultural Diversity will always be a valid URL.

Thanks Jeremy. I looked at the link just now and saw birthday celebration pictures. So you will also have an entry in your access log for 10:23 on 9th May. Probably it will come from my IP, which is currently 86.146.143.188.

The instructions were pretty straight forward and I followed them to the letter. Had some trouble creating and saving the Gallery.txt file, but made it through that as well. Uploaded some photos from my Windows PC using WinSCP to my folder called Pictures. But when I got to the section to “Run the Gallery Script” after entering the command, it returns with a “zip error: Nothing to do! (My Pictures.zip) ls: cannot access My Pictures.zip: No such file or directory”.