Amna Anjum

Posted on Nov 30

Automatically Turn Blog Posts Into Multi-Slide Carousels With an API

#api #tutorial #automation #tooling

A Practical Developer Tutorial Using the ContentDrips Carousel Maker

Long-form blog posts are excellent for SEO but not ideal for platforms like Instagram or LinkedIn, where multi-slide carousels perform significantly better. This guide shows how you can automatically transform any blog post into a multi-slide, professionally designed carousel using the ContentDrips API.

The workflow:

Fetch or parse a blog post
Split it into readable slide chunks
Send those chunks to the ContentDrips carousel endpoint
Receive ready-to-publish PNG or PDF slides

Step 0 — Label Your Template (One-Time Setup, Mandatory)

Before calling the API, ensure your carousel template has clearly named editable fields (meta_labels). This is a one-time setup per template and must be done before automation:

Example labels: intro_heading, intro_description, slide_heading, slide_description, ending_heading, image_url
Match these labels exactly in your API carousel payload. Label mismatches cause 400 errors.
Once labeled, you do not need to relabel the same template again unless you change the template structure.

Get a Free API Key (No Credit Card Required)

Get a free API key with 10 free API calls here:
https://app.contentdrips.com/api-management

No credit card required.

Cost model:
1 credit = 1 API call
Each carousel or image generation uses one credit.

Templates Are Ready for You

You do not need to design templates yourself.

ContentDrips provides a large library of ready-made templates for:

carousels
social graphics
quotes
summaries
announcements
stat cards

If you need additional templates, you can request them and they will be provided. This means you can run the automation without building templates manually.

What You Will Build

A script that:

Parses a blog post
Splits it into slide text chunks
Sends those chunks to the carousel-maker endpoint
Polls for job completion
Returns downloadable PNG or PDF slides

Prerequisites

A free ContentDrips API key
A carousel template with labeled fields (one-time setup)
Node.js or a similar environment
Access to a blog post (URL or raw text)

Documentation: https://developer.contentdrips.com/

Step 1 — Fetch or Parse Blog Content

Example of fetching a blog post and extracting its text:

import fetch from "node-fetch";
import { JSDOM } from "jsdom";

const res = await fetch("https://example.com/blog/post");
const html = await res.text();

const dom = new JSDOM(html);
const blogPost = dom.window.document.querySelector("article").textContent;

Or manually define the text:

const blogPost = `
Content repurposing helps extend the lifespan of long-form articles...
`;

Step 2 — Split Content Into Slide Chunks

function splitIntoSlides(text, maxSentences = 2) {
  const sentences = text
    .split(".")
    .map(s => s.trim())
    .filter(Boolean);

  const slides = [];
  for (let i = 0; i < sentences.length; i += maxSentences) {
    slides.push(sentences.slice(i, i + maxSentences).join(". ") + ".");
  }
  return slides;
}

const slideTexts = splitIntoSlides(blogPost, 2);

Step 3 — Build the Carousel Payload

Map your labeled template fields to the carousel payload. Ensure labels match the template meta_labels exactly.

const carouselPayload = {
  template_id: "YOUR_TEMPLATE_ID",
  output: "png",
  carousel: {
    intro_slide: {
      heading: { text: "Key Insights From This Blog Post" }, // matches intro_heading
      description: { text: "A programmatically generated summary" } // matches intro_description
    },
    slides: slideTexts.map((chunk, idx) => ({
      heading: { text: `Slide ${idx + 1}` }, // matches slide_heading
      description: { text: chunk } // matches slide_description
    })),
    ending_slide: {
      heading: { text: "End of Carousel" } // matches ending_heading
    }
  }
};

Step 4 — Submit the Carousel Job

const apiKey = process.env.CONTENTDRIPS_API_KEY;

const submit = await fetch(
  "https://generate.contentdrips.com/render?tool=carousel-maker",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify(carouselPayload)
  }
);

const job = await submit.json();
console.log("Job ID:", job.job_id);

Step 5 — Poll for Completion

async function waitForCompletion(jobId) {
  while (true) {
    const res = await fetch(
      `https://generate.contentdrips.com/job/${jobId}/status`,
      { headers: { "Authorization": `Bearer ${apiKey}` } }
    );
    const json = await res.json();

    if (json.status === "completed") return true;
    if (json.status === "failed") throw new Error("Job failed");

    await new Promise(r => setTimeout(r, 3000));
  }
}

await waitForCompletion(job.job_id);

Poll every 3–5 seconds and set a reasonable timeout to avoid infinite loops.

Step 6 — Retrieve Final Slides

const finalRes = await fetch(
  `https://generate.contentdrips.com/job/${job.job_id}/result`,
  { headers: { "Authorization": `Bearer ${apiKey}` } }
);

const data = await finalRes.json();
console.log("Slides:", data.export_url);

If PNG output is used, the result is an array of slide URLs. If PDF output is used, a single file URL is returned.

Full Pipeline Example

async function generateCarouselFromBlog(blogText) {
  const slides = splitIntoSlides(blogText, 2);

  const payload = {
    template_id: "YOUR_TEMPLATE_ID",
    output: "png",
    carousel: {
      intro_slide: {
        heading: { text: "Blog Summary" },
        description: { text: "Key insights" }
      },
      slides: slides.map((chunk, idx) => ({
        heading: { text: `Slide ${idx + 1}` },
        description: { text: chunk }
      })),
      ending_slide: {
        heading: { text: "End of Carousel" }
      }
    }
  };

  const submit = await fetch(
    "https://generate.contentdrips.com/render?tool=carousel-maker",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKey}`
      },
      body: JSON.stringify(payload)
    }
  );

  const job = await submit.json();
  await waitForCompletion(job.job_id);

  const finalRes = await fetch(
    `https://generate.contentdrips.com/job/${job.job_id}/result`,
    { headers: { "Authorization": `Bearer ${apiKey}` } }
  );

  return await finalRes.json();
}

Use Cases

Convert blogs into social carousels automatically
Build a “convert blog to carousel” SaaS feature
Repurpose articles for LinkedIn and Instagram
Create automated content workflows with Zapier or n8n
Generate slide decks from long-form content
Build agency tools for bulk carousel creation

Best Practices

Label template fields exactly once during setup; matching labels are required for automation.
Keep slides short; 1–3 sentences per slide.
Use publicly accessible image URLs if inserting images.
Poll every 3–5 seconds and set a maximum timeout.
Use PNG for social media, PDF for documents.
Confirm template labels match template meta_labels exactly to avoid 400 errors.
Each carousel/image generation consumes 1 credit per API call.

Conclusion

With a one-time template labeling step and a few lines of code, you can convert any blog post into a clean, multi-slide carousel ready for Instagram, LinkedIn, or other platforms. ContentDrips handles rendering and layout; you handle automation. You can get a free API key with 10 free calls (no credit card) at https://app.contentdrips.com/api-management. Additional templates are available and can be requested if you do not want to design them yourself.

DEV Community