In 2011, I started with this photography website by combining the image archiving and e-commerce capabilities of PhotoShelter and WordPress. One of the things I wanted, was to display galleries of photos as hosted on PhotoShelter in pages, posts and sidebars within WordPress. I could achieve something similar by manually adding recent images to a gallery and using a slideshow to display them. I wanted something more dynamic, however, something that reads an RSS feed and displays the image thumbnails as found in the feed as a gallery. While hunting for a standard solution, I decided to try and create a widget myself, geared specifically towards PhotoShelter. It’s never too late to learn something new, and it worked out. Here is the NiO PhotoShelter RSS Gallery Widget!
What the widget does
The NiO PhotoShelter RSS Gallery widget creates dynamic thumbnail galleries of images recently added to a PhotoShelter in general or to a particular gallery. It does this, by reading either the general PhotoShelter RSS feed (for instance: ‘https://niophoto.photoshelter.com/?feed=rss’), the RSS feed of a specific PhotoShelter Gallery or the RSS feed of a PhotoShelter search. The thumbnail galleries automatically update themselves each time an image is made searchable or added to a specific gallery at PhotoShelter.
The widget makes it possible to showcase galleries of recent images on web sites that run on WordPress and Joomla, without having to manually update the gallery each time something changes on the PhotoShelter side of life. In addition, the widget does the following:
- Add a header and description to the gallery, if these are specified.
- Automatically add hyperlinks to the thumbnails that link back to the source images as archived at PhotoShelter.
- Automatically add the IPTC title and photographer name to the “title” tag of the thumbnail. This title appears on hovering the thumbnail. It can however also be fixed for all images (for instance as “Image by NiO Photography”).
- Automatically add the IPTC keywords of the original image to the “alt” tag of the thumbnail, to help improve SEO.
- Style the gallery and its thumbnails via parameters or via CSS styles. It is, for instance, possible to:
- Set the size of the thumbnails and specify if they need to be square or if you want to fix the height.
- Determine whether a high-quality thumbnail with a watermark should be used or a small lower quality thumbnail without a watermark.
- Set the background colour, border, width and padding of the thumbnail gallery as a whole as well as the background colour, border, width and padding of each individual thumbnail.
- Tentatively create a caption for each thumbnail based on the IPTC title or IPTC caption of the source image.
The widget can be used multiple times, based on different RSS feeds, on a single page.
The NiO PhotoShelter RSS Gallery widget is written in PHP, and the latest version is compatible with the latest version of PHP (7.4). The widget can be installed on any domain server that supports PHP5 and Curl.
I designed the widget for use with WordPress (in posts, pages and text widgets) as well as Joomla (in articles and modules). For both, a plug-in will need to be activated to allow the use of PHP. The widget code can also be included in any PHP document even if WordPress or Joomla are not used. For this site, I wrote a function that includes the widget code in my functions.php.
Let’s have a look at some examples of what is possible with this widget:
Responsiveness and mobile-friendliness
To make the image gallery responsive and mobile-friendly, I wrote supplementary CSS code. The example below uses this CSS code. The code does two things:
- Resize the thumbnails depending on the device, orientation and size of the browser window used.
- Limit the number of thumbnails depending on the device, orientation and size of the browser window used.
This CSS code used is not included in the widget out-of-the-box, because this is just an example to show that making the widget responsive is pretty straightforward.
The NiO PhotoShelter RSS Gallery Widget can be downloaded from our download page.