Turn images into a slideshow videos using PHP

Creating video slideshows is a popular and engaging way to showcase collections of images. Manually editing can be time-consuming and complex, especially when adding advanced features like animations and transitions. However, using the Shotstack API and PHP SDK can simplify the process.

Shotstack is a cloud-based video editing platform with an easy-to-use API. It allows you to add animations, transitions, effects, and music. The PHP Video Editor SDK integrates Shotstack's features into your PHP application, providing the features needed to automatically generate videos. Shotstack provides the infrastructure to render videos in the cloud, so you don't have to worry about the technical details.

In this article, you will learn to turn images into a slideshow video with background music using PHP.

Creating a slideshow video using PHP

At the end of this tutorial, you will be able to generate the following slideshow video using PHP:

Let's dive in!

The Shotstack API and SDK

Shotstack provides a cloud-based video editing API. Working with media applications is not easy. Editing and producing videos at scale can take hours, and rendering them requires significant resources. But with the help of Shotstack's rendering infrastructure, media applications can be built and scaled smoothly.

You can sign up for a free developer account to get your Shotstack API key.

Requirements

PHP 7.3+ and the SDK composer package are the prerequisites for this tutorial. You can install the composer package using the following command:

composer require shotstack/shotstack-sdk-php

Create a PHP script for turning images into a slideshow

To begin, in your preferred text editor or IDE, create a PHP script file, let's call it slideshow.php.

Import the Shotstack SDK classes

Let's import the needed classes for our project from the Shotstack SDK that will be used for editing and rendering our video. You can check the README for documentation for each of the classes used in the code.

<?php
require 'vendor/autoload.php';

use Shotstack\Client\Api\EditApi;
use Shotstack\Client\ApiException;
use Shotstack\Client\Configuration;
use Shotstack\Client\Model\Edit;
use Shotstack\Client\Model\Output;
use Shotstack\Client\Model\Timeline;
use Shotstack\Client\Model\Track;
use Shotstack\Client\Model\Clip;
use Shotstack\Client\Model\ImageAsset;
use Shotstack\Client\Model\Soundtrack;
?>

Setting up the API client

Then add the following code, configuring the API client with the API URL and key provided to you.

$config = Configuration::getDefaultConfiguration()
    ->setHost('https://api.shotstack.io/stage')
    ->setApiKey('x-api-key', 'your_key_here'); // use the API key issued to you

$client = new EditApi(null, $config);

Replace your_key_here with the sandbox API key provided, which is free for testing and development.

Adding pictures to the slideshow

Now that we have a slideshow, we need to define an array of static images. The images must be hosted online and reachable via a recognized or public URL. These stock photos of real estate from Pexels, stored in our S3 bucket, will be used. Of course, you can replace it with your own image URLs and you can add more than five. The images must be publicly available.

$images = array(
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg",
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate2.jpg",
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate3.jpg",
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate4.jpg",
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate5.jpg"
);

Creating a video by combining images

We now want to create our video by looping through the collection of photos. First, we'll create clips by iterating over the images array and specifying the start time, length, and motion effect.

Then, to create the clip playback properties and add them to our clips array, we use the Clip model and the ImageAsset model, respectively:

$clips = [];
$start = 0.0;
$length = 3.0;

foreach ($images as $image) {
    $imageAsset = new ImageAsset();
    $imageAsset->setSrc($image);

    $clip = new Clip();
    $clip->setAsset($imageAsset)
        ->setLength($length)
        ->setStart($start)
        ->setEffect('zoomIn');
              
    $start = $start + $length;
    $clips[] = $clip;
}

For the first image, the start is set by default to 0, so the video immediately begins to play. After that, each image will be visible in the video for 3 seconds.

In addition, you can use motion effects to improve your video slideshow; for instance, in our slideshow, all images have a motion effect due to the zoomIn effect. Some of the effects are mentioned below:

• zoomIn - slow zoom in
• zoomOut - slow zoom out
• slideLeft - slow slide (pan) left
• slideRight - slow slide (pan) right
• slideUp - slow slide (pan) up
• slideDown - slow slide (pan) down

To create faster or slower motion, you can also use slow and fast variants, such as zoomInSlow or slideUpFast.

Adding the clips to a track

The Shotstack API adheres to many desktop editing software principles, such as using a timeline, tracks, and clips. For example, a timeline acts as a container for multiple tracks, each of which contains multiple clips that play over time. Thus, let's create a track and add our array of clips.

$track = new Track();
$track
    ->setClips([$clips]);

Adding a soundtrack

We need to add a soundtrack to our video to make it more engaging. An audio file URL and a fadeInFadeOut volume effect are set using the SDK's Soundtrack model. An mp3 file's URL can be added, just like with images. For instance, one from the stock photo collection on Pixabay will be used.

$soundtrack = new Soundtrack();
$soundtrack
    ->setSrc('https://cdn.pixabay.com/audio/2022/03/23/audio_07b2a04be3.mp3')
    ->setEffect(fadeInFadeOut)
    ->setVolume(1);

Setting up the timeline

The next editing stage is adding the track to the timeline. Several track arrays, the soundtrack, and a setting for the background color of the video are all contained in the timeline:

$timeline = new Timeline();
$timeline
    ->setSoundtrack($soundtrack)
    ->setBackground('#000000')
    ->setTracks($track)

Setting up the final edit and output

Finally, we need to add the timeline and output to the [edit] (https://shotstack.io/docs/api/#tocs_edit) and configure the [output] (https://shotstack.io/docs/api/#tocs_output) format. Similarly, our models Output and Edit are defined below:

$output = new Output();
$output
    ->setFormat('mp4')
    ->setResolution('sd');

$edit = new Edit();
$edit
    ->setTimeline($timeline)
    ->setOutput($output);

Sending the edit to the API for rendering

Lastly, the Shotstack API is then used to process and render the edit. The Shotstack SDK handles the conversion of objects to JSON, POSTing everything to the API, and adding the API key to the request header.

try {
    $response = $client->postRender($edit)->getResponse();
} catch (ApiException $e) {
    die('Request failed: ' . $e->getMessage() . $e->getResponseBody());
}

echo $response->getMessage() . "\n";
echo ">> render id: " . $response->getId() . "\n";

The final image to slideshow video PHP script

The final code is shown below:

<?php
require 'vendor/autoload.php';

use Shotstack\Client\Api\EditApi;
use Shotstack\Client\ApiException;
use Shotstack\Client\Configuration;
use Shotstack\Client\Model\Edit;
use Shotstack\Client\Model\Output;
use Shotstack\Client\Model\Timeline;
use Shotstack\Client\Model\Track;
use Shotstack\Client\Model\Clip;
use Shotstack\Client\Model\ImageAsset;
use Shotstack\Client\Model\Soundtrack;

$config = Configuration::getDefaultConfiguration()
    ->setHost('https://api.shotstack.io/stage')
    ->setApiKey('x-api-key', 'your_api_key'); // use the API key issued to you

$client = new EditApi(null, $config);

$images = array(
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg",
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate2.jpg",
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate3.jpg",
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate4.jpg",
    "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate5.jpg"
);

$clips = [];
$start = 0.0;
$length = 3.0;

foreach ($images as $image) {
    $imageAsset = new ImageAsset();
    $imageAsset->setSrc($image);

    $clip = new Clip();
    $clip->setAsset($imageAsset)
        ->setLength($length)
        ->setStart($start)
        ->setEffect('zoomIn');
              
    $start = $start + $length;
    $clips[] = $clip;
}

$track = new Track();
$track
    ->setClips($clips);

$soundtrack = new Soundtrack();
$soundtrack
    ->setSrc('https://cdn.pixabay.com/audio/2022/03/23/audio_07b2a04be3.mp3')
    ->setEffect("fadeInFadeOut")
    ->setVolume(1);

$timeline = new Timeline();
$timeline
    ->setSoundtrack($soundtrack)
    ->setBackground('#000000')
    ->setTracks([$track]);

$output = new Output();
$output
    ->setFormat('mp4')
    ->setResolution('sd');

$edit = new Edit();
$edit
    ->setTimeline($timeline)
    ->setOutput($output);

try {
    $response = $client->postRender($edit)->getResponse();
} catch (ApiException $e) {
    die('Request failed: ' . $e->getMessage() . $e->getResponseBody());
}

echo $response->getMessage() . "\n";
echo ">> render id: " . $response->getId() . "\n";

Running the code

Use the php command to run the script.

php slideshow.php

If the render request is successful, the API will return the render id, which can be used to get the render status.

Reviewing the render status and output URL

To check the status we need another script which will call the API render status endpoint. Create a file called status.php and use the following code:

<?php
require 'vendor/autoload.php';

use Shotstack\Client\Api\EditApi;
use Shotstack\Client\Configuration;

$config = Configuration::getDefaultConfiguration()
    ->setHost('https://api.shotstack.io/stage')
    ->setApiKey('x-api-key', 'your_key_here'); // use the API key issued to you

$client = new EditApi(null, $config);
$response = $client->getRender($argv[1], false, true)->getResponse();

echo "\nStatus: " . strtoupper($response->getStatus()) . "\n\n";

if ($response->getStatus() == 'done') {
    echo ">> Asset URL: " . $response->getUrl() . "\n";
}

Then run the script using the following command:

php status.php {renderId}

Replace {renderId} with the ID returned from the slideshow.php script.

Repeatedly run the status.php script until the status is done and a URL is returned. A failed status will be displayed if something goes wrong. The video in the response can now be used in your application.

Final thoughts

This tutorial explained the basics of using Shotstack and PHP to create and convert multiple images into a slideshow. However, you can improve the video with additional resources like text, overlay animations, luma mattes, and other features listed in the API reference docs.

All in all, this article has shown you how to build a fully automated video editing process for a variety of video use cases, including real estate, automotive, marketing, sports highlights, and more.