Zum Inhalt springen

HandlebarsBild

Bewertungskarte, 1080×1080

Eine quadratische Karte für Instagram und LinkedIn aus einer Kundenbewertung: range und lt zeichnen die Bewertung als fünf Sterne, truncate hält ein langes Zitat im Quadrat, und das Datum der Bewertung steht als Monat und Jahr da.

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

Gerendertes Ergebnis

Gerendertes Ergebnis: Bewertungskarte, 1080×1080
PNG · 117 KB ↓ herunterladen

Was dieses Beispiel zeigt

  • settings.image legt das Quadrat fest: 1080 × 1080 Pixel bei Device-Scale-Factor 1, was Instagram und LinkedIn ohne Beschnitt zeigen.
  • {{#each (range 0 5)}} zeichnet fünf Sterne, und (lt this ../review.rating) färbt so viele, wie die Bewertung angibt: vier bernsteinfarbene und einen grauen.
  • {{truncate review.quote 240}} kürzt ein Zitat, das nicht passen würde, nach 240 Zeichen und schließt es mit Auslassungspunkten.
  • Das große Anführungszeichen ist CSS, blockquote::before; die Daten enthalten also nur den Text der Bewertung.

Verwendete Helfer

Vorlagenordner

templates/review-card/template.htmlHandlebars
<main class="card">
  <header>
    <p class="brand">{{brand.name}}</p>
    <p class="stars" aria-label="{{review.rating}} out of 5">{{#each (range 0 5)}}<span class="{{#if (lt this ../review.rating)}}on{{/if}}">★</span>{{/each}}</p>
  </header>
  <blockquote>{{truncate review.quote 240}}</blockquote>
  <footer>
    <p class="author">{{review.author}}</p>
    <p class="muted">{{review.role}}, {{review.company}}</p>
    <p class="muted">{{review.source}} · {{date review.date "MMMM yyyy"}}</p>
  </footer>
</main>
templates/review-card/style.cssCSS
body { margin: 0; }
.card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 1080px;
  height: 1080px;
  padding: 96px;
  background: #f5efe6;
  font-family: 'Inter', sans-serif;
  color: #1c1917;
}
header { display: flex; justify-content: space-between; align-items: center; }
.brand { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #92400e; }
.stars { margin: 0; font-size: 52px; letter-spacing: 6px; color: #d6d3d1; }
.stars .on { color: #d97706; }
blockquote { margin: auto 0; font-family: 'Playfair Display', serif; font-size: 60px; font-weight: 600; line-height: 1.22; }
blockquote::before { content: '“'; display: block; height: 70px; font-size: 150px; line-height: 1; color: #d97706; }
.author { margin: 0; font-size: 36px; font-weight: 600; }
.muted { margin: 8px 0 0; font-size: 28px; color: #78716c; }
templates/review-card/head.htmlHTML
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@600&display=swap">
templates/review-card/settings.jsonJSON
{
  "image": {
    "width": 1080,
    "height": 1080,
    "deviceScaleFactor": 1,
    "format": "png"
  },
  "locale": "en-GB"
}
templates/review-card/data/default.jsonJSON
{
  "brand": {
    "name": "Fennlor Studio"
  },
  "review": {
    "quote": "We fitted out two floors of our office with Fennlor desk lamps. Delivery took two days, and the one shade that arrived dented was replaced before we had finished the call.",
    "author": "Jane Doe",
    "role": "Office manager",
    "company": "Olvarest Ltd",
    "rating": 4,
    "source": "Customer review",
    "date": "2026-09-14"
  }
}

Ü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: "review-card", data: ., output: "png"}' 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: 'review-card',
  data,
  output: 'png',
});
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="review-card",
    data=data,
    output="png",
)
print(render.status, render.download_url)
render.phpPHP
<?php
$body = [
    'template' => 'review-card',
    'data' => json_decode(file_get_contents('data.json'), true),
    'output' => 'png',
];

$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": "review-card",
		"data":     json.RawMessage(data),
		"output":   "png",
	})

	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 = "review-card",
    data = JsonDocument.Parse(File.ReadAllText("data.json")).RootElement,
    output = "png",
};

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": "review-card",
          "output": "png",
          "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: "review-card",
  data: JSON.parse(File.read("data.json")),
  output: "png",
}

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.