This spring I embarked on a new photo gallery. I wanted to streamline and consolidate getting my photos and videos online. I didn’t want to have to create posts or even photo galleries. I wanted to use WordPress’ Media Library Uploader, tag the photo, and be done. This post gives an overview of how I created my filtered photo gallery.
The default Media Library doesn’t provide for photo tagging but a little code added to the functions file will create a tag field for each photo. Photos with the same tag can be viewed or “filtered” as a group on my thumbnails template page creating a filtered gallery page.
I realized that it might be nice to control which tagged photos would be included on the thumbnails page, so I created a photos theme option panel to control which groups of tagged photos would be presented on my thumbnails page. Each photo tag on the option panel, displays the tag as a tag filter button. Clicking on these filter buttons displays only photos with the same tag. So viewers can easily filter through a large number of thumbnails which on my site I grouped/tagged by sports: skiing, climbing, kayaking, etc. If I want retire a group of images from my thumbnail page, I just remove the tag name from the Photos Option Panel. There is also a theme option to control the display of captions underneath each image.
If any thumbnail image is clicked from the thumbnails page, the viewer see an overlay hover description (image caption text) and view button. Clicking this button moves to an image slider page (my other template page). This page has the Bootstrap carousel which allows full-size viewing of the images with the same tag. Because the carousel is Bootstrapped, the images are always displayed responsively in all devices.
To consolidate all my media, I also added videos to my filtered gallery. I have a Vimeo Plus account, so my videos are streamed from Vimeo’s video servers. In order to include videos within my gallery, I needed to add a second input field to my image attachment settings where I store the Vimeo URL of each video. The uploading process is slightly different for videos: upload any pic for my video’s thumbnail image, use the tag “video”, and included the embed URL to the video (Vimeo or You Tube). Any video thumbnail tagged “video” will be routed to the video player instead of the photo carousel. This allows photos and videos to be organized together and I no longer need any video plugins installed into my WordPress site.
My current filtered gallery displays about 50 photos and 12 videos all together on one webpage. The page’s performance seems good for this much media (see Pingdom results). I wanted to have retina/4k quality photos, so I am using Jetpack’s Photon CDN (Content Delivery Network) to deliver correctly sized images per the requesting device, including devices with retina/4k screens.
I learned a lot from this project. Maybe the next step for me would be to package everything into a WordPress plugin. I am mostly happy to be able to upload my trip pics quickly, and know they will display responsively on all internet devices.