As most of my work colleagues will attest to, I’m a prolific user of animated GIFs. I have a collection of them in a folder on my Mac, located within my Dropbox Public folder. By storing them here, I can easily copy the URL of a specific GIF and include it in messages, tweets and Slack posts.

Each time I save a new animated GIF to my collection, I add some Spotlight comments (such as simpsons or facepalm) that I can then search for when looking for that perfect response. If I’m on the move, however, accessing my GIF collection is somewhat trickier. I can’t search Spotlight comments from my iPhone and the Dropbox app is a lousy image viewer, especially if you’re dealing with a few hundred (or thousand, in my case) animated GIFs. While there are apps, such as GIFWrapped, which are purpose-built to browse through a GIF collection, I still don’t have any way to search using metadata I’ve added on my Mac.

To solve this, I created (file: text: Giffed), a Finder service for OS X. Giffed takes a folder of animated GIFs and generates a responsive web page containing thumbnails that link to their full-size images. Giffed also indexes any Spotlight comments attached to those GIFs and makes them searchable from within the page. Since my GIF collection is stored within my Dropbox Public folder, I can access this from any other device, such as my iPhone.

How it Works

To install, download and copy the giffed.workflow file to ~/Library/Services.

Giffed operates as a Finder service, accessible from the Services menu. To use Giffed, select a folder containing animated GIFs and then select Giffed from the Services menu. Giffed will then perform the following actions:

  1. A folder named “_thumbs” is created within the specified folder, and 200×200 non-animated thumbnails of each GIF are created and copied into it.
  2. Giffed then looks at each of your GIF’s metadata and extracts any Spotlight comments that have been set.
  3. An index.html file is created (based upon [Bootstrap][8]) that displays these thumbnails. Each thumbnail has a relative link to its corresponding full-size GIF.
  4. The Spotlight comments are also inserted into the HTML page as hidden elements, making them fully searchable from the search field.
  5. A notification is displayed once the process is complete.

Depending on how many GIFs you have, the process can take several minutes. I’ve tested it with a folder of 3,000 GIFs (seriously) and it took about 4-5 minutes to complete.

Viewing and Searching GIFs

If you store your GIF collection within your Dropbox Public folder, you can then access the HTML file and, as a result, all of your GIFs. The HTML file that Giffed creates requires no server-side procesing and no external assets – Giffed uses CDN-hosted Bootstrap and jQuery files.

By default, the web page displays all of your GIF collection. Using the search field at the top of the page, you can filter the GIFs based upon their filename or Spotlight comments. To view all images again, just press “Reset”.

(file: text: Download Giffed).