This guide will show you how to programmatically create a simple video slideshow template with Shotstack. This can be achieved by using one of our SDKs or JSON.

Base Edit

Start by creating an Edit for your video slideshow. Here's an example of an Edit in JSON format that displays one image for 5 seconds:

{
    "timeline": {
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3.amazonaws.com/images/woods1.jpg"
                        },
                        "start": 0,
                        "length": 5
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 1024,
            "height": 576
        }
    }
}

Create a video slideshow programmatically

To create a slideshow with multiple images you can dynamically generate the Edit using a loop. For each image a new clip is dynamically added to the timeline.

Below are a few snippets on how to create the template JSON dynamically:

Javascript

let template = {
  timeline: {
    tracks: [
      {
        clips: [],
      },
    ],
  },
  output: {
    format: 'mp4',
    fps: 25,
    size: {
      width: 1920,
      height: 1080,
    },
  },
};
 
const slides = [
  'https://shotstack-assets.s3.amazonaws.com/images/woods1.jpg',
  'https://shotstack-assets.s3.amazonaws.com/images/woods2.jpg',
];
 
let start = 0;
for (let i = 0; i < slides.length; i++) {
  let newClip = {
    asset: {
      type: 'image',
      src: slides[i], // Set src to the current slide
    },
    start: start, // Set start to the current start value
    length: 5,
  };
  template.timeline.tracks[0].clips.push(newClip); // Push a new clip object
  start += 5; // Increment start for the next clip
}
 
console.log(JSON.stringify(template, null, 2));

Python

template = {
    "timeline": {
        "tracks": [
            {
                "clips": [],
            },
        ],
    },
    "output": {
        "format": "mp4",
        "fps": 25,
        "size": {
            "width": 1920,
            "height": 1080,
        },
    },
}
 
slides = [
    'https://shotstack-assets.s3.amazonaws.com/images/woods2.jpg',
    'https://shotstack-assets.s3.amazonaws.com/images/woods3.jpg',
]
 
start = 0
for slide in slides:
    clip = {
        "asset": {
            "type": "image",
            "src": slide,
        },
        "start": start,
        "length": 5,
    }
    template["timeline"]["tracks"][0]["clips"].append(clip)
    start += 5
 
print(template)

PHP

<?php
 
$template = [
    "timeline" => [
        "tracks" => [
            [
                "clips" => [],
            ],
        ],
    ],
    "output" => [
        "format" => "mp4",
        "fps" => 25,
        "size" => [
            "width" => 1920,
            "height" => 1080,
        ],
    ],
];
 
$slides = [
    'https://shotstack-assets.s3.amazonaws.com/images/woods2.jpg',
    'https://shotstack-assets.s3.amazonaws.com/images/woods3.jpg',
];
 
$start = 0;
foreach ($slides as $slide) {
    $clip = [
        "asset" => [
            "type" => "image",
            "src" => $slide,
        ],
        "start" => $start,
        "length" => 5,
    ];
    array_push($template["timeline"]["tracks"][0]["clips"], $clip);
    $start += 5;
}
 
echo json_encode($template, JSON_PRETTY_PRINT);

Rendering your video slideshow

After generating the JSON you can render and retrieve your video from the render endpoint.

You can find more information on how to send API requests in the developer docs.

API FAQs

How to create a video slideshow

Base Edit

Create a video slideshow programmatically

Javascript

Python

PHP

Rendering your video slideshow