{"id":31,"date":"2021-08-31T16:52:23","date_gmt":"2021-08-31T16:52:23","guid":{"rendered":"http:\/\/pi-smb\/wordpress\/?p=31"},"modified":"2021-08-31T16:52:23","modified_gmt":"2021-08-31T16:52:23","slug":"simple-picture-gallery-on-raspberry-pi","status":"publish","type":"post","link":"https:\/\/dsslit.ddns.net\/wordpress\/?p=31","title":{"rendered":"Simple Picture Gallery on Raspberry Pi"},"content":{"rendered":"\n

Posted on 

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\u2019s low power consumption makes it particularly suited to the role of always-on web server.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Raspberry Pi Installaion<\/h2>\n\n\n\n

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

Install Apache<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

pi@raspberrypi ~ $ sudo apt-get update<\/strong>\npi@raspberrypi ~ $ sudo apt-get install apache2<\/strong><\/pre>\n\n\n\n
Check the New Websitee<\/h2>\n\n\n\n
In a web browser, surf to the URL http:\/\/<ip address of your Pi><\/strong>, and look at your new web site.<\/p>\n\n\n\n
Note: The IP address of your Pi can be found with the ifconfig<\/strong> command:<\/p>\n\n\n\n
pi@raspberrypi ~ $ ifconfig | grep inet<\/strong>\n          inet addr:192.168.1.71<\/strong>  Bcast:192.168.1.255  Mask:255.255.255.0\n          inet addr:127.0.0.1  Mask:255.0.0.0<\/pre>\n\n\n\n
My Raspberry Pi\u2019s IP address is 192.168.1.71<\/strong>, so I go to http:\/\/192.168.1.71<\/strong><\/p>\n\n\n\n
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.<\/em><\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Install Imagemagick and Zip<\/h2>\n\n\n\n
We will be using \u201cconvert<\/strong>\u201d to make thumbnail pictures, a part of the Imagemagick<\/strong> suite. And zip<\/strong> will be needed to pre-package pictures for download. Install them both now.<\/p>\n\n\n\n
pi@raspberrypi ~ $ sudo apt-get install imagemagick<\/strong>\npi@raspberrypi ~ $ sudo apt-get install zip<\/strong>\n<\/pre>\n\n\n\n
Create a Directory for your Pictures<\/h2>\n\n\n\n
Create a directory for your pictures under \/var\/www. I am sharing some wedding photographs, so I will just call it \u201cwedding\u201d.<\/p>\n\n\n\n
pi@raspberrypi ~ $ sudo mkdir \/var\/www\/wedding<\/strong><\/pre>\n\n\n\n
Upload a few photographs into the folder just created. Use sftp<\/strong> 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.<\/p>\n\n\n\n
pi@raspberrypi ~ $ sudo chmod 777 \/var\/www\/wedding<\/strong><\/pre>\n\n\n\n
We will change it back later.<\/p>\n\n\n\n
Download the Gallery Script<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Right click and save this file: gallery.txt<\/a>. Save it into the home directory of your Pi user. Then change the name and permissions to make it runnable:<\/p>\n\n\n\n
pi@raspberrypi ~ $ mv gallery.txt gallery.sh<\/strong>\npi@raspberrypi ~ $ chmod 555 gallery.sh<\/strong><\/pre>\n\n\n\n
Run the Gallery Script<\/h2>\n\n\n\n
cd<\/strong> into your picture directory and run the script. There is only one argument, which is the title you want the web page to have.<\/p>\n\n\n\n
pi@raspberrypi ~ $ cd \/var\/www\/wedding<\/strong>\npi@raspberrypi \/var\/www\/wedding $ ~\/gallery.sh \"Wedding Pictures\"<\/strong>\nProcessing file 20140503_102747.jpg\nconvert 20140503_102747.jpg -resize 10% thumb_20140503_102747.jpg\nProcessing file 20140503_103254.jpg\nconvert 20140503_103254.jpg -resize 10% thumb_20140503_103254.jpg\nProcessing file 20140503_103405.jpg\nconvert 20140503_103405.jpg -resize 10% thumb_20140503_103405.jpg\n  adding: 20140503_102747.jpg (deflated 0%)\n  adding: 20140503_103254.jpg (deflated 0%)\n  adding: 20140503_103405.jpg (deflated 0%)\n<\/pre>\n\n\n\n
Notice the tilde (~) at the start of the command. (Although it looks more like a hyphen above). The tilde just means \u201chome directory\u201d. It is just a quick way of typing \u201c\/home\/pi\/gallery.sh\u201d<\/p>\n\n\n\n
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)<\/p>\n\n\n\n
Check the Gallery<\/h2>\n\n\n\n
In a browser, surf to http:\/\/<ip address of your Pi>\/wedding<\/strong> (replacing \u201cwedding\u201d 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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Re-running the Gallery Script<\/strong>
For the sake of speed, gallery.sh<\/strong> 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:<\/p>\n\n\n\n
pi@raspberrypi \/var\/www\/wedding $ rm *thumb* *zip<\/strong>\npi@raspberrypi \/var\/www\/wedding $ ~\/gallery.sh \"Wedding Pictures\"<\/strong><\/pre>\n\n\n\n
Be careful not to accidentally delete your original pictures.<\/p>\n\n\n\n
Picture Tooltips<\/h2>\n\n\n\n
As it runs, the script will create an empty text file for each photo, called <photo name>.txt<\/strong>. If you edit this file and put some text in it, it will appear as a \u201ctooltip\u201d 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 \u201cOption 3<\/strong>\u201d or \u201cOption 4<\/strong>\u201d below.<\/p>\n\n\n\n
If you don\u2019t add any picture text, the tooltip will contain just the name of the image file by default.<\/p>\n\n\n\n
Picture Frames and Captions<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Option 2. Frames<\/h2>\n\n\n\n
\"thumb_20140102_134432_HDR\"
For example, to have your thumbnails displayed in a neat frame, comment out the \u201cOption 1<\/strong>\u201d paragraph and uncomment the \u201cOption 2<\/strong>\u201d paragraph. Then delete your thumbnails and re-run the script. Eg:<\/p>\n\n\n\n
pi@raspberrypi \/var\/www\/wedding $ rm *thumb*<\/strong>\npi@raspberrypi \/var\/www\/wedding $ ~\/gallery.sh \"Wedding Pictures\"<\/strong>\n...<\/pre>\n\n\n\n
Wait for the script to complete. Reload your view of the web page and you should see the effect.<\/p>\n\n\n\n
Option 3. Frame with Title<\/h2>\n\n\n\n
<\/a>
To get this effect, comment out the \u201cOption 2\u201d paragraph and uncomment the \u201cOption 3\u201d 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.<\/p>\n\n\n\n
pi@raspberrypi \/var\/www\/wedding $ echo \"Outside the church\" > 20140503_102747.jpg.txt<\/strong>\npi@raspberrypi \/var\/www\/wedding $ rm thumb_20140503_102747.jpg<\/strong>\npi@raspberrypi \/var\/www\/wedding $ ~\/gallery.sh \"Wedding Pictures\"<\/strong>\nProcessing file 20140503_102747.jpg\nconvert 20140503_102747.jpg -resize 10% thumb_20140503_102747.jpg\nProcessing file 20140503_103254.jpg\nProcessing file 20140503_103405.jpg\n<\/pre>\n\n\n\n
Option 4. Polaroid<\/h2>\n\n\n\n
<\/a>
The most fancy effect is probably the last one (\u201cOption 4\u201d). 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 \u201cangle=<\/strong>\u201d line.<\/p>\n\n\n\n
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 \u2013 about a minute for a 1 or 2 Mb size picture.<\/p>\n\n\n\n
Security<\/h2>\n\n\n\n
When you have finished experimenting, put back the proper permissions on your picture directory. We made it 777 earlier. restore it to 755.<\/p>\n\n\n\n
pi@raspberrypi \/var\/www\/wedding $ sudo chmod 755 .<\/strong>\n<\/pre>\n\n\n\n
Remember if you re-run the gallery script, you will now have to do it with sudo (sudo \/home\/pi\/gallery.sh \u201cWedding 2014\u201d). 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).<\/p>\n\n\n\n
Going Public<\/h2>\n\n\n\n
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\u2019t detail that here, as it is covered widely on the internet and elsewhere on this blog<\/a>.<\/p>\n\n\n\n
\n\n\n\n
Adding a Password<\/h1>\n\n\n\n
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.<\/p>\n\n\n\n
Enable digest authentication in Apache<\/h2>\n\n\n\n
pi@raspberrypi ~ $ sudo a2enmod auth_digest<\/strong>\nEnabling module auth_digest.\nTo activate the new configuration, you need to run:\n  service apache2 restart\n<\/pre>\n\n\n\n
Don\u2019t bother restarting Apache just yet.<\/p>\n\n\n\n
Create User and Password<\/h2>\n\n\n\n
Create a directory to hold the password information. It is important that this is NOT put under \/var\/www. We will use \/var\/wwwpasswd:<\/p>\n\n\n\n
pi@raspberrypi ~ $ sudo mkdir \/var\/wwwpasswd<\/strong><\/pre>\n\n\n\n
Now create a user and password for the gallery. The following command creates a password file called \u201c.htpasswd_wedding2014\u201d, but you can use whatever name is appropriate for your site. \u201cWedding 2004\u201d is called the \u201crealm\u201d. It is just a title. It is what site visitors will see when challenged for a password, so make it something reasonable. Finally, \u201ctophat\u201d is the name that visitors must use to get into the site.<\/p>\n\n\n\n
pi@raspberrypi ~ $ sudo htdigest -c \/var\/wwwpasswd\/.htpasswd_wedding2014 \"Wedding 2014\" tophat<\/strong><\/pre>\n\n\n\n
Type the new password when promted. This will be the password for the site.<\/p>\n\n\n\n
Create .htaccess<\/h2>\n\n\n\n
Next, in your picture directory, create a file \u201c.htaccess\u201d. Recall my picture directory was called \u201cwedding\u201d, so I type:<\/p>\n\n\n\n
pi@raspberrypi ~ $ sudo vi \/var\/www\/wedding\/.htaccess<\/strong><\/pre>\n\n\n\n
and put lines into it as below. The AuthUserFile<\/strong> must be the same as the password file you created above with the htdigest<\/strong> command. The Authname<\/strong> must also be the same as the \u201crealm\u201d from your htdigest<\/strong> command.<\/p>\n\n\n\n
AuthUserFile \/var\/wwwpasswd\/.htpasswd_wedding2014\nAuthGroupFile \/dev\/null\nAuthName \"Wedding 2014\"\nAuthType Digest\nrequire valid-user\n<\/pre>\n\n\n\n
Reconfigure Apache<\/h2>\n\n\n\n
Next, edit the Apache default configuration file.<\/p>\n\n\n\n
pi@raspberrypi ~ $ vi \/etc\/apache2\/sites-available\/default<\/strong><\/pre>\n\n\n\n
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 \u201cwedding\u201d (that was mine). Also change \u201cAllowoverride None\u201d to \u201cAllowoverride AuthConfig\u201d, as shown in bold.<\/p>\n\n\n\n
<VirtualHost *:80>
ServerAdmin webmaster@localhost<\/code><\/p>\n\n\n\n
DocumentRoot \/var\/www
<Directory \/>
Options FollowSymLinks
AllowOverride AuthConfig<\/strong>
<\/Directory>
<Directory \/var\/www\/>
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order allow,deny
allow from all
<\/Directory><\/p>\n\n\n\n
        <Directory \/var\/www\/wedding><\/strong>
                #Satisfy Any<\/strong>
                AllowOverride AuthConfig<\/strong>
                allow from all<\/strong>
        <\/Directory><\/strong><\/p>\n\n\n\n
ScriptAlias \/cgi-bin\/ \/usr\/lib\/cgi-bin\/
<Directory \u201c\/usr\/lib\/cgi-bin\u201d>
AllowOverride None
Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
Order allow,deny
Allow from all
<\/Directory><\/p>\n\n\n\n
ErrorLog ${APACHE_LOG_DIR}\/error.log<\/p>\n\n\n\n
# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn<\/p>\n\n\n\n
CustomLog ${APACHE_LOG_DIR}\/access.log combined
<\/VirtualHost><\/p>\n\n\n\n
Restart Apache<\/h2>\n\n\n\n
Finally, restart apache. Ignore the errors about \u201cdomain name\u201d for now.<\/p>\n\n\n\n
pi@raspberrypi ~ $ sudo service apache2 restart<\/strong>\n[....] Restarting web server: apache2apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1 for ServerName\n ... waiting apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1 for ServerName<\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Disclaimer<\/strong>. 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
Posted on August 23, 2014 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\u2019s low power consumption makes it particularly suited to the role of always-on web server. This … <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-31","post","type-post","status-publish","format-standard","hentry","category-pi"],"_links":{"self":[{"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":0,"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/31\/revisions"}],"wp:attachment":[{"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dsslit.ddns.net\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}