User Research: Share how you use the Media Library plugin

Hi everyone :wave:
I’m Raff, Product Designer at Strapi.
I’d love to learn more about your usage of the Media Library plugin.
Would you be interested to share your feedback in a 15-20 min chat?
Thank you in advance for your help making Strapi even better :slight_smile:

1 Like

I’m use Media Libarary plugin -but there are some disandvantage.
My task : small e-shop with 7000 photos

I’m install cloudinary plugin - to get resized set of original photo - that I’m need and to build srcset including webp image , retina version and so on.

I’m preload my existing photo and I’m write direct to upload_file table and write searcheble name to name field.

Alternative text and Caption I shall use for SEO purposes.

Because I’m programaticaly upload my photo I set fields in database like:
File Name: child/care/podguz/12355
alternativeText: Подгузники Merries S (4-8 кг), 82 шт, 1 упаковка. Похожие товары
In this case 12355 - is good id

I’m don’t understand how I can add new photo - or replace photos in my existing good description.
What’s the problem?
I’m add new photo to media library. After uploading - I can modify only alternativeText and can’t modify File Name. Occationly I’m need to add one photo to several goods - and not convinient way to search photo using only alternativeText.

My proposal:
Please, make Media library with folders structure - it simplified work with thousands of photos

Hi Gayrat,
Thank you very much for your input.
I’m not a technical person unfortunately so I won’t be able to help you with the specifics. But I’m sure someone on the forum will be able to help you :slight_smile:
Regarding the folders structure you suggest, could you tell me more about it?
Do you have examples of products (CMS or not) where it worked well for you?
Thanks again for your help :slight_smile:

Good thing:
I like how simple it is to set it up with AWS.

Complain:
The problem we had was that we used GatsbyJS for the front end, and we HAD to use gatsby-source-strapi because of the images (and we didn’t have a great experience with it), which meant we had to stop using graphql only because of the images.

So I guess the complain is not directly linked to de Media Library plugin, but of the Strapi/Gatsby stack handling of images. This is a very popular stack for many good reasons, and we thought you supported it better (the gatsby-source-strapi is an official Strapi Plug-in).

Feature I would like to see:
The number one reason of why we use GatsbyJS for the front-end is because of gastby-images-plugin wich crops the images automatically, and can even give us a SVG format of it wich is great for performance.

So basically I would like to see that with the automatic crop of the images, a SVG version to be generated too.

And (in a more abstract level) try to mimic the functionality of gatsby-images-plugin by maybe giving a React image component that is meant to go with Strapi Media Library so that I don’t have to care about optimizing and displaying the images properly.

Good handling of images is probably the biggest difference between a performant site and a slow one, but is a pain to do it right, maybe Strapi can give us a hand on that.

Outside of that it has worked very well for us

1 Like

Antoine
If you have standart jpeg inages - it can not be converted to SVG because SVG is vector images.

If you want automatic image processing (resizing, rotating, OCR, background removal, image filters) - Strapi have this option :slight_smile:

You can use Cloudinary and simply install Strapi plugin for Cloudinary.io

Ok, Raff may be you have more experience :slight_smile:

Let’s suppose you have > 1000 pictures in your e-shop.
How you can organize it in existing Media Library (and describe it to content manager)?
From time to time you will need to change photos for some goods and some good’s group can share some photos.

What’s will be the best way to organize photos ?

I’m use windows 10 and the best photo organization photo software is https://www.acdsee.com/ (IMHO)
In short it has:

  1. folder - provide by Windows 10
  2. tags

To realize tags - you have to add to Media Libarary only one text field - or special “tag” field (to separate tags) - like stackoverflow.com

Exist Alternative text and Caption fields is used for SEO purposes.

If tags field will be available in Media library - it will cover folder future

Hi Gayrat,
Thank you so much for your helpful insights.
The examples you shared really help to understand clearly your pain points and potential solutions.
Regarding the tag system, which tags you would use for your e-shop example please? Just 5 or 10 would already give me a good idea of the usage.
Currently, are you the person uploading assets and using them in the content manager? Or different people do it?
Thanks again for your great help :slight_smile:

1 Like

At the first attempt, I upload my 7000 pictures as plain files to Cloudinary.
Now I’m thinking to replace the name field at table upload_file to set of tags like:

Clothing
Men
T-Short
Legendary Whitetails (brand)
B01KKPVCOM (article)

Later content manager can put in search string B01KKPVCOM and see all photo, available to this article but sometimes photo can be shared by different articles - I’m don’t know that doing at this point - or put all articles code to name field - but it has only 255 byte length - or not put article.

Now I’m write strapi plugin to represent react checkbox tree - user will can select some categories for one good - but it can’t be placed to media manager.
image

This tree with search field on the top - will be the best solution (IMHO).

At this time I don’t have ready answer

I agree that the lack of folder structure and tags is a real pain point in strapi.

We are building a common API for a school network with some common data shared among schools and some reserved per school. Administrators are having a hard time finding back their content (mostly pictures or downloadable PDF like leaftlets, brochure, forms…) and editing the right one without fear of unwanted consequences.

Second major pain point is not being able to specifically target some extensions when adding an upload field. “Media” isn’t generic enough, I’ve seen a lot of administrators trying to add video when I specifically ask for a picture.

Those are the first two pain point we are dealing with.

One nice to have addition would be restricting picture to a given ratio. For instance, Twitter Share picture should be 1200x600, so only displaying picture with a 2:1 ratio when selecting a picture could be a huge help when dealing with less technical administrators

1 Like

Hi Gayrat,
Sorry for the late reply.
We are busy currently working on Strapi v4 :slight_smile:
Hopefully, it’ll enable us to improve our existing features, such as the media library.
I’ll reach out back once we prioritize these updates.
Thanks again for your great insights.

1 Like

Hi Norbz,
Thank you so much for your insights.
Your use case is very interesting.
For the extension issue, have you tried to play with these settings in the content type builder?


Thanks again for your feedback :slight_smile:

Yes, but that’s the issue : predefined groups.

What about restricting to MP3 for an audio player for instance ? :slight_smile:
Even “Images” is too restrictive. It should be based on full MIME type.

Edit : Sorry, I thought I had answered you, but my answer was “saved” in my browser, but not sent…

Hello @Raff, just wanted to add my 2 cents.
We’ve spent some time trying to find a solution for DAM that would be extremely simple and would support various FS backends.
Some solutions are super complicated, some written in Java or PHP (eww) and at the end, we thought that Strapi could solve this pretty nicely. No content types, no extra plugins, just plain Strapi with Media library.

Our requirements were:

  • file upload of any type
  • searching over an API
  • AWS S3 integration
  • Being able to provide metadata with files

I’ve done some research with strapi v4 and it looks pretty nice and solves most of the painful issues. Having the image crop is a big plus here as well.
One pain point that the default integration does not provide us with is the metadata. I have not found a way to extend the media library or the media modals to be able to provide custom input fields, or to extend the media library to provide own modals with input fields or similar.
It might be possible through some content-type connections, but is very ugly solution

This pretty much disqualifies strapi for us, although I’m going to spend some more time trying to get this working and see if we can come up with the least painful resolution without having to implement the library ourselves :slight_smile:

So my feedback/feature request would be to allow extensibility into media library.

Gayrat
You actually can create an SVG out of a JPEG, but with like 99% data loss. This can be used as a loading place holder for the image, it looks quite elegant.

I have done this with Gatsby Images (https://baco.rest/menu/platos). But I would like to bypass Gatsby images that has to re-build all the images every time, to instead do it once the image is uploaded and then stored in the db.

I would like Gatsby to handle that.

I just want to re-formulate what I said a year ago,

I got used to having progressive image loading, like medium or even Google images. By that I mean not showing just a loader, but an accent color or a blurred version of the image (see traced placeholder here Support "traced placeholder" generation in gatsby-plugin-sharp · Issue #2435 · gatsbyjs/gatsby · GitHub)

Posible solutions for Strapi:

But for now I have to either use Gastby Image, or just show a loading because the small image is too big to load fast enough.

Note: have you considered automatic tagging like Firebase is now doing? Photoprism being an open source project that already does it pretty well (tested myself) GitHub - photoprism/photoprism: Photos App powered by Go and Google TensorFlow 🌈 🎄

I use the media library plugin to upload STLs. These STLs will be sent to a manufacturer to create on purchase. If only I could upload them via the API!