How to make listicle videos from a template

A listicle is a type of article commonly used in blogs and journalism. You have probably seen these types of articles online, like a list of the top 10 movies of the year or the 5 best ways to save money.

Listicles are a very popular form of content because they are easy to read and share. When Jeff, our co-founder worked at Taste.com.au, Australia's leading recipe website, listicles were one of the most popular content types.

Naturally, this format has spread to video content as well. Listicle videos work just like listicle articles but in video form. However creating a listicle video can be harder than writing an article. You need to find the right design, images, videos, and music to go with your listicle. You also need to edit the video to make it look professional.

Publications and blogs might create hundreds of listicles each month. To create this many videos can be time-consuming, expensive and repetitive.

This is where a listicle video template and a video editing API can come in useful. With a template, you can create a listicle video in minutes. You can also customize the template to match your brand or style. With a video editing API, you can automate the creation of listicle videos at scale.

In this guide, we will show you how to do just that with the help of the Shotstack Studio online video editor and the video editing API.

About Shotstack

Shotstack is a cloud-based media automation platform that allows you to create thousands of videos in minutes. The platform includes a template video editor and a number of media API's including a video editing API.

A unique feature of Shotstack is merge fields, which allows you to create dynamic videos in bulk by replacing text, videos, images, and other assets. For example, in this guide, we'll create two different listicle videos using the same template.

Requirements

To follow along with this guide, you will need the following:

• A Shotstack account and free API Key.
• Basic knowledge of interacting with APIs and running commands in the terminal.

How to create a listicle video using an API

The theme we will use for the example video in this guide is the top 10 tourist destinations in X for a made up travel company. The video will include clips of each of the ten destinations, the attraction, and locations. Here is an example video generated from our template for attractions in Europe.

Preparing the listicle video template

The video above is created using a template which you can access via the dashboard or directly on this website.

The template includes placeholders for the title, tourist attraction, location, and video clips for the featured destinations.

To open the template from the web site, click the Customise Template button. In the dashboard gallery, click Use Template. This will open the template in the Studio editor. If you don't have a Shotstack account, the link will take you to the sign up page first.

The template should now be copied to your account ready to use with the Edit API.

Generating code to call the Edit API

Shotstack automatically generates a unique ID for every template you create. With this template ID, you can call the Edit API templates/render endpoint with merge fields, which allow you to update the templates with new assets and text.

To export a code snippet, click on the Use Template button at the top right corner of the editor UI. The "Use Template" modal will open. Select API from the available options.

This will open a Code Snippet panel at the right of the screen. Select your preferred language and library from the LANGUAGE/LIBRARY dropdown menu and select Template ID from the DATA FORMAT option.

For demo purposes, we will use the cURL command version. Select cURL from the LANGUAGE/LIBRARY dropdown. Copy and paste the command into your terminal. You can now edit the merge fields with new video clips and text.

Replacing the template content and rendering a new video

We've updated the JSON payload we copied in the previous step video clips and content for a top 10 tourist spots in the US listicle video. Run the command to make a POST request to the templates/render endpoint. Make sure you replace SHOTSTACK_API_KEY with your own API key and replace TEMPLATE_ID with the id copied from the code snippet panel.

curl --request POST 'https://api.shotstack.io/stage/templates/render' \
--header 'content-type: application/json' \
--header 'x-api-key: SHOTSTACK_API_KEY' \
--data-binary @- << EOF
{
  "id": "TEMPLATE_ID",
  "merge": [
    {
      "find": "TITLE",
      "replace": "TOP 10 TOURIST SPOTS IN THE US"
    },
    {
      "find": "1_TOP",
      "replace": "TIMES SQUARE"
    },
    {
      "find": "1_BOTTOM",
      "replace": "NEW YORK"
    },
    {
      "find": "2_TOP",
      "replace": "STATUE OF LIBERTY"
    },
    {
      "find": "2_BOTTOM",
      "replace": "NEW YORK"
    },
    {
      "find": "3_TOP",
      "replace": "THE GREAT CANYON"
    },
    {
      "find": "3_BOTTOM",
      "replace": "ARIZONA"
    },
    {
      "find": "4_TOP",
      "replace": "GOLDEN GATE BRIDGE"
    },
    {
      "find": "4_BOTTOM",
      "replace": "SAN FRANCISCO"
    },
    {
      "find": "5_TOP",
      "replace": "NIAGARA FALLS"
    },
    {
      "find": "5_BOTTOM",
      "replace": "NEW YORK"
    },
    {
      "find": "6_TOP",
      "replace": "DISNEY WORLD"
    },
    {
      "find": "6_BOTTOM",
      "replace": "FLORIDA"
    },
    {
      "find": "7_TOP",
      "replace": "HOLLYWOOD"
    },
    {
      "find": "7_BOTTOM",
      "replace": "LOS ANGELES"
    },
    {
      "find": "8_TOP",
      "replace": "LAS VEGAS STRIP"
    },
    {
      "find": "8_BOTTOM",
      "replace": "LAS VEGAS"
    },
    {
      "find": "9_TOP",
      "replace": "WAIKIKI BEACH"
    },
    {
      "find": "9_BOTTOM",
      "replace": "HAWAII"
    },
    {
      "find": "10_TOP",
      "replace": "ZION NATIONAL PARK"
    },
    {
      "find": "10_BOTTOM",
      "replace": "UTAH"
    },
    {
      "find": "VIDEO_1",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-qefvw-j3a5e-2xh05-yjvrze/source.mp4"
    },
    {
      "find": "VIDEO_2",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-qnpzp-xer91-wftja-zaq8v0/source.mp4"
    },
    {
      "find": "VIDEO_3",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-qrqp6-25xxk-8keb1-d5x4tt/source.mp4"
    },
    {
      "find": "VIDEO_4",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-qwnrh-rq3gj-4cxpg-c54c2n/source.mp4"
    },
    {
      "find": "VIDEO_5",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-qzyzj-s08f7-9dp65-yy7yjn/source.mp4"
    },
    {
      "find": "VIDEO_6",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-r34y6-hqr29-dz4pt-g17cpp/source.mp4"
    },
    {
      "find": "VIDEO_7",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-rb38f-mcgdf-cyy31-29perq/source.mp4"
    },
    {
      "find": "VIDEO_8",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-r630x-qkr6f-szw2z-3pqb2k/source.mp4"
    },
    {
      "find": "VIDEO_9",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-re4f6-jbgyg-zj6rx-h6kes1/source.mp4"
    },
    {
      "find": "VIDEO_10",
      "replace": "https://shotstack-ingest-api-stage-sources.s3.ap-southeast-2.amazonaws.com/irwdtighyk/zzz01hzs-rgp67-dsyzm-wp6g7-z5fw0n/source.mp4"
    }
  ]
} 
EOF

You should see a response like the one below. Take note of the value of response.id. You will need it in the next step to check the render status of the video.

{
    "success": true,
    "message": "Created",
    "response": {
        "message": "Render Successfully Queued",
        "id": "495220a9-0c38-47a1-8480-5f48b316ccbc"
    }
}

Check the render status of the video

Make a GET request using the cURL command below. Substitute SHOTSTACK_API_KEY with your API key and RENDER_ID with the response.id value from the previous step.

curl -X GET \
    -H "Content-Type: application/json" \
    -H "x-api-key: SHOTSTACK_API_KEY" \
    https://api.shotstack.io/stage/render/RENDER_ID?data=false

The API will respond with a JSON containing details about the render and status. This will include the URL of the listicle video if the status is done. If the value of status is not done, wait for a few seconds and run the command again.

{
    "success": true,
    "message": "OK",
    "response": {
        "id": "495220a9-0c38-47a1-8480-5f48b316ccbc",
        "owner": "rvoer3rfug",
        "plan": "sandbox",
        "status": "done",
        "error": "",
        "duration": 70,
        "billable": 70,
        "renderTime": 35589,
        "url": "https://shotstack-api-stage-output.s3-ap-southeast-2.amazonaws.com/rvoer3rfug/495220a9-0c38-47a1-8480-5f48b316ccbc.mp4",
        "poster": null,
        "thumbnail": null,
        "created": "2024-06-08T08:20:59.779Z",
        "updated": "2024-06-08T08:21:42.496Z"
    }
}

Copy and paste the URL into your browser to view or download the listicle video. You should now see a video based of the same template as the European video, except with US tourist attractions and content.

Automating listicle videos in bulk

This guide has shown you how to generate videos using a template. By replacing the merge fields in a simple API request you can automate the process of creating hundreds or even thousands of listicle based videos for your business, brand or publication. Instead of manually running cURL commands you could use one of our SDK's and create a simple application or script to automate video generation. I hope this guide will inspire to create your own listicle videos.