Media Library Functionality

Hello everyone,

I recently started checking about ghostjs as my wife wanted to build a website to showcase her work with photography. I hosted a ghost instance in the free tier of fly.io (for personal reasons) and one of the first things I noticed was the lack of file management.

So, after checking a bit online, the forum and seeing the posts like this one, I decided to start implementing the feature myself. Here on this link you can see a preview of how it looks like (UI is a little bit different from the mocks above hehe).

Demo Video: ghostjs-demo-file-mgt.mov - Google Drive

There are some important aspects, at the moment, on how it is working. But ofc, everything is fully open for debate and that’s the main reason I am posting it here.

  • Currently, only images added to pages/posts are tracked
  • As soon as the image is uploaded in a post, it will be linked to it
  • If an image is removed from a post, as soon as the post is saved (automatically or manually) it will be unlinked
  • If an image is deleted from the file manager, it will be removed from all posts (without leaving a broken image on it)
  • Images that are unlinked are not deleted automatically, it will only show as linked to “0 posts”
  • A hash is created from the image content, so, if you upload the exact same image multiple times, only the 1st one will be stored in the server

There are a lot of things that I would like to do, like:

  • Migration of old posts, to create the file entity and link to them during upgrade
  • A way to see in which posts the image is being used
  • Delete images in bulk, maybe pre-selecting them all
  • Edit image details that would reflect the alt/description across all posts (since usually, a description of an image rarely changes when it is used multiple times)
  • Replacing an image with another one and it would reflect in all posts
  • A way to select an image from the gallery when editing a post
  • Unit tests hehe :P

There are several things still missing to code (and test), but I hope to get some early feedback from you all and see what do you think. :)

Ah, btw, I introduced some very few features during this process. One of them for example is the ability to load images of different sizes by their “key” (not only their width/height value).

Instead of “/content/images/size/w256h256/2024/03/example-1.jpg”
You can do “/content/images/size/thumbnail/2024/03/example-1.jpg”

5 Likes