Gallery Component

The components that are currently doing pretty much exactly what I wanted are Gallery and GalleryNav. GalleryNav is the filter bar, which reads my filters from utils/sorting.js. This is just a JSON file of the form:
{
  "name": Name of Filter (eg Location),
  "index": 0,
  "options": [
    {
      "name": Option Name (eg Boston),
      "tag": tag to filter by,
      "thumbnail": publicId of thumbnail image,
      "description": text to display when option is selected
    }
  ]
}

NOTE: The filters are predefined, in that the JSON file doesn't change unless I feel the need to edit them. But the search results can change any time I add or remove tags from my Cloudinary Console. That usually means deleting the corresponding tag.json file from Cloudinary's root directory; any time you query a tagname from Cloudinary (ie request 'winter.json' get all the images tagged with 'winter'), it will first look for an existing file named 'winter.json', which may or may not be out-of-date. But if no such JSON file is available, it will instead search all available images for those with the requested tag, and then generate and save a new 'winter.json' file before sending it with the query response.


Anyway, that's what generates the filter bar. Clicking one of the filters will populate the filter options.

Above, the filter named Season has been clicked, populating all the Season options with their respective thumbnails. Clicking one of the thumbnails:

sends the "tag" value to the Cloudinary API, which returns a list of publicIds for images that have that tag. The Gallery component then populates its display-area with thumbnails of each image from the list. 

Clicking a thumbnail from the gallery array will make a larger version of the image appear to the right, while simultaneously shifting the other gallery thumbnails to the left. In addition, the details of the selected image, currently stored in Cloudinary's meta fields, will be populated below the image display.

This is currently a very ungainly process, as the code for the Image Display as well as populating the image details is within Gallery.jsx. I tried moving it to ImageDisplay.jsx, but couldn't get the display image to update when the user clicked a different thumbnail.

Also, the image details are currently really obnoxious. They come from meta tags (key-value pairs) within Cloudinary's image properties: response.data.image.context.custom.key = value. But since I'm still managing images manually via the Cloudinary Console, there's no way to guarantee that all images will have the same meta tags. So to programmatically populate the detail fields, even though I know what keys to look for, I have to allow for a lot of missing fields, or else I'm bound to get errors. So I'm using something like this:

getProperty = (imgObj, propertyName, valueIfNull) => {

  let val = valueIfNull;

  try {

    val = imgObj.context.custom[propertyName];

  } catch (err) {}

  return val;

}

Since the image details are significantly different from the meta tags, I'm now constructing an entire virtual object, for which each property is gathered via the above function, every time you click on a thumbnail. Which is not necessarily a problem - it's not slowing down or anything. But it's definitely clunky.

If you click on the Image Display, you'll get a full-sized version of the image in a modal lightbox. The lightbox has it's own built-in zoom controls, so you can see every brush stroke in hi-res detail. Of course, the lightbox version of the image comes with a watermark, so you can't just copy and reuse it.