intranet-pictures 2.1.0 → 3.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 389f9f8c45887f26425f96b166204dda1c9edcc443b8e6b70fc83dc3ce8e6ab4
-  data.tar.gz: 8cd7e0f11ae898d2ccee675f87d14facacf84b472c37d456f2a5ba2b8ed68d64
+  metadata.gz: 42e09da26c3eecce0bdf0c37f9f39ae4db140b850c594677f87672d64ae90a23
+  data.tar.gz: fd202aa0c01b91752021116f3bf455497e153a32ce49a4d4b9ce59649b5916fa
 SHA512:
-  metadata.gz: a26dab3d6b2d07d29bde79c2ce8b6fe8c95a3d3f0e7bf5fd90bf9537619b9ef5cae2d947c2ba6b068919c0048bbfc94612d02abb534510626e9d04ab5e97b0d3
-  data.tar.gz: 71ef4e5113ee75f4067c22dd0623bb17fbf651cbbb5f91aa9440c0ec19391f4f21faab2aa5cac3e8672084cef6448287e6d5fc5cb021eb01863c86287ed31472
+  metadata.gz: 80ce234ae592e9073e61b2287a8cc83a228afb8afe2978072efeac125aedeeba31d201d96d714e5eadb54c2e877c34424f86e67a1599aadc87f54ce60f8a690e
+  data.tar.gz: 359976b4df45fb420eee0ebc7d03bd191886c98947815faae54114c3bbcac773b58c45c663ca16e5c6a221c0903cf15ee3963f789b50572c0ef8a4c3d6c1910b

data/lib/intranet/pictures/json_db_provider.rb

@@ -10,26 +10,26 @@ module Intranet
     # === Structure of the JSON database
     # See the example below.
     #
-    # The title of the pictures gallery is indicated in +title+
-    #
     # Pictures are described individually as a hash in the +pictures+ array. The mandatory keys in
     # this hash are:
-    # * +uri+ : location of the picture, relative to the JSON file
-    # * +title+ : description of the picture
-    # * +datetime+ : date and time of the picture, as a string in ISO8601 format
-    # * +height+ and +width+ : size in pixels of the picture
+    # * +uri+ : location of the picture, relative to the JSON file (string)
+    # * +title+ : description of the picture (string)
+    # * +datetime+ : date and time of the picture, in ISO8601 format (string)
+    # * +height+ and +width+ : size in pixels of the picture (integers)
     #
     # Additional keys may be added (for instance: event, city, region/country, ...); they will be
-    # used to group pictures sharing the same value of a given key.
+    # used to select pictures sharing the same value of a given key, or to group them.
+    # Values may either be singular string elements (for instance: "My wonderful event") or array
+    # of strings (for instance: [ "Casino", "Las Vegas", "Urban photography" ]).
+    #
     # Some groups may be defined in the +groups+ hash to add a thumbnail picture and a brief text
     # description for them. The possible keys in this hash are:
-    # * +id+ : unique identifier of the group, mandatory
-    # * +brief+ : optional short text associated to the group name
-    # * +uri+ : optional group thumbnail, relative to the JSON file
+    # * +id+ : unique identifier of the group, mandatory (string)
+    # * +brief+ : optional short text associated to the group name (string)
+    # * +uri+ : optional group thumbnail, relative to the JSON file (string)
     #
-    # @example Structure of the JSON database (not all mandatory are present for readability)
+    # @example Structure of the JSON database (not all mandatory keys are present for readability)
     #   {
-    #     "title": "gallery title",
     #     "groups": {
     #       "event": [
     #         { "id": "Party", "brief": "...", "uri": "party.jpg", ... },
@@ -41,7 +41,8 @@ module Intranet
     #       ]
     #     },
     #     "pictures": [
-    #       { "uri": "dir/pic0.jpg", "datetime": "...", "event": "Party", "city": "Houston", ... },
+    #       { "uri": "dir/pic0.jpg", "datetime": "...", "event": "Party", "city": "Houston",
+    #         "tags": [ "USA", "Portrait" ], ... },
     #       { ... }
     #     ]
     #   }
@@ -55,17 +56,16 @@ module Intranet
         load_json
       end
 
-      # Returns the pictures gallery title.
-      # @return [String] The gallery title.
-      # @raise KeyError If no title is defined in JSON file.
-      def title
-        load_json
-        @json.fetch('title').to_s
-      end
-
-      # Returns the list of the pictures matching +selector+.
-      # Results are returned ordered by +sort_by+ in ascending order if +asc+, and in descending
-      # order otherwise.
+      # Returns the list of the pictures matching the given selectors.
+      # Selectors are key/value strings pairs restricting the pictures to be returned:
+      #   - if a picture has the given key, its value is a singular string and is strictly equal
+      #     to the given value, it is returned;
+      #   - if a picture has the given key, its value is an array of strings and ONE of the
+      #     elements of this array is equal to the given value, it is returned;
+      #   - all other pictures are not returned.
+      # Results are sorted according to the value of the key +sort_by+, in ascending order if
+      # +asc+, and in descending order otherwise. Sorting by a key whose value is not a singular
+      # string is not defined.
       # @param selector [Hash<String,String>] The pictures selector, interpreted as a logical AND
       #                                       combination of all key/value pairs provided.
       # @param sort_by [String] The picture field to sort the results by, or nil if results should
@@ -74,11 +74,16 @@ module Intranet
       #                      in descending order.
       # @return [Array<Hash{'title'=>String, 'datetime'=>String, 'height'=>Integer,
       #  'width'=>Integer, ...}>] The selected pictures.
-      # @raise KeyError If JSON file is malformed, or if +sort_by+ is not an existing picture field.
+      # @raise KeyError If JSON file is malformed, or if +sort_by+ is not an existing picture field,
+      #                 or if +sort_by+ is not a singular string value.
       def list_pictures(selector = {}, sort_by = nil, asc = true)
         load_json
         pics = select_pictures(selector).map { |p| p.except('uri') }
-        pics.sort_by! { |p| p.fetch(sort_by) } unless sort_by.nil?
+        unless sort_by.nil?
+          raise KeyError if pics.any? { |p| p.fetch(sort_by).respond_to?('any?') }
+
+          pics.sort_by! { |p| p.fetch(sort_by) }
+        end
         pics.reverse! unless asc
         pics
       end
@@ -151,7 +156,14 @@ module Intranet
       end
 
       def picture_match?(picture, selector)
-        selector.all? { |k, v| picture.fetch(k) == v }
+        selector.all? do |k, v|
+          picture_value = picture.fetch(k)
+          if picture_value.respond_to?('any?')
+            picture_value.any? { |e| e == v }
+          else
+            picture_value == v
+          end
+        end
       rescue KeyError
         false
       end

data/lib/intranet/pictures/responder.rb

@@ -9,7 +9,7 @@ require_relative 'version'
 module Intranet
   module Pictures
     # The responder for the Pictures monitor module of the Intranet.
-    class Responder < AbstractResponder # rubocop:disable Metrics/ClassLength
+    class Responder < AbstractResponder
       include Core::HamlWrapper # 'inherits' from methods of HamlWrapper
 
       # Returns the name of the module.
@@ -35,27 +35,15 @@ module Intranet
       #  The pictures provider.
       # @see Intranet::Pictures::JsonDbProvider The specification of the provider, and in particular
       #  the minimal mandatory elements that must be returned by the operations.
-      # @param recents [Array<Hash{group_by:String, sort_by:String, sort_order:String,
-      #  limit:Integer}>]
-      #  The description of the recent pictures to be displayed on the module home page. Pictures
-      #  will first be sorted according to +sort_by+ and +sort_order+, then grouped by +group_by+,
-      #  keeping only the first +limit+ elements, or all if +limit+ is zero. All keys except
-      #  +group_by+ may be omitted.
-      # @param home_groups [Array<Hash{group_by:String, sort_by:String, sort_order:String,
-      #  browse_group_by:String, browse_sort_by:String, browse_sort_order:String}>]
-      #  The description of the pictures groups to be displayed on the module home page, after the
-      #  +recents+. Pictures will first be sorted according to +sort_by+ and +sort_order+, then
-      #  grouped by +group_by+. The obtained groups will be displayed with their thumbnail,
-      #  (optional) brief text and a link to display images of that group sorted according to
-      #  +browse_sort_by+ and +browse_sort_order+ and grouped by +browse_group_by+. All keys except
-      #  +group_by+ and +browse_group_by+ may be omitted.
+      # @param defaults [Hash{group_by:String, sort_by:String, sort_order:String}]
+      #  The default grouping and sort order, if none is specified in the URL.
+      #  All keys except +group_by+ may be omitted.
       # @param in_menu [Boolean] Whether the module instance should be displayed in the main
       #                          navigation menu or not.
-      def initialize(provider, recents = [], home_groups = [], in_menu = true)
+      def initialize(provider, defaults, in_menu = true)
         @provider = provider
-        @recents = recents
+        @defaults = defaults
         @in_menu = in_menu
-        @home_groups = home_groups
       end
 
       # Specifies if the responder instance should be displayed in the main navigation menu or not.
@@ -99,18 +87,17 @@ module Intranet
       #     ]
       def generate_page(path, query)
         case path
-        when %r{^/index\.html$}  then serve_home
-        when %r{^/browse\.html$} then serve_browse(query)
+        when %r{^/index\.html$} then serve_home(query)
         when %r{^/api/} then serve_api(path.gsub(%r{^/api}, ''), query)
         when %r{^/i18n\.js$} then serve_i18n_js
-        else super(path, query)
+        else super
         end
       end
 
-      # Returns the title of the Pictures module, as displayed on the web page.
-      # @return [String] The title of the Pictures module web page.
+      # The title of the Pictures module, as displayed on the web page.
+      # @return [String] The title of the Pictures web page.
       def title
-        @provider.title
+        I18n.t('pictures.menu')
       end
 
       private
@@ -126,24 +113,31 @@ module Intranet
       # @return [String] The key to use to group pictures.
       # @raise KeyError If no grouping criteria is specified.
       def group_by(query)
-        query.fetch('group_by')
+        return query['group_by'] unless query['group_by'].nil?
+
+        @defaults.fetch('group_by')
       end
 
       # Extract the sorting criteria from the given +query+, ie. the key that will be used to sort
       # the selected pictures.
       # @return [String] The key to use to sort pictures, or nil if no sorting is specified.
       def sort_by(query)
-        query.fetch('sort_by')
-      rescue KeyError
-        nil
+        return query['sort_by'] unless query['sort_by'].nil?
+
+        @defaults['sort_by']
       end
 
       # Extract the sorting order from the given +query+.
       # @return [Boolean] True if the pictures should be sorted in ascending order, False otherwise.
       # @raise KeyError If the query requests an invalid sort order.
       def sort_order(query)
-        return false if query['sort_order'] == 'desc'
-        return true if query['sort_order'].nil? || query['sort_order'] == 'asc'
+        order = query['sort_order']
+        order = @defaults['sort_order'] if order.nil?
+        if order == 'desc'
+          return false
+        elsif order.nil? || order == 'asc'
+          return true
+        end
 
         raise KeyError # incorrect value for 'sort_order'
       end
@@ -166,68 +160,43 @@ module Intranet
       ##########################################################################
 
       def collect_groups(selector, group_by, sort_by, sort_order)
-        # Select all pictures, sort them & eventually keep only group names (first occurrence only)
+        # Select all pictures & sort them
+        pics = @provider.list_pictures(selector, sort_by, sort_order)
+        return [] if pics.empty?
+
+        # Eventually keep only group names (first occurrence only)
         @provider.list_pictures(selector, sort_by, sort_order).map do |picture|
-          picture.fetch(group_by)
-        end.uniq
+          picture[group_by] # may be empty
+        end.uniq.compact
       end
 
       def hash_to_query(hash)
         hash.map { |k, v| [k, v].join('=') }.join('&')
       end
 
-      def recent_groups
-        @recents.map do |recent|
-          groups = collect_groups({}, group_by(recent), sort_by(recent), sort_order(recent))
-          see_more_url = ''
-          if recent['limit'].to_i.positive?
-            groups = groups.first(recent['limit'].to_i)
-            see_more_url = "browse.html?#{hash_to_query(recent.except('limit'))}"
-          end
-          { group_key: group_by(recent), groups: groups, see_more_url: see_more_url }
-        end
-      end
-
-      def all_groups
-        @home_groups.map do |sec|
-          groups = collect_groups({}, group_by(sec), sort_by(sec), sort_order(sec))
-          url_prefix = "browse.html?group_by=#{sec['browse_group_by']}"
-          url_prefix += "&sort_by=#{sec['browse_sort_by']}" if sec['browse_sort_by']
-          url_prefix += "&sort_order=#{sec['browse_sort_order']}" if sec['browse_sort_order']
-          { group_key: group_by(sec), groups: groups, url_prefix: url_prefix }
-        end
+      def all_tags(selector)
+        @provider.list_pictures(selector).map do |picture|
+          picture['tags'] # may be empty
+        end.flatten.compact.sort.uniq
       end
 
-      def make_nav(query = {})
-        h = { I18n.t('nav.home') => '/index.html', I18n.t('pictures.menu') => nil, title => nil }
-        unless query['group_by'].nil?
-          h[title] = 'index.html'
-          extra_key = I18n.t("pictures.nav.#{group_by(query)}")
-          filters = selector(query).values
-          extra_key += " (#{filters.join(', ')})" unless filters.empty?
-          h.store(extra_key, nil)
-        end
-        h
+      def make_nav
+        { I18n.t('nav.home') => '/index.html', I18n.t('pictures.menu') => nil, title => nil }
       end
 
       def gallery_url(key, value, filters = {})
         filters.store(key, value)
         filters.store('sort_by', 'datetime')
+        filters.store('sort_order', 'asc')
         hash_to_query(filters)
       end
 
-      def serve_home
-        content = to_markup('pictures_home', nav: make_nav)
-        [206, 'text/html',
-         { content: content, title: title, stylesheets: stylesheets, scripts: scripts }]
-      rescue KeyError
-        [404, '', '']
-      end
-
-      def serve_browse(query)
+      def serve_home(query)
         groups = collect_groups(selector(query), group_by(query), sort_by(query), sort_order(query))
-        content = to_markup('pictures_browse', nav: make_nav(query), group_key: group_by(query),
-                                               filters: selector(query), groups: groups)
+        content = to_markup('pictures_home', nav: make_nav, groups: groups,
+                                             group_key: group_by(query),
+                                             filters: selector(query),
+                                             tags: all_tags(selector(query)))
         [206, 'text/html',
          { content: content, title: title, stylesheets: stylesheets, scripts: scripts }]
       rescue KeyError
@@ -240,7 +209,8 @@ module Intranet
          "  viewer_close: '#{I18n.t('pictures.viewer.close')}',\n" \
          "  viewer_zoom: '#{I18n.t('pictures.viewer.zoom')}',\n" \
          "  viewer_previous: '#{I18n.t('pictures.viewer.previous')}',\n" \
-         "  viewer_next: '#{I18n.t('pictures.viewer.next')}' };"]
+         "  viewer_next: '#{I18n.t('pictures.viewer.next')}',\n" \
+         "  viewer_toggle_caption: '#{I18n.t('pictures.viewer.toggle_caption')}' };"]
       end
 
       ##########################################################################

data/lib/intranet/pictures/version.rb

@@ -8,7 +8,7 @@ module Intranet
     NAME = 'intranet-pictures'
 
     # The version of the gem, according to semantic versionning.
-    VERSION = '2.1.0'
+    VERSION = '3.0.0.rc1'
 
     # The URL of the gem homepage.
     HOMEPAGE_URL = 'https://rubygems.org/gems/intranet-pictures'

data/lib/intranet/resources/haml/pictures_home.haml

@@ -1,35 +1,28 @@
 %section
   = to_markup 'title_and_breadcrumb', {title: title, nav: nav}
-
-  - recent_groups.each do |recent|
-    %h3= I18n.t('pictures.recents.' + recent[:group_key])
+  %h4 Tags
+  - if tags.empty?
+    %p
+      %em= I18n.t("pictures.no_result_found")
+  - else
+    %div#tags
+      - tags.each do |tag_name|
+        %button.tag{ type: 'button', onclick: 'filterByTag("' + tag_name + '");' }
+          = tag_name
+  %h4= I18n.t("pictures.nav.#{group_key}")
+  - if groups.empty?
+    %p
+      %em= I18n.t("pictures.no_result_found")
+  - else
     %ul.groups
-      - recent[:groups].each do |group_name|
+      - groups.each do |group_name|
         %li{ title: group_name }
-          %a{ onclick: 'openImagesGallery("' + gallery_url(recent[:group_key], group_name) + '");' }
+          %a{ onclick: 'openImagesGallery("' + gallery_url(group_key, group_name, filters) + '");' }
             %figure
-              %div{ style: 'background-image: url("api/group_thumbnail?' + recent[:group_key] + '=' + group_name + '")' }
+              %div{ style: 'background-image: url("api/group_thumbnail?' + group_key + '=' + group_name + '")' }
               %figcaption
                 = group_name
-                - group_brief = api_group_brief({ recent[:group_key] => group_name })
-                - unless group_brief.empty?
-                  %br
-                  %em= group_brief
-    - unless recent[:see_more_url].empty?
-      %p.see_more
-        %a{ href: recent[:see_more_url] }= I18n.t('pictures.see_more')
-
-  - all_groups.each do |section|
-    %h3= I18n.t('pictures.browse_by.' + section[:group_key])
-    %ul.groups.wide
-      - section[:groups].each do |group_name|
-        %li{ title: group_name }
-          %a{ href: section[:url_prefix] + '&' + section[:group_key] + '=' + group_name }
-            %figure
-              %div{ style: 'background-image: url("api/group_thumbnail?' + section[:group_key] + '=' + group_name + '")' }
-              %figcaption
-                = group_name
-                - group_brief = api_group_brief({ section[:group_key] => group_name })
+                - group_brief = api_group_brief({ group_key => group_name })
                 - unless group_brief.empty?
                   %br
                   %em= group_brief

data/lib/intranet/resources/locales/en.yml

@@ -4,12 +4,13 @@
 en:
   pictures:
     menu: 'Pictures'
-    see_more: 'See more results'
+    no_result_found: 'No result found'
     viewer:
       close: 'Close'
       zoom: 'Zoom'
       previous: 'Previous image'
       next: 'Next image'
+      toggle_caption: 'Toggle caption/info pannel'
     nav:
       event: 'Events'
       city: 'Cities'
@@ -17,17 +18,3 @@ en:
       country: 'Countries'
       album: 'Albums'
       category: 'Categories'
-    recents:
-      event: 'Latest events'
-      city: 'Cities visited recently'
-      region: 'Regions visited recently'
-      country: 'Countries visited recently'
-      album: 'Latest pictures albums'
-      category: 'Categories updated recently'
-    browse_by:
-      event: 'Browse pictures by event'
-      city: 'Browse pictures by city'
-      region: 'Browse pictures by region'
-      country: 'Browse pictures by country'
-      album: 'Browse pictures by album'
-      category: 'Browse pictures by category'

data/lib/intranet/resources/locales/fr.yml

@@ -4,12 +4,13 @@
 fr:
   pictures:
     menu: 'Photos'
-    see_more: 'Afficher plus de résultats'
+    no_result_found: 'Aucun résultat à afficher'
     viewer:
       close: 'Fermer'
       zoom: 'Agrandir'
       previous: 'Image précédente'
       next: 'Image suivante'
+      toggle_caption: 'Afficher/Masquer les détails'
     nav:
       event: 'Événements'
       city: 'Villes'
@@ -17,17 +18,3 @@ fr:
       country: 'Pays'
       album: 'Albums'
       category: 'Catégories'
-    recents:
-      event: 'Événements récents'
-      city: 'Dernières villes visitées'
-      region: 'Dernières régions visitées'
-      country: 'Derniers pays visités'
-      album: 'Albums photos récents'
-      category: 'Catégories mises à jour récemment'
-    browse_by:
-      event: 'Parcourir les images par événement'
-      city: 'Parcourir les images par ville'
-      region: 'Parcourir les images par région'
-      country: 'Parcourir les images par pays'
-      album: 'Parcourir les images par album'
-      category: 'Parcourir les images par catégorie'

data/lib/intranet/resources/www/jpictures.js

@@ -12,43 +12,144 @@ import PhotoSwipeDynamicCaption from './photoswipe/photoswipe-dynamic-caption-pl
 // Import internationalization support
 import i18n from './../i18n.js';
 
-function convertDate(iso8601_date) {
-  const d = new Date(iso8601_date);
-  const str = d.toLocaleDateString() + ' ' + d.toLocaleTimeString().replace(/(\d{2}):(\d{2}):(\d{2})/, '$1h$2');
-  return str;
+class PhotoSwipePictureGallery {
+  constructor(items) {
+    // Create PhotoSwipe Lightbox
+    const lightboxOptions = {
+      dataSource: items,
+      pswpModule: PhotoSwipe,
+      bgOpacity: 0.95,
+      closeOnVerticalDrag: false,
+      closeTitle: i18n.viewer_close + ' (Esc)',
+      zoomTitle: i18n.viewer_zoom + ' (z)',
+      arrowPrevTitle: i18n.viewer_previous,
+      arrowNextTitle: i18n.viewer_next,
+    };
+    this.lightbox = new PhotoSwipeLightbox(lightboxOptions);
+
+    // Initialize caption plugin
+    const captionPluginOptions = {
+      type: 'below',
+      mobileLayoutBreakpoint: 800,
+      captionContent: (slide) => {
+        return this._captionContent(slide)
+      },
+    };
+    this.captionPlugin = new PhotoSwipeDynamicCaption(this.lightbox, captionPluginOptions);
+
+    // Add custom 'Info' button, see https://photoswipe.com/v5/docs/adding-custom-buttons/
+    // Info menu button
+    const infoButton = {
+      name: 'info',
+      title: i18n.viewer_toggle_caption,
+      order: 15, // Insert button between zoom & close buttons
+      isButton: true,
+      html: {
+        isCustomSVG: true,
+        inner: '<path d="M7 16a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" id="pswp__icn-info"/>'
+              + '<path fill="currentColor" d="M17 15h-2v6h2z"/>'
+              + '<path fill="currentColor" d="M17 11h-2v2h2z"/>',
+        outlineID: 'pswp__icn-info',
+      },
+      onClick: (ev, el, pswp) => {
+        this._toggleInfoPannel(ev, el, pswp);
+      },
+    };
+    this.lightbox.on('uiRegister', () => {
+      this.lightbox.pswp.ui.registerElement(infoButton);
+    });
+
+    this.lightbox.on('calcSlideSize', (e) => {
+      /* When using mobile layout for caption, hide the Info button since the caption is fixed
+       * at the bottom. */
+      if (this.captionPlugin.useMobileLayout()) {
+        document.querySelector('.pswp__button--info').style.display = 'none';
+      } else {
+        document.querySelector('.pswp__button--info').style.display = '';
+      }
+    });
+  }
+
+  // Open gallery at the given slide index (starting at 0)
+  open(index) {
+    this.lightbox.init();
+    this.lightbox.loadAndOpen(index);
+  }
+
+  // Switch between regular caption (below image) and info pannel (aside)
+  _toggleInfoPannel(ev, el, pswp) {
+    if (this.captionPlugin.options.type === 'below') {
+      this.captionPlugin.options.type = 'aside';
+    } else if (this.captionPlugin.options.type === 'aside') {
+      this.captionPlugin.options.type = 'below';
+    }
+    /* Force updating size of all PhotoSwipe elements. This will trigger the 'calcSlideSize' event
+     * on each loaded slide, causing update of the caption text (see handler above). */
+    this.lightbox.pswp.updateSize(true);
+  }
+
+  _convertDate(iso8601_date) {
+    const d = new Date(iso8601_date);
+    const str = d.toLocaleDateString() + ' ' + d.toLocaleTimeString().replace(/(\d{2}):(\d{2}):(\d{2})/, '$1h$2');
+    return str;
+  }
+
+  // Get caption content, according to current image & caption layout
+  _captionContent(slide) {
+    const slideTitle    = slide.data.title;
+    const slideDateTime = this._convertDate(slide.data.datetime, true);
+
+    if (this.captionPlugin.options.type === 'aside' && !this.captionPlugin.useMobileLayout()) {
+      var caption = '<strong>' + slideTitle + '</strong><hr />' +
+                    '<p class="pswp__caption__exif pswp__caption__exif_datetime">' + slideDateTime + '</p>';
+      if (slide.data.artist) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_author">' + slide.data.artist + '</p>';
+      }
+      if (slide.data.event) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_event">' + slide.data.event + '</p>';
+      }
+      if (slide.data.city || slide.data.country) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_location">';
+        if (slide.data.city) { caption += slide.data.city; }
+        if (slide.data.city && slide.data.country) { caption += ', '; }
+        if (slide.data.country) { caption += slide.data.country; }
+        caption += '</p>';
+      }
+      if (slide.data.model) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_camera">' + slide.data.model + '</p>';
+      }
+      if (slide.data.focallength) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_focal">' + slide.data.focallength + '</p>';
+      }
+      if (slide.data.fnumber) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_fstop">' + slide.data.fnumber + '</p>';
+      }
+      if (slide.data.exposure) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_shutter">' + slide.data.exposure + '</p>';
+      }
+      if (slide.data.isospeed) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_iso">' + 'ISO ' + slide.data.isospeed + '</p>';
+      }
+      if (slide.data.tags) {
+        caption += '<p class="pswp__caption__exif pswp__caption__exif_tags">' + slide.data.tags.join(", ") + '</p>';
+      }
+      return caption;
+    } else {
+      return '<strong>' + slideDateTime + '</strong> &mdash; ' + slideTitle;
+    }
+  }
 }
 
 function createImageGallery(json) {
   var items = [];
   for (let i = 0; i < json.length; i++) {
-    const imageUrl   = 'api/picture?id=' + json[i].id;
-    const imageTitle = '<strong>' + convertDate(json[i].datetime, true) + '</strong> &mdash; ' + json[i].title;
-    items.push({ src: imageUrl, width: json[i].width, height: json[i].height, title: imageTitle});
-  }
-
-  // Create PhotoSwipe Lightbox
-  const lightboxOptions = {
-    dataSource: items,
-    pswpModule: PhotoSwipe,
-    bgOpacity: 0.95,
-    closeOnVerticalDrag: false,
-    closeTitle: i18n.viewer_close + ' (Esc)',
-    zoomTitle: i18n.viewer_zoom + ' (z)',
-    arrowPrevTitle: i18n.viewer_previous,
-    arrowNextTitle: i18n.viewer_next,
-  };
-  const lightbox = new PhotoSwipeLightbox(lightboxOptions);
-
-  // Initialize caption plugin
-  const captionPluginOptions = {
-    type: 'below',
-    captionContent: (slide) => { return slide.data.title || ''; }
-  };
-  const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, captionPluginOptions);
-
-  // Open gallery
-  lightbox.init();
-  lightbox.loadAndOpen(0); // start at first slide
+    var imageData = json[i];
+    imageData.src = 'api/picture?id=' + json[i].id; // Add 'src' field required by PhotoSwipe
+    items.push(imageData);
+  }
+
+  const gallery = new PhotoSwipePictureGallery(items);
+  gallery.open(0); // start at first slide
 }
 
 // Export this function so that it may be called from HTML
@@ -58,3 +159,26 @@ function openImagesGallery(selectors) {
     .then(data => createImageGallery(data));
 }
 window.openImagesGallery = openImagesGallery;
+
+// Export this function so that it may be called from HTML
+function filterByTag(tagName) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const activeTag = urlParams.get('tags');
+  if (activeTag == tagName) {
+    urlParams.delete('tags');
+  } else {
+    urlParams.set('tags', tagName);
+  }
+  window.location.search = urlParams.toString();
+}
+window.filterByTag = filterByTag;
+
+/* Code executed after page load */
+const urlParams = new URLSearchParams(window.location.search);
+const activeTag = urlParams.get('tags');
+const buttons = document.getElementById('tags').getElementsByTagName('button');
+for (let i = 0; i < buttons.length; i++) {
+  if (buttons[i].innerText == activeTag) {
+    buttons[i].classList.add('active');
+  }
+}