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…