Zum Inhalt springen

LiquidBild

Open-Graph-Bild mit Tailwind

Ein Social-Bild in 1200×630 in Liquid mit Tailwind-Klassen, beim Rendern kompiliert. Liquid übergibt Optionen als Schlüsselwort-Argumente (| image: width: 72), und eine identische Anfrage mit einem Live-Schlüssel innerhalb von 24 Stunden bekommt die frühere Datei, ohne Einheiten zu kosten.

Kostenloser Plan, keine Kreditkarte. Sie erhalten eine eigene Kopie im Editor, veröffentlicht und bereit für die API.

Gerendertes Ergebnis

Gerendertes Ergebnis: Open-Graph-Bild mit Tailwind
PNG · 356 KB ↓ herunterladen

Was dieses Beispiel zeigt

  • Die Einstellungen legen die Fläche fest: image mit 1200×630 Pixeln, PNG und Device-Scale-Factor 1, wie es soziale Netzwerke erwarten.
  • tailwind: true kompiliert beim Rendern genau die Klassen, die das Markup verwendet; ein Stylesheet gibt es nicht zu pflegen.
  • truncate: 70 hält eine lange Überschrift in der Karte, default: "Blog" ersetzt eine fehlende Kategorie, und image schneidet den Avatar mit fit: "cover" zu.
  • access: "public" liefert eine CDN-URL ohne Signatur, die in <meta property="og:image"> passt, solange die Datei aufbewahrt wird; wie lange das ist, entscheidet die Aufbewahrung Ihres Plans.
  • Mit einem Live-Schlüssel wird eine Anfrage, die einer der letzten 24 Stunden gleicht, mit dem früheren Bild beantwortet und kostet keine Einheiten; ein zweiter Deploy am selben Tag rendert also nichts erneut. Renderings mit einem Test-Schlüssel werden nie dedupliziert.

Verwendete Helfer

Mehr zu diesem Anwendungsfall: Open-Graph-Bild-API →

Vorlagenordner

templates/og-image/template.htmlLiquid
<div class="flex h-[630px] w-[1200px] flex-col justify-between bg-gradient-to-br from-indigo-950 via-indigo-800 to-sky-600 p-20 text-white">
  <p class="text-2xl font-medium uppercase tracking-widest text-sky-200">
    {{ post.category | default: "Blog" }}
  </p>
  <h1 class="text-7xl font-bold leading-tight">{{ post.title | truncate: 70 }}</h1>
  <div class="flex items-center gap-6 text-2xl">
    {{ post.author.avatar | image: width: 72, height: 72, fit: "cover", alt: post.author.name, class: "rounded-full bg-white p-2" }}
    <span>{{ post.author.name }} · {{ post.published | date: "d MMM yyyy" }} · {{ post.minutes }} min read</span>
  </div>
</div>
templates/og-image/settings.jsonJSON
{
  "image": {
    "width": 1200,
    "height": 630,
    "deviceScaleFactor": 1,
    "format": "png"
  },
  "tailwind": true,
  "locale": "en-GB"
}
templates/og-image/data/default.jsonJSON
{
  "post": {
    "category": "Engineering",
    "title": "Templates belong in Git: reviewing invoice layouts in pull requests",
    "published": "2026-09-10",
    "minutes": 6,
    "author": {
      "name": "Formfeed",
      "avatar": "https://formfeed.dev/favicon.svg"
    }
  }
}

Über die API rendern

Speichern Sie die Beispieldaten als data.json und senden Sie sie mit dem Namen der Vorlage. TypeScript und Python nutzen die SDKs; jede andere Sprache schickt dasselbe JSON mit ihrer Standardbibliothek an die REST-API. Renderings mit einem Schlüssel, der mit ff_test_ beginnt, werden nicht gezählt; im Free-Tarif tragen sie ein kleines Wasserzeichen.

render.shShell
jq '{template: "og-image", data: ., output: "png", access: "public"}' data.json \
  | curl https://api-eu.formfeed.dev/v1/renders \
      -H "Authorization: Bearer ff_test_..." \
      -H "Content-Type: application/json" \
      --data-binary @-
render.tsTypeScript
import { Formfeed } from '@formfeed/sdk';
import data from './data.json' with { type: 'json' };

const formfeed = new Formfeed({ apiKey: process.env.FORMFEED_API_KEY! });

const render = await formfeed.renders.create({
  template: 'og-image',
  data,
  output: 'png',
  access: 'public',
});
console.log(render.status, render.download_url);
render.pyPython
import json
import os

from formfeed import Formfeed

formfeed = Formfeed(api_key=os.environ["FORMFEED_API_KEY"])

with open("data.json", encoding="utf-8") as file:
    data = json.load(file)

render = formfeed.renders.create(
    template="og-image",
    data=data,
    output="png",
    access="public",
)
print(render.status, render.download_url)
render.phpPHP
<?php
$body = [
    'template' => 'og-image',
    'data' => json_decode(file_get_contents('data.json'), true),
    'output' => 'png',
    'access' => 'public',
];

$curl = curl_init('https://api-eu.formfeed.dev/v1/renders');
curl_setopt_array($curl, [
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => [
        'Authorization: Bearer ' . getenv('FORMFEED_API_KEY'),
        'Content-Type: application/json',
    ],
    CURLOPT_POSTFIELDS => json_encode($body),
]);
$render = json_decode(curl_exec($curl), true);

echo $render['status'], ' ', $render['download_url'], PHP_EOL;
main.goGo
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"net/http"
	"os"
)

func main() {
	data, err := os.ReadFile("data.json")
	if err != nil {
		panic(err)
	}
	body, _ := json.Marshal(map[string]any{
		"template": "og-image",
		"data":     json.RawMessage(data),
		"output":   "png",
		"access":   "public",
	})

	request, _ := http.NewRequest("POST", "https://api-eu.formfeed.dev/v1/renders", bytes.NewReader(body))
	request.Header.Set("Authorization", "Bearer "+os.Getenv("FORMFEED_API_KEY"))
	request.Header.Set("Content-Type", "application/json")

	response, err := http.DefaultClient.Do(request)
	if err != nil {
		panic(err)
	}
	defer response.Body.Close()

	var render struct {
		Status      string `json:"status"`
		DownloadURL string `json:"download_url"`
	}
	json.NewDecoder(response.Body).Decode(&render)
	fmt.Println(render.Status, render.DownloadURL)
}
Program.csC#
using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Text.Json;

var body = new
{
    template = "og-image",
    data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
    output = "png",
    access = "public",
};

using var http = new HttpClient();
http.DefaultRequestHeaders.Authorization =
    new AuthenticationHeaderValue("Bearer", Environment.GetEnvironmentVariable("FORMFEED_API_KEY"));

var response = await http.PostAsJsonAsync("https://api-eu.formfeed.dev/v1/renders", body);
var render = await response.Content.ReadFromJsonAsync<JsonElement>();

Console.WriteLine($"{render.GetProperty("status")} {render.GetProperty("download_url")}");
Render.javaJava
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.nio.file.Files;
import java.nio.file.Path;

public class Render {
  public static void main(String[] args) throws Exception {
    String data = Files.readString(Path.of("data.json"));
    String body = """
        {
          "template": "og-image",
          "output": "png",
          "access": "public",
          "data": %s
        }
        """.formatted(data);

    HttpRequest request = HttpRequest.newBuilder(URI.create("https://api-eu.formfeed.dev/v1/renders"))
        .header("Authorization", "Bearer " + System.getenv("FORMFEED_API_KEY"))
        .header("Content-Type", "application/json")
        .POST(HttpRequest.BodyPublishers.ofString(body))
        .build();

    HttpResponse<String> response = HttpClient.newHttpClient().send(request, HttpResponse.BodyHandlers.ofString());
    System.out.println(response.body()); // status, download_url, page_count, units …
  }
}
render.rbRuby
require "json"
require "net/http"

body = {
  template: "og-image",
  data: JSON.parse(File.read("data.json")),
  output: "png",
  access: "public",
}

response = Net::HTTP.post(
  URI("https://api-eu.formfeed.dev/v1/renders"),
  JSON.generate(body),
  "Authorization" => "Bearer #{ENV.fetch("FORMFEED_API_KEY")}",
  "Content-Type" => "application/json"
)
render = JSON.parse(response.body)

puts render["status"], render["download_url"]

Heute mit dem Rendern beginnen

Der kostenlose Plan enthält 100 Einheiten im Monat und kostenlose Testrenderings. Wechseln Sie den Plan, wenn Sie mehr brauchen.