Bilder für verschiedene Ansichten und Social Media auswählen

Eine breite Illustration kann alle wichtigen Details enthalten und trotzdem als Kartenbild ungeeignet sein. Im Northstar Studio-Beispiel liegt das Workshop-Notizbuch nahe am rechten Tischrand. Das Original ist detailliert genug, aber der zentrierte Zuschnitt schneidet das Motiv ab. Auf einem Telefon erscheint das Notizbuch klein, wenn der gesamte Tisch gezeigt wird.

Das sind unterschiedliche redaktionelle Entscheidungen. Eine kleinere Datei erleichtert die Übertragung. Ein Fokuspunkt steuert den Bildzuschnitt. Ein separates mobiles Bild ermöglicht eine nähere Komposition für schmale Bildschirme.

Wählen Sie für dieses Beispiel zwei Bilder aus der Media Library: Workshop table landscape und Workshop notebook detail. Das Querformat ist die Originalillustration mit 2400×1200 Pixeln. Der Hochformat-Ausschnitt ist ein separates Bild desselben Notizbuchs mit 900×1200 Pixeln für die mobile Ansicht.

Halten Sie diese Unterscheidung klar. WebBlocks CMS generiert kleinere und zugeschnittene Varianten aus unterstützten öffentlichen JPEG-, PNG- und WebP-Bildern. Diese generierten Dateien werden nicht zu zusätzlichen Media Library-Einträgen. Der Porträtausschnitt erscheint hier, da es sich um ein zweites, vom Herausgeber ausgewähltes Original handelt.

Öffnen Sie das Querformatbild in Medien und sehen Sie sich Image Variants an. In diesem Beispiel wird durch die zentrierten Miniaturansichten und Kartenausschnitte ein Teil des Notizbuchs abgeschnitten. Die Inhaltsvorschauen bewahren die Proportionen der breiten Illustration; Sie führen nicht zu einer näheren Betrachtung des Themas.

Eine höhere Auflösung würde dieses Problem des Bildausschnitts nicht lösen. Das Motiv liegt im falschen Bereich des Zuschnitts. Hier sehen Sie Systemvarianten: Eine Card-Vorschau bedeutet nicht, dass der Card-Block sie automatisch verwendet. Die aktuelle Version hält die Varianten card und hero bereit, bietet aber keine eigenen Media Library-Felder für diese Blockrollen.

Wählen Sie im Medienformular das Notizbuch mit dem Focal Point-Werkzeug aus und speichern Sie die Änderung. Der Fokuspunkt gehört zum Medieneintrag; prüfen Sie deshalb vor dem Verschieben auch dessen andere Verwendungen. Er steuert die generierten Zuschnitte dieses Bildes und ist keine separate Einstellung pro Platzierung.

Erstellen Sie die Vorschauen mit Regenerate variants neu und prüfen Sie sie. Thumbnail und Card zeigen nun das ganze Notizbuch. Die Originaldatei bleibt unverändert. Contain-Varianten bewahren das Seitenverhältnis; der Fokuspunkt zoomt den normalen Image-Block daher nicht in das Notizbuch hinein.

Die Variantengrößen werden vom CMS definiert. Auf diesem Bildschirm kann ein Redakteur sie prüfen und neu generieren. Es werden keine benutzerdefinierten Abmessungen für jedes Projekt angeboten. Sehen Sie sich auch die Social-Vorschau an: Social-Bilder von Seiten oder Websites verwenden den Social-Ausschnitt für Open Graph- und Twitter-Metadaten.

Der Bildblock der Seite verwendet Workshop table landscape als Standard-Medienasset und Workshop notebook detail als Mobile Image. Die zweite Auswahl ist eine redaktionelle Auswahl, unabhängig von den generierten Varianten.

Bis einschließlich 768 Pixel Bildschirmbreite wählt der Renderer das mobile Bild, darüber das Standardbild. Fehlt die mobile Auswahl, ist sie privat oder wurde sie gelöscht, wird das Standardbild verwendet. Der Image-Block stellt auch responsive Bildkandidaten bereit. Die Wahl einer kleineren Datei ist jedoch etwas anderes als diese alternative Komposition.

Die Desktop-Vorschau zeigt den gesamten Tisch. Die mobile Vorschau rückt das Notizbuch in den Vordergrund, sodass Besucher es nicht erst in einer breiten Szene suchen müssen.

Beide Bilder verwenden den gleichen Block-Alt-Text und die gleiche Bildunterschrift. In diesem Beispiel beschreibt „Ein illustriertes Werkstatt-Notizbuch mit einem Terrakotta-Kreis und einem grünen Dreieck“ das Thema in beiden Ansichten. Alternativtext und Bildunterschriften können pro Sprache übersetzt werden, die Standard- und Mobilauswahl bleiben jedoch sprachübergreifend gleich. Wählen Sie verwandte Kompositionen aus, die immer noch mit diesen Beschreibungen übereinstimmen.

Zwei weitere Punkte sind zu prüfen: Der Gallery Viewer des Image-Blocks öffnet weiterhin das Standardbild in voller Auflösung. Außerdem bestimmt Mobile Image nicht das Social-Media-Bild der Seite. Wählen und prüfen Sie das zum Teilen verwendete Seiten- oder Website-Bild separat. Die Social-Vorschau im CMS zeigt den generierten Zuschnitt; prüfen Sie beim Teilen auch die endgültige Karte des externen Dienstes.

Informationen zum zugrunde liegenden Verhalten finden Sie unter Medien Image Variants. Fügen Sie ein Bild hinzu geht durch die Blockfelder. Wenn die Bilder Teil einer Live-Seitenaktualisierung sind, verwenden Sie Workflow für die Überprüfung veröffentlichter Seiten.

Kommentare werden vor der Veröffentlichung geprüft.