intranet-pictures 2.1.0 → 3.0.0.rc1

data/lib/intranet/resources/www/style.css

@@ -3,10 +3,24 @@
  * Design for the Pictures module of the IntraNet.
  */
 
-/******************************* Recent groups ********************************/
+/************************************ Tags ************************************/
 
-p.see_more {
-  text-align: right;
+button {
+  background: #ffffff;
+  border: 1px solid #eeeff2;
+  border-radius: 999em;
+  margin: 0px 4px 1em; /* top sides bottom */
+  padding: 10px 15px; /* top+bottom sides */
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+button.active {
+  background: #eaeaea;
+}
+
+button:hover, button:focus {
+  box-shadow: 0px 1px 5px rgba(0,0,0,0.08);
 }
 
 /******************************* Picture groups *******************************/
@@ -22,6 +36,13 @@ ul.groups {
 ul.groups.wide {
   grid-template-columns: repeat(2, 1fr);
 }
+
+/* Small screens only */
+@media only screen and (max-width: 1023px), only screen and (max-device-width: 1023px) {
+  ul.groups { grid-template-columns: repeat(2, 1fr); }
+  ul.groups.wide { grid-template-columns: repeat(1, 1fr); }
+}
+
 ul.groups li {
   display: block;
   width: 100%;
@@ -34,19 +55,11 @@ ul.groups li {
   border-radius: 3px;
   justify-self: center;
 }
-ul.groups a {
-  color: black;
-}
-
-/* Small screens only */
-@media only screen and (max-width: 1023px), only screen and (max-device-width: 1023px) {
-  ul.groups { grid-template-columns: repeat(2, 1fr); }
-  ul.groups.wide { grid-template-columns: repeat(1, 1fr); }
-}
 
 ul.groups li a {
   display: block;
   height: 100%;
+  color: black;
 }
 ul.groups li figure {
   margin: 0px;
@@ -87,5 +100,66 @@ ul.groups li:hover, ul.groups li:focus {
 
 .pswp .pswp__dynamic-caption--below {
   max-width: 800px;
-  padding: 10px 20px 10px;
+  padding: 10px 20px; /* top/bottom sides */
+}
+
+.pswp .pswp__dynamic-caption--aside {
+  max-width: 400px;
+  width: 400px;
+  text-align: justify;
+  padding: 10px 20px; /* top/bottom sides */
+}
+
+.pswp .pswp__dynamic-caption--aside hr {
+  margin: 8px 0px; /* top/bottom sides */
+  background: rgba(255, 255, 255, 0.7);
+  height: 1px;
+}
+
+.pswp .pswp__caption__exif {
+  padding: .25em 0 .25em 2.5em; /* top right bottom left */
+  margin: .125em 0; /* top/bottom sides */
+	background-position: .5em center;
+	background-repeat: no-repeat;
+	background-size: 20px 20px;
+}
+
+.pswp .pswp__caption__exif_datetime {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNjY2NjY2MiPjxwYXRoIGQ9Ik0xMzIuNSwxNjMuMVY0MC42YzAtMTYuOSwxMy43LTMwLjYsMzAuNi0zMC42czMwLjYsMTMuNywzMC42LDMwLjZ2MTIyLjVjMCwxNi45LTEzLjcsMzAuNi0zMC42LDMwLjZTMTMyLjUsMTgwLjEsMTMyLjUsMTYzLjF6IE02NTMuMSwxOTMuOGMxNi45LDAsMzAuNi0xMy43LDMwLjYtMzAuNlY0MC42YzAtMTYuOS0xMy43LTMwLjYtMzAuNi0zMC42cy0zMC42LDEzLjctMzAuNiwzMC42djEyMi41QzYyMi41LDE4MC4xLDYzNi4yLDE5My44LDY1My4xLDE5My44eiBNOTkwLDc0NWMwLDEzNS4zLTEwOS43LDI0NS0yNDUsMjQ1UzUwMCw4ODAuMyw1MDAsNzQ1czEwOS43LTI0NSwyNDUtMjQ1Uzk5MCw2MDkuNyw5OTAsNzQ1eiBNOTI4LjgsNzQ1YzAtMTAxLjMtODIuNC0xODMuOC0xODMuOC0xODMuOFM1NjEuMyw2NDMuNyw1NjEuMyw3NDVTNjQzLjcsOTI4LjgsNzQ1LDkyOC44UzkyOC44LDg0Ni4zLDkyOC44LDc0NXogTTI1NSwzNzcuNUgxMzIuNVY1MDBIMjU1VjM3Ny41eiBNMTMyLjUsNjgzLjhIMjU1VjU2MS4zSDEzMi41VjY4My44eiBNMzE2LjMsNTAwaDEyMi41VjM3Ny41SDMxNi4zVjUwMHogTTMxNi4zLDY4My44aDEyMi41VjU2MS4zSDMxNi4zVjY4My44eiBNNzEuMyw3MzguOVYzMTYuM0g3NDV2MTIyLjVoNjEuM1YxOTkuOWMwLTM3LjItMjkuNy02Ny40LTY2LjMtNjcuNGgtMjUuNXYzMC42YzAsMzMuNy0yNy41LDYxLjMtNjEuMyw2MS4zcy02MS4zLTI3LjUtNjEuMy02MS4zdi0zMC42SDIyNC40djMwLjZjMCwzMy43LTI3LjUsNjEuMy02MS4zLDYxLjNzLTYxLjMtMjcuNS02MS4zLTYxLjN2LTMwLjZINzYuNGMtMzYuNywwLTY2LjQsMzAuMS02Ni40LDY3LjR2NTM5YzAsMzcuMSwyOS43LDY3LjQsNjYuNCw2Ny40aDM2Mi40Vjc0NUg3Ni40QzczLjYsNzQ1LDcxLjMsNzQyLjEsNzEuMyw3MzguOXogTTYyMi41LDUwMFYzNzcuNUg1MDBWNTAwSDYyMi41eiBNODM2LjksNzQ1SDc0NXYtOTEuOWMwLTE2LjktMTMuNy0zMC42LTMwLjYtMzAuNnMtMzAuNiwxMy43LTMwLjYsMzAuNnYxMjIuNWMwLDE2LjksMTMuNywzMC42LDMwLjYsMzAuNmgxMjIuNWMxNi45LDAsMzAuNi0xMy43LDMwLjYtMzAuNlM4NTMuOCw3NDUsODM2LjksNzQ1eiIvPjwvc3ZnPgo=);
+}
+
+.pswp .pswp__caption__exif_author {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iI2NjY2NjYyI+PHBhdGggZD0iTTEwIDEyLjVjLTUuOTIgMC05IDMuNS05IDUuNXYxaDE4di0xYzAtMi0zLjA4LTUuNS05LTUuNXoiLz48Y2lyY2xlIGN4PSIxMCIgY3k9IjYiIHI9IjUiLz48L3N2Zz4K);
+}
+
+.pswp .pswp__caption__exif_event {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNjY2NjY2MiPjxwYXRoIGQ9Ik0xNTUuMiwxMzdjMCwyNy4yLTEyLjEsNDgtMzYuMyw2Mi40djcxOGMwLDQuOS0xLjgsOS4yLTUuNCwxMi44cy03LjgsNS40LTEyLjgsNS40SDY0LjRjLTQuOSwwLTkuMi0xLjgtMTIuOC01LjRzLTUuNC03LjgtNS40LTEyLjh2LTcxOEMyMi4xLDE4NS4xLDEwLDE2NC4zLDEwLDEzN2MwLTIwLDcuMS0zNy4xLDIxLjMtNTEuM2MxNC4yLTE0LjIsMzEuMy0yMS4zLDUxLjMtMjEuM3MzNy4xLDcuMSw1MS4zLDIxLjNDMTQ4LjEsOTkuOSwxNTUuMiwxMTcsMTU1LjIsMTM3TDE1NS4yLDEzN3ogTTk5MCwxNzMuM3Y0MzIuN2MwLDkuNS0yLjQsMTYuNy03LjEsMjEuOGMtNC43LDUuMS0xMi4yLDEwLjMtMjIuNCwxNS42Yy04MS4zLDQzLjktMTUxLDY1LjgtMjA5LjMsNjUuOGMtMjMuMSwwLTQ2LjQtNC4yLTcwLTEyLjVjLTIzLjYtOC4zLTQ0LjEtMTcuNC02MS41LTI3LjJzLTM5LjItMTguOS02NS41LTI3LjJjLTI2LjMtOC4zLTUzLjItMTIuNS04MC44LTEyLjVjLTcyLjYsMC0xNjAuMywyNy42LTI2My4xLDgyLjhjLTYuNCwzLjQtMTIuNyw1LjEtMTguNyw1LjFjLTkuOCwwLTE4LjMtMy42LTI1LjUtMTAuOGMtNy4yLTcuMi0xMC44LTE1LjctMTAuOC0yNS41VjI2MC43YzAtMTIuMSw1LjktMjIuNSwxNy42LTMxLjJjNy45LTUuMywyMi45LTEzLjQsNDQuOC0yNC40Yzg5LjItNDUuNCwxNjguOC02OC4xLDIzOC44LTY4LjFjNDAuNSwwLDc4LjMsNS41LDExMy40LDE2LjRjMzUuMiwxMSw3Ni42LDI3LjYsMTI0LjIsNDkuOWMxNC40LDcuMiwzMSwxMC44LDQ5LjksMTAuOGMyMC40LDAsNDIuNi00LDY2LjYtMTEuOWMyNC03LjksNDQuOC0xNi44LDYyLjQtMjYuN2MxNy42LTkuOCwzNC4yLTE4LjcsNDkuOS0yNi43czI2LTExLjksMzAuOS0xMS45YzkuOCwwLDE4LjMsMy42LDI1LjUsMTAuOEM5ODYuNCwxNTUsOTkwLDE2My41LDk5MCwxNzMuM0w5OTAsMTczLjN6Ii8+PC9zdmc+Cg==);
+}
+
+.pswp .pswp__caption__exif_location {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNjY2NjY2MiPjxwYXRoIGQ9Ik02MTAsNzU5LjRsLTE4LjksMzkuOWMxMDEuMywxMy4yLDE2Mi42LDQ2LjcsMTYyLjYsNzEuNGMwLDMxLjUtOTguOCw3Ny4zLTI1My43LDc3LjNjLTE1NC44LDAtMjUzLjYtNDUuOC0yNTMuNi03Ny4zYzAtMjkuMyw4NS4zLTcwLjcsMjIxLjYtNzYuNWwzMiw2Ni43bDIyMC00NTguMmgtMC4zYzIxLjctMzguNiwzNC4zLTgzLjIsMzQuMy0xMzAuOUM3NTMuOSwxMjcuMiw2NDAuMiwxMCw1MDAsMTBjLTE0MC4yLDAtMjUzLjksMTE3LjItMjUzLjksMjYxLjhjMCw0Ny43LDEyLjYsOTIuMywzNC4yLDEzMC45aC0wLjJsMTY4LjEsMzUwLjRjLTEyNy41LDguNS0yNDIuNyw0OC41LTI0Mi43LDExNy41QzIwNS41LDk0OSwzNTMuNyw5OTAsNTAwLDk5MGMxNDYuMywwLDI5NC41LTQxLDI5NC41LTExOS4zQzc5NC41LDgxMi40LDcxMi4zLDc3NC44LDYxMCw3NTkuNHogTTM5My40LDIzOS42YzAtNjAuNyw0Ny43LTExMCwxMDYuNi0xMTBjNTksMCwxMDYuNyw0OS4zLDEwNi43LDExMGMwLDYwLjctNDcuNywxMDkuOS0xMDYuNywxMDkuOUM0NDEuMSwzNDkuNSwzOTMuNCwzMDAuMywzOTMuNCwyMzkuNnoiLz48L3N2Zz4K);
+}
+
+.pswp .pswp__caption__exif_camera {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNMTE1LjUsMjYuN0g5NC4zbC05LjEtOS41Yy0yLjEtMy44LTYuMi02LjEtMTAuNi02LjFINTMuOWMtNC40LDAtOC41LDIuNC0xMC42LDYuMWwtOS4yLDkuNUgxMi41ICAgYy02LjcsMC0xMi4yLDUuMy0xMi4yLDExLjlWMTA1YzAsNi42LDUuNCwxMS45LDEyLjIsMTEuOWgxMDIuOWM2LjcsMCwxMi4yLTUuMywxMi4yLTExLjlWMzguN0MxMjcuNiwzMi4xLDEyMi4yLDI2LjcsMTE1LjUsMjYuN3ogICAgTTY0LDEwMS4yYy0xNy42LDAtMzEuOS0xNC4zLTMxLjktMzEuOWMwLTE3LjYsMTQuMy0zMS45LDMxLjktMzEuOWMxNy42LDAsMzEuOSwxNC4zLDMxLjksMzEuOUM5NS44LDg3LDgxLjYsMTAxLjIsNjQsMTAxLjJ6ICAgIE02NCw0OC4xYy0xMS43LDAtMjEuMiw5LjUtMjEuMiwyMS4yYzAsMTEuNyw5LjUsMjEuMiwyMS4yLDIxLjJjMTEuNywwLDIxLjItOS41LDIxLjItMjEuMkM4NS4yLDU3LjYsNzUuNyw0OC4xLDY0LDQ4LjF6Ii8+PC9zdmc+Cg==);
+}
+
+.pswp .pswp__caption__exif_focal {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNMTIgNi41YzMuNzkgMCA3LjE3IDIuMTMgOC44MiA1LjUtMS42NSAzLjM3LTUuMDIgNS41LTguODIgNS41UzQuODMgMTUuMzcgMy4xOCAxMkM0LjgzIDguNjMgOC4yMSA2LjUgMTIgNi41bTAtMkM3IDQuNSAyLjczIDcuNjEgMSAxMmMxLjczIDQuMzkgNiA3LjUgMTEgNy41czkuMjctMy4xMSAxMS03LjVjLTEuNzMtNC4zOS02LTcuNS0xMS03LjV6bTAgNWMxLjM4IDAgMi41IDEuMTIgMi41IDIuNXMtMS4xMiAyLjUtMi41IDIuNS0yLjUtMS4xMi0yLjUtMi41IDEuMTItMi41IDIuNS0yLjVtMC0yYy0yLjQ4IDAtNC41IDIuMDItNC41IDQuNXMyLjAyIDQuNSA0LjUgNC41IDQuNS0yLjAyIDQuNS00LjUtMi4wMi00LjUtNC41LTQuNXoiPjwvcGF0aD48L3N2Zz4K);
+}
+
+.pswp .pswp__caption__exif_fstop {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNOS40IDEwLjVsNC43Ny04LjI2QzEzLjQ3IDIuMDkgMTIuNzUgMiAxMiAyYy0yLjQgMC00LjYuODUtNi4zMiAyLjI1bDMuNjYgNi4zNS4wNi0uMXpNMjEuNTQgOWMtLjkyLTIuOTItMy4xNS01LjI2LTYtNi4zNEwxMS44OCA5aDkuNjZ6bS4yNiAxaC03LjQ5bC4yOS41IDQuNzYgOC4yNUMyMSAxNi45NyAyMiAxNC42MSAyMiAxMmMwLS42OS0uMDctMS4zNS0uMi0yek04LjU0IDEybC0zLjktNi43NUMzLjAxIDcuMDMgMiA5LjM5IDIgMTJjMCAuNjkuMDcgMS4zNS4yIDJoNy40OWwtMS4xNS0yem0tNi4wOCAzYy45MiAyLjkyIDMuMTUgNS4yNiA2IDYuMzRMMTIuMTIgMTVIMi40NnptMTEuMjcgMGwtMy45IDYuNzZjLjcuMTUgMS40Mi4yNCAyLjE3LjI0IDIuNCAwIDQuNi0uODUgNi4zMi0yLjI1bC0zLjY2LTYuMzUtLjkzIDEuNnoiPjwvcGF0aD48L3N2Zz4=);
+}
+
+.pswp .pswp__caption__exif_shutter {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNMTUgMUg5djJoNlYxem00LjAzIDYuMzlsMS40Mi0xLjQyYy0uNDMtLjUxLS45LS45OS0xLjQxLTEuNDFsLTEuNDIgMS40MkMxNi4wNyA0Ljc0IDE0LjEyIDQgMTIgNGMtNC45NyAwLTkgNC4wMy05IDlzNC4wMiA5IDkgOSA5LTQuMDMgOS05YzAtMi4xMi0uNzQtNC4wNy0xLjk3LTUuNjF6TTEyIDIwYy0zLjg3IDAtNy0zLjEzLTctN3MzLjEzLTcgNy03IDcgMy4xMyA3IDctMy4xMyA3LTcgN3ptLS4zMi01SDYuMzVjLjU3IDEuNjIgMS44MiAyLjkyIDMuNDEgMy41NmwtLjExLS4wNiAyLjAzLTMuNXptNS45Ny00Yy0uNTctMS42LTEuNzgtMi44OS0zLjM0LTMuNTRMMTIuMjYgMTFoNS4zOXptLTcuMDQgNy44M2MuNDUuMTEuOTEuMTcgMS4zOS4xNyAxLjM0IDAgMi41Ny0uNDUgMy41Ny0xLjE5bC0yLjExLTMuOS0yLjg1IDQuOTJ6TTcuNTUgOC45OUM2LjU5IDEwLjA1IDYgMTEuNDYgNiAxM2MwIC4zNC4wNC42Ny4wOSAxaDQuNzJMNy41NSA4Ljk5em04Ljc5IDguMTRDMTcuMzcgMTYuMDYgMTggMTQuNiAxOCAxM2MwLS4zNC0uMDQtLjY3LS4wOS0xaC00LjM0bDIuNzcgNS4xM3ptLTMuMDEtOS45OEMxMi45IDcuMDYgMTIuNDYgNyAxMiA3Yy0xLjQgMC0yLjY5LjQ5LTMuNzEgMS4yOWwyLjMyIDMuNTYgMi43Mi00Ljd6Ij48L3BhdGg+PC9zdmc+Cg==);
+}
+
+.pswp .pswp__caption__exif_iso {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNMTkgM0g1Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6TTUuNSA3LjVoMnYtMkg5djJoMlY5SDl2Mkg3LjVWOWgtMlY3LjV6TTE5IDE5SDVMMTkgNXYxNHptLTItMnYtMS41aC01VjE3aDV6Ij48L3BhdGg+PC9zdmc+Cg==);
+}
+
+.pswp .pswp__caption__exif_tags {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjY2NjY2NjIiBkPSJNOS4yNTkgNC41SDQuNTAxdjQuNzU4TDE0Ljc0MyAxOS41bDQuNzU4LTQuNzU4em0yLjEyMS0yLjEyMUEzIDMgMCAwIDAgOS4yNTkgMS41SDEuNTAxdjcuNzU4YTMgMyAwIDAgMCAuODc5IDIuMTIxbDEwLjI0MiAxMC4yNDJhMyAzIDAgMCAwIDQuMjQyIDBsNC43NTgtNC43NThhMyAzIDAgMCAwIDAtNC4yNDJ6TTcuNTAxIDlhMS41IDEuNSAwIDEgMSAwLTMgMS41IDEuNSAwIDEgMSAwIDN6bTAgMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+Cg==);
 }

data/spec/intranet/pictures/json_db_provider_spec.rb

@@ -14,16 +14,6 @@ RSpec.describe Intranet::Pictures::JsonDbProvider do
     end
   end
 
-  describe '#title' do
-    before do
-      @provider = described_class.new(File.join(__dir__, 'sample-db.json'))
-    end
-
-    it 'should return the gallery title' do
-      expect(@provider.title).to eql('My Gallery')
-    end
-  end
-
   describe '#list_pictures' do
     before do
       @provider = described_class.new(File.join(__dir__, 'sample-db.json'))
@@ -32,42 +22,63 @@ RSpec.describe Intranet::Pictures::JsonDbProvider do
     it 'should return the list of pictures without the uri key' do
       expect(@provider.list_pictures).to eql(
         [
-          { 'datetime' => '2019:07:22 09:41:31', 'author' => 'John Doe', 'location' => 'Paris, France', 'camera' => 'Apple iPhone 11' },
-          { 'datetime' => '2020:06:19 07:51:05', 'flash' => false, 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan' },
-          { 'datetime' => '2020:06:20 18:14:09', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'New York, USA' },
-          { 'datetime' => '2020:06:20 06:09:54', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV' },
+          { 'datetime' => '2019:07:22 09:41:31', 'author' => 'John Doe', 'location' => 'Paris, France', 'camera' => 'Apple iPhone 11', 'tags' => ['Modern art', 'Louvre'] },
+          { 'datetime' => '2020:06:19 07:51:05', 'flash' => 'false', 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan', 'tags' => ['MoMAK', 'Modern art', 'Cherry blossom'] },
+          { 'datetime' => '2020:06:20 18:14:09', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'New York, USA', 'tags' => 'Urban photography' },
+          { 'datetime' => '2020:06:20 06:09:54', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV', 'tags' => ['Louvre', 'Pyramid', 'Urban photography'] },
           { 'datetime' => '2019:07:22 09:45:17', 'author' => 'John Doe', 'location' => 'Tokyo, Japan' }
         ]
       )
     end
 
     it 'should return only the pictures matching the given selector' do
+      # Select only singular string values
       selector = { 'author' => 'Jane Doe' }
       expect(@provider.list_pictures(selector)).to eql(
         [
-          { 'datetime' => '2020:06:19 07:51:05', 'flash' => false, 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan' },
-          { 'datetime' => '2020:06:20 18:14:09', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'New York, USA' },
-          { 'datetime' => '2020:06:20 06:09:54', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV' }
+          { 'datetime' => '2020:06:19 07:51:05', 'flash' => 'false', 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan', 'tags' => ['MoMAK', 'Modern art', 'Cherry blossom'] },
+          { 'datetime' => '2020:06:20 18:14:09', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'New York, USA', 'tags' => 'Urban photography' },
+          { 'datetime' => '2020:06:20 06:09:54', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV', 'tags' => ['Louvre', 'Pyramid', 'Urban photography'] }
+        ]
+      )
+
+      # Select singular or array string values
+      selector = { 'tags' => 'Urban photography' }
+      expect(@provider.list_pictures(selector)).to eql(
+        [
+          { 'datetime' => '2020:06:20 18:14:09', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'New York, USA', 'tags' => 'Urban photography' },
+          { 'datetime' => '2020:06:20 06:09:54', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV', 'tags' => ['Louvre', 'Pyramid', 'Urban photography'] }
+        ]
+      )
+
+      # Multiple selectors are AND'ed together
+      selector = { 'tags' => 'Modern art', 'location' => 'Paris, France' }
+      expect(@provider.list_pictures(selector)).to eql(
+        [
+          { 'datetime' => '2019:07:22 09:41:31', 'author' => 'John Doe', 'location' => 'Paris, France', 'camera' => 'Apple iPhone 11', 'tags' => ['Modern art', 'Louvre'] }
         ]
       )
     end
 
     context 'given a valid +sort_by+ key' do
       it 'should sort the pictures by the given key' do
+        # Ascending (default) sort order, sort key has only singular string values
         selector = { 'author' => 'Jane Doe' }
         expect(@provider.list_pictures(selector, 'location')).to eql(
           [
-            { 'datetime' => '2020:06:20 18:14:09', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'New York, USA' },
-            { 'datetime' => '2020:06:20 06:09:54', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV' },
-            { 'datetime' => '2020:06:19 07:51:05', 'flash' => false, 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan' }
+            { 'datetime' => '2020:06:20 18:14:09', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'New York, USA', 'tags' => 'Urban photography' },
+            { 'datetime' => '2020:06:20 06:09:54', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV', 'tags' => ['Louvre', 'Pyramid', 'Urban photography'] },
+            { 'datetime' => '2020:06:19 07:51:05', 'flash' => 'false', 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan', 'tags' => ['MoMAK', 'Modern art', 'Cherry blossom'] }
           ]
         )
 
+        # Descending sort order
+        selector = { 'author' => 'Jane Doe' }
         expect(@provider.list_pictures(selector, 'datetime', false)).to eql(
           [
-            { 'datetime' => '2020:06:20 18:14:09', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'New York, USA' },
-            { 'datetime' => '2020:06:20 06:09:54', 'flash' => true, 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV' },
-            { 'datetime' => '2020:06:19 07:51:05', 'flash' => false, 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan' }
+            { 'datetime' => '2020:06:20 18:14:09', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'New York, USA', 'tags' => 'Urban photography' },
+            { 'datetime' => '2020:06:20 06:09:54', 'flash' => 'true', 'author' => 'Jane Doe', 'location' => 'Paris, France', 'camera' => 'Canon EOS 5D MARK IV', 'tags' => ['Louvre', 'Pyramid', 'Urban photography'] },
+            { 'datetime' => '2020:06:19 07:51:05', 'flash' => 'false', 'author' => 'Jane Doe', 'location' => 'Tokyo, Japan', 'tags' => ['MoMAK', 'Modern art', 'Cherry blossom'] }
           ]
         )
       end
@@ -78,6 +89,12 @@ RSpec.describe Intranet::Pictures::JsonDbProvider do
         expect { @provider.list_pictures({}, 'invalid') }.to raise_error(KeyError)
       end
     end
+
+    context 'given an invalid +sort_by+ key with array values' do
+      it 'should raise KeyError' do
+        expect { @provider.list_pictures({}, 'tags') }.to raise_error(KeyError)
+      end
+    end
   end
 
   describe '#picture' do