Image Gallery with Cloudinary

Discord Q&A strapi-questions
1

Does anyone here have a tutorial for me on how I can use strapi to create an image gallery with folders?

This topic has been created from a Discord post (1239957559595634789) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

I’d check out Strapi’s Media Library: Introduction to the Media Library | Strapi Documentation

3

I just don’t know how to integrate this into my nextJS website as a gallery, I want different folders and when you open them on the website, you have the images. Or are there components for this?

4

it sounds like this is a front-end question. I’m not experienced with NextJS but did some googling and found:

The general approach would probably be:

  • Auth
  • Page with folders (Maybe image and span wrapped in an actionable element)
  • User clicks on folder and that loads a page showing sub-folders and images

If you have more specific questions I’d be able to be of greater help. “How do I retrive a user’s folders (Media Gallery? Custom?) in my Strapi v4 project” But right now the question is really open.

5

it is complicated to save images on strapi by folder directly on cloudinary, right now it is posible to setup a target folder for all multimedia from the plugin configuration file, but that, only a global one.

6

Do you know how to make this work? I set up the configuration in my config.plugins.js like so

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
      actionOptions: {
        upload: {
          folder: env("UPLOAD_FOLDER", "fefa-import"),
        },
        uploadStream: {},
        delete: {},
      },
    },
  },
});

But my uploads still go to the root folder.

7

So, it should be:

 upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
      actionOptions: {
        upload: {},
        uploadStream: { folder: env("CLOUDINARY_FOLDER") },
        delete: {},
      },
    },
  },
8

Awesome, thanks!

9

so, it did work, right?