Generiert Vorschau-Bilder für Messenger, Soziale Medien, E-Mail-Clients (og:image). Auf Wunsch auch Social Media Posts und Display-Anzeigen.
- Erstellt Vorschau-Bilder anhand der Informationen, die in REDAXO hinterlegt sind: Titel, Beschreibung, SEO-Bild, etc.
- Mitgelieferte Fragemente in HTML und SVG für einen einfachen Einstieg
- Abruf von Vorschaubildern über Drittanbieter und Caching, um API-Abrufe zu reduzieren und DSGVO-konform zu arbeiten.
- Voraussetzung: YRewrite - Verwendet das SEO-Bild von YRewrite, wenn möglich.
- Kompatibel zu URL - Verwendet Titel und SEO-Bild von URL-Profilen, wenn möglich.
-
Bei der Installation wird ein Bild
thumb_bg.png
in den Medienpool kopiert - dieses kann auf Wunsch in den Einstellungen gegen ein eigenes Hintergrundbild getauscht werden. -
Erstelle unter https://www.html2image.net/ oder https://hcti.io/ ein Konto und hinterlege in den Einstellungen die heweiligen Zugangsdaten. Wähle ggf. den passenden Anbieter aus.
-
Erstelle ein Media Manager Profil, z.B. namens
thumb
, und füge den EffektPfad anpassen
hinzu. Diesem gibst du den Wertredaxo/data/addons/thumb/
(in YDeploy-Umgebungen../var/data/addons/thumb/
). Dort werden die Bilder abglegt. -
Standardmäßig wird der EP von YRewrite verwendet. Sofern du
<?php $seo = new rex_yrewrite_seo(); echo $seo->getTags(); ?>
verwendest, werden Bilder automatisch für dich angepasst.
Enthält Fragmente für REDAXO im SVG und HTML-Format für einen einfachen Einstieg.
Tipp: Die Fragmente können bspw. über eine Kopie project-Addon überschrieben werden, kopiere dazu aus dem
thumb
-Addon-Verzeichnis das Fragmentredaxo/src/addons/thumb/fragments/thumb/html.php
in das Verzeichnisredaxo/src/addons/project/fragments/thumb/html.php
Benutze die Design-Vorlage im Affinity-2-Format /docs/thumbnail-template.afpub
als Ausgangspunkt für eine eigene SVG-Vorlage mit den Abmaßen 1200x630px.
Verwende in deinem Template im head-Bereich die Methode thumb::getUrl()
und übergebe die gewünschte URL (z.B. die des aktuellen Artikels oder des aktuellen URL-Profils), zu der ein Bild generiert werden soll. Als Rückgabewert erhältst du einen Pfad für den Medien-Manager (standardmäßig: /media/thumb/file.png
).
<?php $og_image_url = thumb::getUrl(rex_getUrl()); ?>
<meta property="og:image" content="<?= $og_image_url ?>"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
Ausgabe:
<meta property="og:image" content="https://www.example.org/media/thumb/11c04adc200effba3c7479688f20e7da.png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
Wähle, welche API du verwenden möchtest und hinterlege Zugangsdaten für https://htmlcsstoimage.com/ oder für https://www.html2image.net/ und wähle ggf. ein anderes Hintergrundbild.
MIT Lizenz, siehe LICENSE.md
Alexander Walther
http://www.alexplus.de
https://github.com/alexplusde
Projekt-Lead
Alexander Walther