How to get all images from cloudinary and display them in my web page ?

Follow

yuoenss assrear

• February 25, 2021 13:55

I have a node.js website that serve 2 html pages:

-First page to upload images using the upload widget. (this works great )

-Second page where i wanna display all images from a folder called  "LostDocs"(which ofc exist in the media library).

 

How can i dynamically display all the images in the second page from "LostDocs" ?

Note: I can Display single images by pasting their URL inside the img tag, but i can't rely on this since the website will have thousands of images later on.

thank you in advance 

1

• 

  Loic Verger Del Bove

  • February 26, 2021 13:39

  Hi,

  You should be able to do this by using the Search API to list all the images URL in your `LostDocs` folder and then display it on your second page. Here is a script that will list all the URLs and put them in an array:

  var result = [];
  
  var options = { resource_type:"image", folder:"your_folder", max_results: 500};
  
  function listResources(next_cursor) {
   if(next_cursor) {
    options["next_cursor"] = next_cursor;
   }
  console.log(options);
  cloudinary.api.resources(options, function(error,res){
   if (error) {
    console.log(error);
   }
   var more = res.next_cursor;
   resources = res.resources;
  
   for(var res in resources) {
    res = resources[res];
    var resultTemp = [];
    var url = res.secure_url;
    resultTemp.push(url);
    result.push(resultTemp);
   }
  
   if (more) {listResources(more);}
    else {console.log("done");}
   });
  }
  listResources(null);

  Best,

  Loic

  1

  Comment actions Permalink
• 

  yuoenss assrear

  • February 28, 2021 22:22

  Thank you for answering my question !

  Now, how can i integrate those results into my html page ? Do i have to use a template engine like ejs ?

  the script you provided works fine but only answer my question partly.

  thanks again 

  0

  Comment actions Permalink
• 

  Loic Verger Del Bove

  • March 01, 2021 12:00

  Hi there,

  Since you have the list of URL on the backend, you can now either use a template engine (on my side I use pug) or not to render the images but in any case, you will need to loop through this list and create an `img` element for each URL. 

  Hope that helps.

  Best,

  Loic

  0

  Comment actions Permalink

Post is closed for comments.