Skip to main content

Photo Gallery Part 6: Piwigo

Next, I am trying out Piwigo, which seems to be one of the most popular photo gallery web applications at this time. A friend uses it to host her (public) photo gallery, and it seems to work well for her.

Impressions

Installation

Piwigo is implemented using PHP, which I do not trust at all, so I will run it within a container. For my tests, I will use the linuxserver/piwigo image maintained by linuxserver.io. It requires MySQL, which is a bit overkill for my needs. (I think that it would work with MariaDB, but it only mentions MySQL in the installation manual, so I will use MySQL for my tests.) The linuxserver/mysql image has not been updated for over four years, so I will use the mysql official image. I will also use the adminer official image to easily inspect the database during my tests.

I created a docker-compose.yaml file, two password files, and three directories in a test directory.

$ ls -Fd1 *
config/
db/
docker-compose.yaml
gallery/
mysql-piwigo-password
mysql-root-password

The docker-compose.yaml file is configured as follows. Note that a local network is used for communication with the database. The database port is exposed to the local network, Adminer is bound to the host network on port 8000, and Piwigo is bound to the host network on port 8080. The database, username, and password are configured, and the passwords are loaded from (read-only) mounted files to keep the passwords out of the configuration. The piwigo container configuration sets the PUID and PGID to 1331, sets the time zone, and mounts the config and gallery directories. Note that this is not a production configuration; it is just for testing.

version: "3.9"

services:

  piwigo_mysql:
    image: "mysql:latest"
    container_name: piwigo_mysql
    command: "--default-authentication-plugin=mysql_native_password"
    environment:
      - MYSQL_ROOT_PASSWORD_FILE=/run/secrets/mysql-root-password
      - MYSQL_DATABASE=piwigo
      - MYSQL_USER=piwigo
      - MYSQL_PASSWORD_FILE=/run/secrets/mysql-piwigo-password
    volumes:
      - "./mysql-root-password:/run/secrets/mysql-root-password:ro"
      - "./mysql-piwigo-password:/run/secrets/mysql-piwigo-password:ro"
      - "./db:/var/lib/mysql"
    networks:
      - local
    expose:
      - 3306

  piwigo_adminer:
    depends_on:
      - piqigo_mysql
    image: "adminer:latest"
    container_name: piwigo_adminer
    networks:
      - local
    ports:
      - "8000:8080"

  piwigo:
    depends_on:
      - piqigo_mysql
    image: "linuxserver/piwigo:latest"
    container_name: piwigo
    environment:
      - PUID=1331
      - PGID=1331
      - TZ=Asia/Tokyo
    volumes:
      - "./config:/config"
      - "./gallery:/gallery"
    networks:
      - local
    ports:
      - "8080:80"

networks:
  local:

I started the services using docker-compose up, and all of the services start without issue. There is a warning that the --default-authentication-plugin option for MySQL is deprecated, but it is in the mysql official image documentation, and I was unable to find a recommended fix in a quick search.

Browsing to the Adminer web interface, I logged in using the following settings. No tables are created until the Piwigo installation process is done.

  • System: MySQL
  • Server: piwigo_mysql
  • Username: piwigo
  • Password: (password in mysql-piwigo-password)
  • Database: piwigo

Browsing to the Piwigo web interface, an installation screen is presented. I used the following configuration.

  • Basic configuration
    • Default gallery language: English (US)
  • Database configuration
    • Host: piwigo_mysql
    • User: piwigo
    • Password: (password in mysql-piwigo-password)
    • Database name: piwigo
    • Database tables prefix: piwigo_
  • Administration configuration
    • Username: tcard
    • Password: ********
    • Password (confirm): ********
    • Email address: travis.cardwell@extrema.is
    • Options
      • Subscribe to Piwigo Announcements Newsletter: No
      • Send my connection settings by email: No

Refreshing the Adminer page, I see that many tables are created. On the filesystem, I see that the config directory is initialized with keys and logs, as well as configuration for Nginx and PHP. The gallery directory contains the “installation” of Piwigo, which is generally “installed” by copying a bunch of PHP source files to a shared server. Each view is implemented in a separate .php source file, as seen in the URLs. This is the old way to using PHP, and it is frankly scary to see it still used. Seeing this makes me consider Piwigo quite high risk. Searching for Piwigo CVEs, I see that there are currently 69 recorded. If I use this software, I will put it behind basic authentication to ensure that no PHP is executed without authentication. Unfortunately, this means that I cannot use the Social Connect plugin to authenticate using Google.

After installation is completed, a wizard allows you to add some initial photos. I would like to test the interface that my wife would use, so I skipped the wizard.

While testing the software, I noticed that the MySQL logs are flooded with the following error message.

mbind: Operation not permitted

According to a thread on StackOverflow, this can be avoided by adjusting the docker-compose.yaml configuration as follows.

services:
  piwigo_mysql:
    cap_add:
      - SYS_NICE

Configuration

There are five types of users. While the names of each type (“status”) are not that great, they are at least well documented in the user interface.

  • Webmaster - administrative access to configuration and content
  • Administrator - administrative access to content only
  • User - normal user can view content according to permissions
  • Generic - shared account can view content according to permissions but not change the password
  • Guest - deactivated account that does not allow login

The administrative user created during the installation has a “webmaster” status, which cannot be changed. You are already logged in as this user when the installation process is finished. Clicking on an “Admin” link at the top right corner opens the administrative interface.

The user interface design looks nice. A menu on the left of the page is organized into groups, and the “Configuration” group offers four pages of configuration options. Each page is organized using tabs. One usability issue is that there is no indication of which part of the menu is currently selected, though query parameters in the URL can give some hints.

  • Options
  • Menus
  • Languages
  • Themes

Under the “Options” page, I did quite a bit of configuration. Most of it is straightforward, but there are some things that I needed to try out in order to determine what they do.

  • In the “Basic Settings” section of the “General” Tab, there is a text area where you can set a “page banner” in HTML format. The use of %gallery_title% indicates that it is a template, but there is no documentation about what variables are available. It does not really matter, however, because I cannot find it anywhere on the site! My guess is that the theme/skin that I am using does not include this content, but perhaps other themes/skins do.
  • In the “Permissions” section of the “General” tab, the “Allow user customization” option allows users to configure preferences such as language, theme, photos per page, etc. When this option is not enabled, users are only able to change their password and email address.
  • In the “Display” tab, various options reference something called “caddie.” This is a “virtual” album that contains (linked) photos from other albums.
  • The “Photo properties” section of the “Display” tab allows you to select what information is displayed to the right of each photo. I would really like to hide this information by default, as family members usually have no interest in it. Unfortunately, the information section is still displayed even when all of the properties are deselected.

Under the “Menus” page, there is a nice user interface for reordering and hiding menus. I was unable to find these menus in the user interface, however!

I was unable to find a way to customize the gallery menu bar. The following items are displayed on the left.

  • Albums - I do not need this menu.
  • Explore - I would like to remove this menu.
  • Most visited - I would like to remove this menu.
  • Recent photos - I would like to remove this menu.
  • Search… - I would like to remove search functionality.

The following items are displayed on the right.

  • “Hello ${USERNAME}!” - The username links to the page that allows the user to change their password or email address, as well as set preferences when the “allow user customization” option (see above) is set.
  • Logout - I would like to make this the rightmost item.
  • Customize - This links to the same page as the username, so I would like to remove it.
  • Admin - This is only displayed when the user is an administrative user.

Under the “Languages” page, you can select which languages to provide, as well as select the default. Very nice! I activated Japanese.

Under the “Themes” page, you can activate and configure themes. The “Modus” and “Smart Pocket” themes are both activated, and the “Modus” theme is set as default. When the “allow user customization” option (see above) is set, users can select a theme themselves. When it is not set, users are unable to select a theme, but administrative users are able to set a theme per user. I will test using the “Modus” theme. The configuration offers a large number of skins, with screenshots to show what they look like, and I selected the “Quartz” skin.

Both the “Languages” and “Themes” pages have tabs for updating and installing new languages and themes. This is a nice feature. Unfortunately blocking internet access for better security would break such functionality.

In the left menu, there is a “Plugins” item (without a group). The plugins page provides tabs for administering installed plugins as well as installing other plugins. I enabled the “Language Switch” plugin, which allows users to switch languages.

In the left menu, the “Users” group has three pages. The “Users list” tab of the “Manage” page allows you to administer users. Administrators can set the default preferences for specific users. There is a “privacy level” option, but I do not know how it is used. An “Edit guest user” button allows you to set the preferences for users who are not logged in.

I noticed that the “Registered” column of the user list displays “9 hours ago” for users that I just created. My Asia/Tokyo time zone is UTC+9, so there must be a bug with the time zone handling. As a developer, I understand how tricky time zones can be, but seeing such issues is still disappointing.

There are no settings for a URL prefix. I bet that a URL prefix can be used by simply “installing” Piwigo in a subdirectory of the web root. The container that I am using serves the application from the root, but I could probably do what I want by creating my own container images. It may even be possible with the current image by moving the “installation” in the gallery directory to a subdirectory…

Speaking of URLs, I am not a fan of the URLs that Piwigo uses. First, the software uses query parameters to specify what content to display. This is an ugly design that is common in old PHP applications. I would much prefer clean URLs that reflect the content, but that would require proper routing. Also, the URLs use database identifiers to identify the album/photo being viewed, and the query pattern design is terrible due to poor naming and ordering. One of my friends decided not use to use Piwigo mostly due to URL issues.

I logged out, cleared my browser cache, and reloaded the top page. 9 requests were made, transferring a total of 388.17KB. Nice! The page took 615ms to load. Two cookies are set, named caps and pwg_id.

I logged in as a test “Administrator” user (not “Webmaster”) to do gallery administration, which is also done in the administration page accessed by the “Admin” link at the top right. In the left menu, the “Albums” group has three pages. The “List” tab of the “Manage” page allows you to administer albums.

I created a new album, and the empty album is displayed in the list. Hovering the mouse over the new album displays a menu, and clicking on “Add Photos” takes you to a user interface for adding photos to the album. You can use a button to select photos using the browser interface, and there is a large area where you can drag-and-drop photos.

Unfortunately, Piwigo does not support video! The documentation indicates that only the following file types are supported.

  • .jpg, .jpeg
  • .png
  • .gif

If you try to drag-and-drop a selection of files that include an unsupported file type (.mov in my test), an error is displayed and no files are uploaded. Clicking the “Add Photos” button and using the browser interface works better, as it only displays supported file types. After selecting a bunch of files, they are displayed in a table. Pressing the “Start Upload” button starts the upload. Files are removed from the table after they are uploaded, and a progress bar below the table shows the overall progress. This user interface is quite nice. I like having details. I am pretty sure that my wife would prefer the simpler user interface provided by Lychee, however.

If you set a description for an album, it is displayed above the photo in the album view. First go to the “List” tab of the “Manage” page of the “Albums” group in the left menu. Hover over the album and select “Edit” from the menu that is displayed. The description can be set in the “Properties” tab of the page that is displayed. (My wife writes a brief description for each album.)

You can set the gallery sort order in the “Photos sort order” tab on the same page. Unfortunately, the photos are not sorted by the time that they were taken (the same issue that I had with Lychee). The default sort order can be set in the “General” tab of the “Options” page of the “Configuration” group in the left menu. I configured photos to sort by “Date created, old to new” but it is not working. I suspect that it is sorting by the timestamp of the file in the filesystem. Unfortunately, that timestamp is often set when copying files, so it is often not the time that the photo is taken. The photo metadata has the actual time that the photo is taken, but I am unable to find a way to make Piwigo sort by that time. The user interface allows manual sorting, but my wife definitely does not have the patience to do that.

You can see the access type in the “Permissions” tab on the same page. The default is public! This is a terrible default for people who want a private gallery for sharing photos with family. When adding a new album, one needs to change the access type before adding any photos to prevent the photos from being leaked to the public. (My wife would probably need a checklist to avoid forgetting to do this.)

In my case, I would use basic authentication to only allow trusted users to access the high risk PHP scripts. With this usage, only my wife and I would have accounts, for administering the site. All galleries would be public, as they would only be accessible after basic authentication. With this usage, my wife would not need to worry about the access type, as the default public status is fine.

Since I would use basic authentication to protect the whole site, I am testing gallery viewing and downloading without logging in.

The top page looks pretty nice, aside from the menus. If I were to use this software, I could modify the CSS to completely hide the top menu bar. The menus and search field on the left are not needed for my use case, and there is no need to provide a login link either, as I can create a bookmark to the login page in my wife’s browser. I would probably hide the footer while I am at it.

With the top menu bar hidden, the user interface is much more simple, with a “Home” link, an icon for selecting the language, and the album thumbnails. Each album thumbnail shows the album name and the number of photos in a quite small font at the bottom left of the thumbnail. The text is not easy to read, especially when the thumbnail behind it is a light color, which would cause frustrations for some family members with poor vision.

Language selection is done using a flag icon. This is generally ill advised because many people are nationalistic, and somebody in the UK might not be happy to select a United States of America flag in order use their language. In my case, the United States of America and Japanese flags are no issue.

Clicking on an album icon opens that album. The top of the page (underneath the menu bar if not hidden) has breadcrumbs on the left, followed by a number indicating the number of images in the album. It looks nice. Some control icons are displayed on the right. The icons displayed depend on your configuration. With my configuration, I have the following icons.

  • Photo sizes - This lets you select the size of the images displayed in the album page.
  • Slideshow - You can start a slideshow from the album page. Nice!
  • Language

The album description is displayed below that, if set. Nice!

With my settings, the layout shows thumbnail images in rows, maintaining the aspect ratio of each image yet fully justifying each row by adjusting the height of the images in each row. It looks quite similar to the layout of Google Photos. Being able to select the size of these thumbnails is a nice feature. Hovering the mouse over an image thumbnail show the filename (without extension) at the bottom of the thumbnail.

Clicking on an image thumbnail opens that image. The image is loaded in a page layout, not a lightbox. Oddly, the image page layout does not match the layout of the top page or the album page. The top part of the page shows breadcrumbs on the left and the index of the photo in the album on the right (“1/56” for example). I noticed that the photo filename in the breadcrumbs is not clickable, while the album name in the album breadcrumbs is clickable, which is inconsistent.

Underneath that top part, there is a row of controls. The icons displayed depend on your configuration. With my configuration, I have the following icons on the left.

  • Photo sizes
  • Slideshow
  • Show file metadata
  • Download this file

Selecting any photo size except “original” adjusts the size of the photo displayed on the page. Smaller sizes look fine, but larger sizes overflow and do not look good. Selecting “Original” opens the original photo in a separate window. The original photo is shown at the actual size (“1:1”), so only part of a large photo is shown. There are no scrollbars and no way to pan or zoom, making this feature pretty useless.

Slideshow functionality is a nice feature, but unfortunately the transitions are ugly. The current photo disappears and the next photo is then loaded in place. This causes a flash, and you can even briefly see the filename of the next photo during the delay. I worry that the delay will be much longer on a slow internet connection.

The “show file metadata” icon toggles the display of additional metadata in the file information box (discussed below). The “download this file” icon causes the browser to download the original file. Nice!

At the right of this row of controls, with my configuration, there are navigation arrows. An up arrow goes to the album page. A left arrow goes to the previous image, and it is disabled on the first image. A right arrow goes to the next image, and it is disabled on the last image.

Below the row of controls, the current image is displayed on the left, and a box of image information is displayed on the right. I like being able to optionally display image information, and I really dislike that it is always displayed. Family members generally do not care about such information when they are just browsing photos!

The image view does not support zoom, and there is no control icon for switching to a full screen mode. In general, I do not like the layout because there is a lot of wasted space. I much prefer full page lightbox views that prioritize the image being displayed. This design even has a footer, and the page has a scrollbar! Perhaps other themes have a better design…

I tried the user interface on a tablet. The “Smart Pocket” theme is used, so it looks different from the desktop theme. There is a link to view it using a desktop theme, and it looks like it is a “Smart Pocket” desktop version. The “Smart Pocket” (mobile) theme shows the site title at the top, with a “home” icon on the left and a menu icon on the right. The menu icon opens the menus that I do not want, so perhaps I could hide this menu icon as well.

It looks like there is no way to change the language with the “Smart Pocket” mobile theme! This is unfortunate, as my mother-in-law would want this functionality on her tablet. The “Smart Pocket” desktop version has a menu item for changing the language, but I was not able to activate it by touch. Since the desktop version does not work well with touch, I will stick to the mobile version.

The albums are listed as full-width buttons, with a thumbnail image on the left and the album title and number of photos displayed next to the image. While I do not think it looks particularly attractive, at least it is much easier to read than with the desktop theme.

Touching an album opens that album. The top bar remains unchanged, and the image thumbnails are displayed immediately below it. There are no control icons like with the desktop theme. The album description is displayed below the image thumbnails, just above the footer. It looks a bit out of place, but this is not a big issue.

Touching an image thumbnail opens the image. The image is displayed, filling the width or height of the page, over a black background. It looks much nicer than the desktop view!

Tapping the image brings up bars at the top and bottom. The top bar shows the filename (without extension), centered. The bottom bar shows the following controls.

  • An “X” icon closes the image and returns to the album view.
  • A play icon starts the slideshow. The current image slides left while the next image slides in. It looks nice! It is much better than the desktop theme!
  • A “more information” link loads a page that shows the image information. This page has breadcrumbs and different controls from the usual image view.
  • A left arrow goes to the previous image.
  • A right arrow goes to the next image.

You can also transition to the previous/next image by swiping. Going to the previous image from the first image goes to the last image, and going to the next image from the last image goes to the previous image. Pinching does nothing; there is no way to zoom.

The interface works well in both portrait and landscape orientations. The browser back button works well! After opening an image and then viewing more images, pressing the back button goes to the album view, not the previously viewed image. Nice!

I tried the user interface on a phone, and it behaves the same as on the tablet. It looks nice even on the especially small screen.

Since the mobile interface is so much better than the desktop interface, I tried disabling the “Modus” theme to force use of the “Smart Pocket” theme even on the desktop. It works! Unfortunately, there are issues. The top page looks even more ugly on a desktop than it does on a tablet or phone. There is no way to select the language. The albums are paginated even though I configured the software to display many image thumbnails on the same page in order to avoid pagination. The image view is much nicer, but there is no link for downloading the original image. (Note that this feature is essential, as some family members download and print photos to show other family members who do not use computers.)

Evaluation

How does Piwigo measure up to my requirements?

The software is really easy to install, and I can probably get it to work with a URL prefix, but I really dislike the old style of PHP programming where the PHP scripts are under the web root. I really dislike the URL design as well, but that is not a big issue for my use case. I consider this software to be a high security risk, so I would only consider running it behind basic authentication so that only trusted users are able to execute the PHP scripts. I therefore cannot use the Social Connect plugin to authenticate using Google.

The web application is not too heavy. Running MySQL is overkill for my needs, however, and I am concerned that it may not run well on a modest server.

Configuration of the software is pretty good, but there are a number of frustrations. Some configuration does not seem to apply to different themes, which is frustrating. Some things are not configurable, and I would probably edit the code to hide functionality that would only confuse or distract family members. I can probably go a long way by editing CSS and JavaScript. I really do not want to work with PHP, so I am hesitant to select PHP software if I think I may need to hack on it.

Administration of albums is complicated enough that I would probably need to write a manual for my wife.

The software has excellent language support. Unfortunately that is one of the features that does not work on the mobile theme!

The software does not support video. Video support is essential, so this is a blocker.

The software does not use media metadata to determine when a photo was taken, so images are not displayed in the order that we want. This is also a very significant issue.

The user interface for viewing albums is nice, but the desktop user interface for viewing photos is terrible for my use case. There is a lot of wasted space on the page! Family members want to see the photos, not information about the photos!

There is no zoom support or full screen support. Viewing the original image seems to be broken. The software has slideshow support, but the transitions are ugly on the desktop.

I will definitely not use this software.

Author

Travis Cardwell

Published

Tags
Related Blog Entries