Apitemplate.io: Instagram Bilder automatisiert mit Airtable erzeugen

Mit Apitemplate.io lassen sich mit wieder verwertbaren Templates Fotos und PDF-Dokumente erzeugen. Die Templates enthalten dabei Platzhalter für die einzufügenden Texte. Mit Hilfe der Cloud-basierten Airtable Datenbank lässt sich anschließend der Prozess der Bild-Erzeugung automatisieren.

Um die Automatisierung umzusetzen, kann sowohl bei Apitemplate als auch bei Airtable die kostenlose Basis-Version genutzt werden. 

In diesem Beitrag werde ich anhand eines Beispiels alle notwendigen Schritte aufzeigen, um automatisiert Bilder zu generieren. 

Inhaltsangabe

Schritt 1: Bei Apitemplate.io anmelden

Die Anmeldung bei Apitemplate erfolgt über den Link https://app.apitemplate.io/accounts/signup/
Apitemplate Registrierung

Schritt 2: Neues Template erzeugen

Unter der Rubrik Manage Templates lassen sich Bild- bzw. PDF-Templates erstellen:

Apitemplate: neues Template ersteleln

In der freien Basis-Version kann man drei verschiedene Templates erstellen sowie 50 Bilder oder PDFs pro Monat erstellen.

Der Button Neu Image Template führt dann auf den Template Erstellungsprozess:

Apitemplate: neues Template auswählen

Auf  der linken Seite gibt man dem Template einen Namen und wählt die Social-Media Kategorie aus. In meinem Fall handelt es sich um Instagram. Dadurch werden die korrekten Pixel-Maße für das Bild automatisch gesetzt.

Auf der rechten Seite kann aus mehr als einem Dutzend Templates auswählen. Allerdings gibt es kein leeres Template. Daher habe ich das grün umrandete Template ausgewählt, um es anschließend nach meinem Gusto anzupassen. Das Endergebnis sieht dann so aus:

Apitemplate: Quote-Template erstellt

Ich habe ein Template für Zitate erstellt, das aus 4 Elementen, d.h. Layers, besteht: 

  • ein Textbaustein für das Zitat (oben in gelber Schrift)
  • ein Textbaustein für die Person, von der das Zitat stammt
  • ein schwarzen Hintergrund-Element
  • ein Logo-Bild unten links für den Instagram-Account

Die beiden Textbausteine für das Zitat und den Namen der Person sind dynamisch. Diese beiden Elemente werden dann später von den Texten, die in der Airtable-Datenbank enthalten sind, überschrieben werden.

Eine gute Einführung, wie man ein Apitemplate erstellt, findet sich in Apitemplate.io Youtube-Kanal.

Template-Übersicht

Unter der Rubrik Manage Template werden die erstellten Templates aufgeführt:

Ich habe mein Template passend Quote Schwarz/Gelb benannte. Den Namen kann man natürlich noch nachträglich ändern. Das Template kann bei Bedarf jederzeit über die Edit-Funktion verändert werden. 

Schritt 3: Airtable API-Key, API-Base und Tabelle erstellen

Ziel ist es, das angelegt Template mit einer Airtable Tabelle * zu verbinden. Diese Tabelle wird unter anderem die Text-Informationen, die später auf das Template gedruckt werden, enthalten. 

Dazu müssen zunächst aber ein paar Vorbereitungen durchgeführt werden.

Die Texte, die in dem Apitemplate eingefügt werden sollen, werden in einer Airtable-Tabelle angelegt. Diese muss einen bestimmten Aufbau haben, damit sie von Apitemplate.io erkannt und verarbeitet werden kann.

Folgende Angaben und Entitäten werden aus Airtable benötigt, um sich gegen Apitemplate zu verbinden:

  • API-Key
  • API-Base
  • Airtable Tabelle

Nachfolgend werde ich zeigen, wo man den API-Key und die API-Base findet. Außerdem muss die Airtabelle-Tabelle eine bestimmte Grundstruktur aufweisen, damit sie von der Apitemplate-Anwendung erkannt wird.

Airtable API-Key

Der Airtable Apikey findet sich unter den Account-Angaben (https://airtable.com/account):

Airtable Apikey

Wer noch keinen Apikey hat, kann diesen via Regenerate API key erzeugen.

Natürlich kann den API-Key damit jederzeit neu erzeugen, was ich natürlich auch gemacht habe.  Denn den API-Key sollte man nicht an eine dritten Person weitergeben. Diese könnten ihn dann auf deine Kosten benutzen. 

Airtable-Base und Tabelle erstellen

Die Airtable API-Base ist einer Airtable-Base zugeordnet. Daher muss zunächst eine Airtable-Base erstellt werden. Sie entspricht einem Datenbankschema. Darin werden Tabellen und Views definiert. 

Zur Erstellung der Airtable-Base klickt man auf das grüne Plus-Zeichen.

Airtable-Base erstellen

Die Airtable-Base wird erstellt sowie eine leere Tabelle mit einigen Dummy-Spalten ( Notes, Assignee sowie Status). Die Airtable-Base habe ich zu Quote umbenannt. Die leere Tabelle habe ich den Namen Quote-Tabelle gegeben:

Airtable-Base und Airtable-Tabelle erstellt

Airtable Tabelle anpassen

Damit die Airtable Tabelle bei der Integration mit Apitemplate erkannt wird, muss sie etwas transformiert werden. Ich habe einige Veränderungen  vorgenommen, um der Apitemplate-Schnittstelle zu genügen:

Airtable Tabelle für Apitemplate vorbereiten

Zunächst habe ich die von Airtable generierten Spalten Notes, Assignee sowie Status gelöscht. Anschließend habe ich zwei Spalten hinzugefügt, die von der Apitemplate-Schnittstelle erwartet werden:

  • Spalte imported vom Feldtyp Checkbox
    Wenn die Datenzeile verarbeitet wurde, dann wird ein grüner Haken gesetzt. Damit lässt sich kennzeichnen, ob diese Zeile bereits nach Apitemplate übertragen wurde.
  • Spalte item_url vom Feldtyp URL
    In dieser Spalte wird die Bild-URL abgespeichert, nachdem ein Bild bei Apitemplate generiert wurde.

Die erste Spalte, die Name heißt, ist das Schlüsselfeld der  Tabelle und kann daher nicht gelöscht werden. Wir werden diese Spalte in einem späteren Schritt in geeigneter Weise umbenennen.

Zu guter Letzt muss noch eine Dummy-Zeile erfasst werden. Diese wird benötigt, weil Airtable das eigentliche Tabellen-Schema nicht nach Apitemplate überträgt. Daher trägt man Beispielwerte ein, woraus dann Apitemplate den Datentyp des Feldes „erkennen“ kann.

Zeile 2 und 3 sind zunächst leer und werden später noch gefüllt werden.

Airtable API-Base auslesen

Um die API-Base Angabe zu finden, geht man wie folgt vor. Zunächst klickt man auf den Help-Link, der sich auf der rechten oberen Seite befindet. Es öffnet sich dann ein Menü:

Airtable API Documentation

Hier wählt man nun den Punkt API Documentation aus. Man gelangt dann auf die sogenannte REST-API Seite:

Airtable REST-API

Die REST-API ist quasi das Protokoll bzw. die Schnittstelle, über die Apitemplate und Airtable miteinander kommunizieren.

Am unteren Rand wird die von mir zuvor angelegte API-Base mit dem Namen Quote aufgeführt. Wir klicken auf den Link und kommen auf die Dokumentationsseite für den REST-API Dienst. 

Dort findet sich dann unter dem Punkt INTRODUCTION die Airtable-Base ID:

Airtable API-Base ID

Schritt 4: Airtable Integration

Im nächsten Schritt wird das Template aus Apitemplate mit der angelegten Airtable Tabelle verknüpft. Dazu benutzt man den API-Key und die API-Base aus dem vorigen Schritt.

Man geht über die Edit-Funktion in das Template und dann in den Reiter Airtable Integration:

Apitemplate: Airtable integrieren: Api-Key, Api-Base, Tabelle

Nachdem man den Api Key, die Base und die Table eingetragen hat, kann man die Schnittstelle über Refresh Connect prüfen.

Wenn man alles richtig gemacht hat, sollte man eine Anzeige wie folgt erhalten:

Schnittstelle Airtable - Apitemplate prüfen

Es sind alle drei Zeilen aus der Airtable Quote-Tabelle erkannt werden. Die erste Zeile ist die Dummy-Zeile und die beiden weiteren Zeilen sind noch ohne Werte belegt.

Außerdem ordnet Apitemplate jeder Zeile eine eindeutige ID-Spalte zu.

Oberhalb der Spalte Name ist eine Select-Box, über die man die Airtable-Spalte mit einem Apitemplate-Platzhalter verknüpfen kann.  Dies wird im nächsten Schritt ausführlich erklärt.

Am Schluss nicht vergessen über den Save Settings Button die Einstellungen zu speichern!

Schritt 5: Template und Tabelle weiter anpassen

Bevor die Zuordnung der Airtable-Felder zu den Apitemplate-Platzhalter geführt werden kann, werden noch einige Anpassungen an das Bildtemplate von Apitemplate sowie der Quote-Tabelle in Airtable vorgenommen.

Apitemplate Platzhalter

Apitemplate: Layers-Bezeichnungen anpassen

Das Bildtemplate besteht aus vier Elementen (auch Layers) genannt: Autor, Zitat, Logo sowie Hintergrundfarbe.

Die Felder text_1, text_2 und rect-image-1 des Bildtemplates habe ich etwas treffender als Autor, Zitat sowie Logo umbenannt.

Diese Felder und deren Eigenschaften fungieren als Platzhalter und können später durch Airtable Felder dynamisch ersetzt werden.

Airtable Felder

Die Quote-Tabelle wird wie folgt angepasst:

Airtable Quote-Tabelle weiter anpassen
  • Die Spalte Name wurde zu Text umbenannt und auf den Feldtyp Long Text geändert. Damit können auch mehrzeilige Texte eingegeben werden. Ein Zitat kann durchaus auch etwas länger sein. Außerdem wurde diese Spalte an erster Stelle in der Quote-Tabelle gesetzt.
  • Eine neue Spalte Autor wurde angelegt, die den Autor des Zitats beinhaltet. 
  • Die beiden Spalten imported und item_url wurden nach hinten geschoben.
  • Neben der ersten Dummy-Zeile wurden zwei Zeilen mit Zitat und Autor eingefügt. Dabei bleiben natürlich die Werte für die beiden Spalten imported bzw. item_url leer. Diese werden erst gefüllt, wenn das Bild mit dem Zitat bei Apitemplate erzeugt worden ist.

Schritt 6: Apitemplate und Airtable Felder verknüpfen

Die Schnittstelle zwischen Airtable und Apitemplate lässt sich wiederum unter Manage Templates – Edit -Airtable Integration mittels Refresh/Connect prüfen

Apitemplate - Airtable Schnittstelle

Die beiden Felder Text und Autor aus der Airtable Quote-Tabelle werden samt Inhalten korrekt erkannt.

Im nächsten Schritt wird den Felder Text und Autor über das Select-Menü ein Platzhalter aus dem erstellten Apitemplate Quote Schwarz/Gelb zugeordnet: 

Airtable Felder und Apitemplate Platzhalter verknüpfen

Wie man erkennt, bietet Apitemplate verschiedene Platzhalter für das in Schritt 2 erstellte Template. So kann für das Element Zitat der Text sowie diverse Farben wie Hintergrundfarbe und Schriftart als Platzhalter theoretisch übergeben werden. Mir genügt für den Anfang den Text von Airtable zu übertragen. Analog für das Feld Autor.

Nach dem Speichern der ausgewählten Platzhalter, sieht das dann folgendermaßen aus:

Die zugeordneten Felder werden grün eingefärbt:

  • Text  -> Zitat.text
  • Autor -> Autor.text

Schritt 7: Bilder generieren

Alle Vorbereitungen sind abgeschlossen. Die ersten Bilder können nun mit Hilfe der Schnittstelle erzeugt werden.

Über den Generate All Button werden alle Bilder erzeugt, für die ein Eintrag in der Airtable Quote-Tabelle existieren und die noch kein imported-Flag gesetzt haben:

Apitemplate: Alle Bilder erzeugen

Der Generate All Button zeigt in Klammern an, dass zwei Bilder („2 Items“) erzeugt werden.

Nach erfolgreicher Produktion der Bilder nimmt die Apitemplate-Schnittstelle folgende Werte an:

Apitemplate: Bild generiert
  • Das imported Flag ist gesetzt worden. Das heißt, dass die beiden Bilder generiert wurden. 
  • In der item_url wird die Bezeichnung des generierten Bildes hinterlegt. 

Am Schluss  sollte man nicht vergessen, diese Angaben mittels Save Settings Button zu speichern.

Schritt 8: Bilder downloaden

Die generierten Bilder können an verschiedenen Stellen heruntergeladen werden.

Download aus der History

Alle erzeugten Bilder werden in der Template-History aufgelistet:

Apitemplate: Template-History

Die History  stellt pro Bild zwei Links zur Verfügung über die man die Bilder im jpeg- oder im png-Format herunterladen kann.

Download aus Airtable

Die Airtable Quote-Tabelle nimmt nach dem Erzeugen der Bilder folgende Gestalt an:

Airtable: Jpeg Bild-Download via item_url

Im Feld item_url der Quote-Tabelle steht der vollqualifizierte Link zum erstellen jpeg-Bild. Das Feld ist klickbar, wodurch sich das Bild leicht downloaden lässt.

Download nach Bildgenerierung

Dazu geht über Edit Template zunächst auf Airtable Integration

Apitemplate: Vorschau in der API Console

Anschließend klickt man auf Preview in Api Console in der gewünschten Zeile:

Dieser Reiter hat mehrere Funktionen:

  • Auf der rechten Seite wird ein Vorschaubild des zu erzeugenden Bildes angezeigt. Das ist natürlich von Vorteil. Man muss das Bild nicht generieren, um eventuell danach noch Korrekturen durchzuführen. Jedes Generieren kostet einen Credit-Punkt. Die Vorschau ist kostenlos.
  • Auf der linken Seite, wird der Text des Zitats bzw. der Name des Autors im Json-Format dargestellt, was aber mehr für die Schnittstelle von Interesse ist.
  • Auf der linken Seite oben kann man über den Button Generate Image (Requires Credit) die Bilderzeugung anstoßen. Rechts daneben befindet sich eine Checkbox mit dem sprechenden Namen Download Image. Wenn diese angehakt wird, wird im Anschluss an die Bildgenerierung das generierte Bild automatisch heruntergeladen.

Schritt 9: Optimierungen und Erweiterungen

Wenn man die ersten Bilder erzeugt hat, dann gibt es meist noch Potential die Bilder bzw. den Prozess zu optimieren.

Dynamische Textgröße

Zitate können verschieden lang sein. Einige bestehen nur aus wenigen Worten, andere umfassen gegebenenfalls mehrere Sätze. Daher macht es Sinn die Textgröße dynamisch zu wählen, um den Platz auf dem Bild optimal auszufüllen:

Apitemplate: Auto-fit Texte

Apitemplate bietet die Möglichkeit eine minmale und maximale Textgröße anzugeben. Bei mir im Beispiel sind das 30 px minimal und 150 px maximal.

Nachfolgend ist das an einem Zitat mit kurzem und mit langem Text demonstriert:

Langes Zitat: Dalai Lama

Fazit Apitemplate.io

Mit Hilfe von Apitemplate.io kann man Templates zur Bild- und PDF-Generierung erstellen. Dazu kann man den integrierten WYSIWYG-Editor benutzen. Darüber hinaus besteht auch die Möglichkeit, Hintergrundbilder hochzuladen, die man zuvor beispielsweise bei Canva.com erstellt hat.

Das erstellte Bild-Template enthält Platzhalter für Textbausteine. Bei einem Zitat-Autoren-Template hat man nachvollziehbarer Weise zwei Textplatzhalter: einen für den Autor und einen für den eigentlichen Zitat-Text.

Um die Textbausteine zu speichern, wird die Cloud-basierte Datenbank Airtable genutzt. Hier können die Daten ähnlich wie Excel in eine Tabelle erfasst werden.

Sobald man die Text in der Airtable-Tabelle angelegt hat, können aus dem Apitemplate-Anwendung heraus die Bilder per Knofpdruck erstellt werden. Natürlich lohnt sich der ganze Aufwand nur, wenn man damit nicht ein paar wenige Bilder erzeugen möchten, sondert hunderte bzw. tausende.

Um die automatisierte Bildgenerierung zu nutzen, sollte man mindestens eine Stunde einplanen. Dazu kann die obige bebilderte Schritt-für-Schritt-Anleitung genutzt werden.

Die wichtigsten Schritte dabei sind:

  1. Apitemplate Account erstellen
  2. Airtable Konto anlegen
  3. Apitemplate erzeugen
  4. Airtable Tabelle befüllen
  5. Airtable und Apitemplate verknüpfen
  6. Bilder generieren und downloaden

ChatGPT Plus im Test

ChatGPT Plus ist eine kostenpflichtige Erweiterung von ChatGPT, das im Rahmen eines monatlichen Abonnements genutzt werden kann und eine Reihe von Vorteilen bietet. Das Sprachmodell

Weiterlesen »

Bei ChatGPT anmelden: so geht es!

ChatGPT ist ein Chatbot Prototyp, der auf Grundlage künstlicher Intelligenz von OpenAI entwickelt wurde Der Chatbot ist ein auf Sprachdialoge spezialisiert und hat nach der

Weiterlesen »