Every content management system needs a media library. And Digital Shopfront CMS was no different.
I knew I would need a media library in the CMS so site owners and users could upload, manage, and use photos, videos, and other media files.
And while naturally it made sense to include it in the ArtisanPack UI CMS Framework package, I ended up doing something completely different.
Here’s how I built the ArtisanPack UI Media Library package.
The Problem I was Facing
As I was building out the Digital Shopfront CMS and the ArtisanPack UI CMS Framework package, I knew I needed to add media library functionality to upload, manage, and sort media files.
Initially, I started building out functionality within the CMS Framework package.
But the more I built it, the more I realized it needed to be its own separate package. While it’s primarily for the CMS Framework package and content management systems, there are scenarios where it could be used outside those contexts.
So I started pivoting toward making it its own package.
The Plan for the Media Library Package
The plan for the media library was pretty straightforward.
First and foremost, users needed to be able to upload media files and display them wherever they wanted.
Also, there needed to be a way for them to manage their media files. One of the most significant problems with WordPress, where I come from, is that there’s no built-in way to manage media files in core. So, incorporating folders, categories, and tags for organization was paramount for me.
Additionally, I wanted to add support for converting images into modern image formats by default.
With that plan all written out, it was time to get to building it.
How I Built the Media Library Package
Building the Media Library package was honestly one of the first things I did with Claude Code, and I really enjoyed the experience.
I was able to give it the notes I had from the plan I had written. Then we worked together to create a detailed implementation plan. It included configuration settings, database schema, models, and everything that goes with them: Livewire components, views, and more.
Essentially, that time spent planning focused on building it as successfully as possible and the way I wanted it built.
Once we had the plan nailed down, it was time to implement it in code.
I was surprised by the speed at which Claude was able to build things. It was so much faster than JetBrains’ Junie. In fact, this would have taken me about three weeks to do with Junie. But with Claude, it was about a week and a half.
The result was a Media Library package that any developer can drop into their website or app, providing a great user experience out of the box. All for free since it’s open source.
The Future of the Package
The future for the ArtisanPack UI Media Library package is pretty bright.
I’m looking to add some image editing features to allow users to be able to do basic photo editing, like cropping, resizing, etc., inside the app or website. I’d also like to add advanced search capabilities to help users find their media more quickly and easily. And I’d like to add album and collection support, along with bulk import and export.
Plus, since it’s an open-source package, I’m open to suggestions on what to include.
But it feels like it’s in a really good place right now.
