Draft, please do not publish, changes expected 7 min read 1,643 words 1 images 2 links
Creating a photoblog with Cloudinary and Nuxt
I upload files to Cloudinary through automator actions paired with bash scripts
I use the Cloudinary JS SDK to query the most recent photos, EXIF data, and add/remove tags
I use Nuxt to query the API and display the images on my Netlify-hosted website
Automator Actions
Automatically uploading screenshots
Upload all green-tagged files to Cloudinary through Folder Action
Getting EXIF data from a resource
Getting last X photos uploaded
Nuxt API endpoint: /server/api/cloudinary.ts
Fetching photos through Nuxt API
Adding photo-blog tag
All media starts in ~/dump/
I had a habit of creating new folders for a project, but then not really finishing that, and all of the media would grow cobwebs.
Apple Shortcuts & Automator
The first step is getting my files organized on my local computer. This process usually starts with plugging in an SD card from my fujifilm camera, helmet cam, or field audio recorder.
Import SD card to ~/dump/
First I use Applescript to show a dialog to ask myself whether to import or not.
If the user selects "Yes" we continue on to this shell script
Organize ~/dump/ into ~/media/
Every once in a while, when the folder grows a little too big and unwieldy, I have a shell script as part of a shortcut (which means I can run it from an icon in my dock) that takes everything in ~/dump/ and organizes it into a folder structure by month, day, and media type.
Draft script to move from ~/dump/ into organized folders in ~/media/
Upload to the web
The finder is an extremely powerful way to look at, organize, and tag files. Instead of recreating these things haphazardly in my own media library, I'd rather use one of the best ones in existence and augment it a bit to do my bidding.
I naturally found myself using a system of tagging photos with yellow for "maybe" and green for "publish". I'd import an SD card for a folder, scroll through it in finder, and slowly gather my picks. Then I'd select all the green files and drag them to another folder, or upload and publish them somewhere. I figured it would be best to try and automate what I was already doing.
So I created a very basic shortcut that uploads yellow/green files in the current directory to Cloudinary. This also allows you to right-click on a folder and upload all the green-tagged media to Cloudinary.
Get all Cloudinary photos for a week
Now that all of this content has been stored on Cloudinary, we want a way to get it back out. We are going to need to access the Cloudinary admin, and use our secret, so this has to be done on the server side instead of the client side.
Here's a rough mockup of what we are going to want to do:
I am creating my gallery as a [Nuxt app] (https://github.com/ejfox/nuxt-template-2023) so I think the best way to fetch my new photos is to create them as a Nuxt Server API so that when I go to myapp/api/latest-photos this script will run, fetch the latest photos, add them to the DB if necessary, and return the list so it can be displayed.