Image Focal Point

Mit der Image Focal Point-App können Sie Bilder mit Mittelpunktdaten verknüpfen, um sie auf verschiedenen Geräten und Bildschirmgrößen besser zuschneiden zu können.

Apps Image Focal Point Cover

Intern wird die App:

  • Einen neuen Contenttyp mit drei Feldern erstellen: einem Titel, einem Bild und einem Mittelpunktfeld.

  • Die Anzeige und Funktionalität des Eintragseditors für diesen Contenttyp konfigurieren.

Schritt 1: Installieren

Füllen Sie das Feld Contenttyp-Name aus (oder verwenden Sie den Standardwert „Bild mit Mittelpunkt“) und klicken Sie auf Installieren.

Apps Image Focal Point install

Dadurch wird ein neuer Contenttyp mit drei Feldern erstellt:

  • Ein Titelfeld vom Typ „Kurztext“.

  • Ein Bildfeld vom Typ „Medien“.

  • Ein Mittelpunktfeld vom Typ „JSON-Objekt“.

Schritt 2: Erstellen Sie ein neues Bild mit Mittelpunkt-Eintrag und legen Sie die Mittelpunkt-Daten fest

So erstellen Sie Ihr erstes Bild mit Mittelpunktdaten:

  1. Navigieren Sie zur Registerkarte Content.

  2. Erstellen Sie einen neuen Eintrag vom Typ „Bild mit Mittelpunkt“(oder den Namen, den Sie während der Installation gewählt haben).

  3. Geben Sie den Titel, das Bild und die Mittelpunktdaten ein.

  4. Klicken Sie in der Seitenleiste auf Veröffentlichen, um das neue Bild mit Mittelpunkt-Eintrag zu veröffentlichen.

Schritt 3: Konfigurieren Sie Ihren Contenttyp, der eine Referenz für das Bild mit Mittelpunkt benötigt

So verwenden Sie das neu erstellte Bild mit Mittelpunkt-Eintrag:

  1. Gehen Sie zur Registerkarte Content-Modell.

  2. Bearbeiten Sie den Contenttyp, der auf das Bild mit Mittelpunkt verweisen soll.

  3. Erstellen Sie ein neues Feld vom Typ „Referenz“ und öffnen Sie seine Konfiguration.

  4. Legen Sie eine Validierungsoption fest, um Einträge vom Typ „Bild mit Mittelpunkt“ zu akzeptieren.

  5. Optional: Setzen Sie das Widget des neuen Referenzfelds auf Eintragskarte, um eine Vorschau des Bildes mit dem Mittelpunkt zu erhalten, auf das es verlinkt.

  6. Gehen Sie zurück zur Registerkarte Content.

  7. Erstellen/bearbeiten Sie einen Eintrag des Contenttyps, der auf das Bild mit Mittelpunkt verweist.

  8. Legen Sie das Referenzfeld fest, das Sie hinzugefügt haben, um auf den Eintrag mit „Bild mit Mittelpunkt“ zu verweisen.

Wie kann ich die Mittelpunkt-Daten verwenden, die ich zum Zuschneiden des Bildes festgelegt habe?

Um das Bild basierend auf den von Ihnen definierten Koordinaten zuzuschneiden, können Sie einen der folgenden Ansätze verwenden:

  • Rufen Sie das gesamte Bild ab und schneiden Sie es im Frontend basierend auf den Koordinaten zu.

  • Nutzen Sie eine Lambda-Funktion, um das Zuschneiden durchzuführen.