{"id":28207,"date":"2021-06-07T19:33:27","date_gmt":"2021-06-07T19:33:27","guid":{"rendered":"http:\/\/Video-Slideshow-Generation-with-Cloudinary"},"modified":"2021-06-07T19:33:27","modified_gmt":"2021-06-07T19:33:27","slug":"video-slideshow-generation-with-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/","title":{"rendered":"Video Slideshow Generation with Cloudinary"},"content":{"rendered":"

When you have an e-commerce site or you want to add some visual customization for your users, creating a video slideshow with specific images can be a nice touch. If you have existing images and videos, all of them can be combined to make something special for your users and potentially increase your sales and user retention.<\/p>\n

In this article, we\u2019ll walk through how to make a custom video slideshow using Cloudinary. If you don\u2019t have a Cloudinary account already, you can sign up for a free one<\/a> and start adding images and videos that you can use for your website.<\/p>\n

When you log into your account, you\u2019ll be taken to the Dashboard. From there, navigate to the Media Library. This is where you can add any images and videos you want to use.<\/p>\n

\"the<\/p>\n

Setting up the project<\/h2>\n

We\u2019ll be making a simple page to show custom videos to different users with React. To start, open a terminal (I\u2019m using VSCode<\/a>) and run:<\/p>\n

npx create-react-app video-generator\ncd video-generator\n<\/code><\/span><\/pre>\n
You can delete the CSS files and remove the associated import statements in the App.jsx<\/em> and index.js<\/em> files.<\/p>\n
With your Cloudinary account and our newly created React app, we can start making custom slideshows!<\/p>\n
Making a slideshow<\/h2>\n
In the App.jsx<\/em> file, you can delete everything and just follow along here. First, we need to install the styled-components<\/code> package so that we can arrange the videos on a page with some CSS-in-JS.<\/p>\n
npm i styled-components\n<\/code><\/span><\/pre>\n
Now let\u2019s import a couple of packages at the top of the App.jsx<\/em> file.<\/p>\n
import<\/span> React from<\/span> \"react\"<\/span>;\nimport<\/span> styled from<\/span> \"styled-components\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we can create the App<\/code> component and export it.<\/p>\n
function<\/span> App<\/span>(<\/span>) <\/span>{}\n\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s say you have data that shows the products people look at the most frequently on your site and you want to show three videos on your home page that highlights them. We\u2019ll start by making a couple of styled-components, one to style our videos and one to contain those videos.<\/p>\n
const<\/span> Video = styled.video`\n  height: 200px;\n  padding: 24px;\n  width: 350px;\n`<\/span>;\n\nconst<\/span> VideoContainer = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  width: 100%;\n`<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With these styled-components in place, we can start working on creating the video slideshows with Cloudinary.<\/p>\n
Slideshow with only images<\/h3>\n
With that background info on how slideshow generation works, let\u2019s start adding a few things to our React app.<\/p>\n
Inside of the App<\/code> component, we\u2019re going to add a new object with the parameters we need to pass to Cloudinary to generate our video. This will contain the height<\/em>, width<\/em>, video duration<\/em>, slide duration<\/em>, transition duration<\/em>, and images<\/em> you want to show in the video. We\u2019ll also create an array containing the public_id<\/code> of each image we want to show in the slideshow.<\/p>\n
const<\/span> vidVars = {\n  w<\/span>: 500<\/span>,\n  h<\/span>: 500<\/span>,\n  du<\/span>: 15<\/span>,\n  sdur<\/span>: 3000<\/span>,\n  tdur<\/span>: 1500<\/span>,\n};\n\nconst<\/span> vidA = [\"3dogs\"<\/span>, \"reindeer\"<\/span>, \"cat\"<\/span>];\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now let\u2019s add the first video using our styled-components.<\/p>\n
return (\n  <VideoContainer<\/span>><\/span>\n    <Video<\/span> controls<\/span>><\/span>\n      <source<\/span>\n        src<\/span>={<\/span>`https:<\/span>\/\/res.cloudinary.com<\/span>\/milecia<\/span>\/video<\/span>\/upload<\/span>\/fn_render:w_<\/span>${\n          vidVars.w<\/span>\n        };h_<\/span>${vidVars.h<\/span>};du_<\/span>${vidVars.du<\/span>};vars_<\/span>(sdur_<\/span>${vidVars.sdur<\/span>};tdur_<\/span>${\n          vidVars.tdur<\/span>\n        };transition_s:circlecrop<\/span>;slides_<\/span>(${vidA<\/span>\n          .map<\/span>((mediaDoc<\/span>) =><\/span> `(media_i:${mediaDoc})`)\n          .join(\";\")}))\/f_auto,q_auto\/slideshow_hlhpzw.mp4`}\n        type=\"video\/mp4\"\n      \/>\n      Your browser does not support the video tag.\n    <\/Video<\/span>><\/span>\n  <VideoContainer<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Make sure you get the exact name of the slideshow template from your Media Library. You\u2019ll need to update the name in the URL we created. It will be something different from slideshow_hlhpzw.mp4<\/code>.<\/strong><\/p>\n
We\u2019ve taken advantage of template strings in JavaScript to dynamically generate the slideshow URL for us using the general video settings object we created and the array of the public IDs of our images.<\/p>\n
If you run the app with the npm start<\/code> command in your terminal, you should see something similar to this.<\/p>\n
\"first<\/p>\n
With the first video in place, let\u2019s add a couple more arrays defining the images we want to display in the other two slideshows.<\/p>\n
const<\/span> vidB = [\"reindeer\"<\/span>, \"3dogs\"<\/span>, \"dessert\"<\/span>];\n\nconst<\/span> vidC = [\"beach-boat\"<\/span>, \"3dogs\"<\/span>, \"reindeer\"<\/span>];\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now that we know the images we\u2019re going to show, let\u2019s go ahead and add the other two videos using the styled component.<\/p>\n
<Video<\/span> controls<\/span>><\/span>\n  <source<\/span>\n    src<\/span>={<\/span>`https:<\/span>\/\/res.cloudinary.com<\/span>\/milecia<\/span>\/video<\/span>\/upload<\/span>\/fn_render:w_<\/span>${\n      vidVars.w<\/span>\n    };h_<\/span>${vidVars.h<\/span>};du_<\/span>${vidVars.du<\/span>};vars_<\/span>(sdur_<\/span>${vidVars.sdur<\/span>};tdur_<\/span>${\n      vidVars.tdur<\/span>\n    };transition_s:circlecrop<\/span>;slides_<\/span>(${vidB<\/span>\n      .map<\/span>((mediaDoc<\/span>) =><\/span> `(media_i:${mediaDoc})`)\n      .join(\";\")}))\/f_auto,q_auto\/slideshow_hlhpzw.mp4`}\n    type=\"video\/mp4\"\n  \/>\n  Your browser does not support the video tag.\n<\/Video<\/span>><\/span>\n<Video<\/span> controls<\/span>><\/span>\n  <source<\/span>\n    src<\/span>={<\/span>`https:<\/span>\/\/res.cloudinary.com<\/span>\/milecia<\/span>\/video<\/span>\/upload<\/span>\/fn_render:w_<\/span>${\n      vidVars.w<\/span>\n    };h_<\/span>${vidVars.h<\/span>};du_<\/span>${vidVars.du<\/span>};vars_<\/span>(sdur_<\/span>${vidVars.sdur<\/span>};tdur_<\/span>${\n      vidVars.tdur<\/span>\n    };transition_s:circlecrop<\/span>;slides_<\/span>(${vidC<\/span>\n      .map<\/span>((mediaDoc<\/span>) =><\/span> `(media_i:${mediaDoc})`)\n      .join(\";\")}))\/f_auto,q_auto\/slideshow_hlhpzw.mp4`}\n    type=\"video\/mp4\"\n  \/>\n  Your browser does not support the video tag.\n<\/Video<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now that you have all three videos in your app, you should see something like this in your browser.<\/p>\n
\"all<\/p>\n
This is how we handle slideshow generation with just images, but we do have the option to include videos within our slideshows as well.<\/p>\n
Slideshow with images and videos<\/h3>\n
Adding a video to the slideshow means we change a few settings in the URL we generate.<\/p>\n
Instead of using media_i:public_id<\/code>, we\u2019ll have to use media_v:public_id;type_s:video<\/code>. This will tell Cloudinary that the asset we\u2019re using is a video and it will be handled accordingly.<\/p>\n
We\u2019ll add an object with two arrays, one containing the images and the other containing the videos, to our App<\/code> component.<\/p>\n
const<\/span> vidD = {\n  images<\/span>: [\"reindeer\"<\/span>, \"sample\"<\/span>],\n  videos<\/span>: [\"elephants\"<\/span>, \"sea-turtle\"<\/span>],\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Lastly, we\u2019ll add one more <Video><\/code> to the component.<\/p>\n
<Video controls>\n  <source\n    src={`https:\/\/res.cloudinary.com\/milecia\/video\/upload\/fn_render:w_${<\/span>\n      vidVars.w\n    };h_${vidVars.h};du_${vidVars.du};vars_(sdur_${vidVars.sdur};tdur_${\n      vidVars.tdur\n    };transition_s:circlecrop;slides_(${vidD.images\n      .map((mediaDoc) => `(media_i:${mediaDoc})`)\n      .join(\";\"<\/span>)}${vidD.videos\n      .map((mediaDoc) => `(media_v:${mediaDoc};type_s:video)`)\n      .join(\";\"<\/span>)}))\/f_auto,q_auto\/slideshow_hlhpzw.mp4`}\n    type=\"video\/mp4\"<\/span>\n  \/>\n  Your browser does not support the video tag.\n<\/Video>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Completed code<\/h2>\n
You can take a look at the complete code in this CodeSandbox<\/a> or clone the GitHub repo<\/a>!<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
Working with videos can be tricky, but Cloudinary does make it easier. Keep in mind that this is a beta feature, so it\u2019ll likely change a bit later.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28208,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,371,303],"class_list":["post-28207","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nVideo Slideshow Generation with Cloudinary<\/title>\n<meta name=\"description\" content=\"You can create your own custom video slideshows with images you already have quickly using Cloudinary. In this article, we'll set up a few different slideshows showing you how to create your own videos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Video Slideshow Generation with Cloudinary\" \/>\n<meta property=\"og:description\" content=\"You can create your own custom video slideshows with images you already have quickly using Cloudinary. In this article, we'll set up a few different slideshows showing you how to create your own videos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-07T19:33:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Video Slideshow Generation with Cloudinary\",\"datePublished\":\"2021-06-07T19:33:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/\",\"name\":\"Video Slideshow Generation with Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA\",\"datePublished\":\"2021-06-07T19:33:27+00:00\",\"description\":\"You can create your own custom video slideshows with images you already have quickly using Cloudinary. In this article, we'll set up a few different slideshows showing you how to create your own videos.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA\",\"width\":1000,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Video Slideshow Generation with Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Video Slideshow Generation with Cloudinary","description":"You can create your own custom video slideshows with images you already have quickly using Cloudinary. In this article, we'll set up a few different slideshows showing you how to create your own videos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/","og_locale":"en_US","og_type":"article","og_title":"Video Slideshow Generation with Cloudinary","og_description":"You can create your own custom video slideshows with images you already have quickly using Cloudinary. In this article, we'll set up a few different slideshows showing you how to create your own videos.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/","og_site_name":"Cloudinary Blog","article_published_time":"2021-06-07T19:33:27+00:00","og_image":[{"width":1000,"height":420,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/"},"author":{"name":"","@id":""},"headline":"Video Slideshow Generation with Cloudinary","datePublished":"2021-06-07T19:33:27+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA","keywords":["Guest Post","Image","Javascript","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/","name":"Video Slideshow Generation with Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA","datePublished":"2021-06-07T19:33:27+00:00","description":"You can create your own custom video slideshows with images you already have quickly using Cloudinary. In this article, we'll set up a few different slideshows showing you how to create your own videos.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA","width":1000,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/video-slideshow-generation-with-cloudinary\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Video Slideshow Generation with Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925114\/Web_Assets\/blog\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2\/9a0e589e1797b5229fbfcf4c8bd03dff32ce054e-1000x420-1_282088baa2.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28207"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28207\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28208"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Defining the slideshow elements<\/h3>\n
Videos are created using this URL syntax given in the Cloudinary docs<\/a>:<\/p>\n
https:\/\/res.cloudinary.com\/<\/a>cloudname<\/code>\/video\/upload\/fn_render:global-settings<\/code>;vars_(slide-settings<\/code>(individual-slide<\/code>))\/global-transformations<\/code>\/template<\/code>.ext<\/code><\/p>\n
You can get the cloudname<\/code> from your Cloudinary console.<\/p>\n
\"your<\/p>\n
The global-settings<\/code> are general settings applied to your video, like the height and width that Cloudinary should return as well as the duration that the video should be.<\/p>\n
The slide-settings<\/code> are responsible for the settings that apply to each slide. This will include things like how long the image is shown before switching to the next one, what kind of transition is applied between slides, and how long the transition lasts.<\/p>\n
The individual-slide<\/code> section is how you add images or videos based on their public_id<\/code> to your slideshow. We\u2019ll use this to add the specific images we want a little later.<\/p>\n
The global-transformations<\/code> are how you can take advantage of the regular transformations Cloudinary has available, like automatically adjusting the quality of the video so that it\u2019s optimized for your users.<\/p>\n
The template<\/code> is how we let Cloudinary know we\u2019re going to create a video slideshow. You\u2019ll need to upload the template for the slideshow<\/a>.<\/p>\n
Since video slideshow generation is a beta feature, this is the only template you can work with for now.<\/em><\/p>\n