J4.x

J4.x: Bilder mit dem Medienmanager anpassen

From Joomla! Documentation

This page is a translated version of the page J4.x:Adaptive Images for Media Manager and the translation is 100% complete.

Other languages:
Deutsch • ‎Ελληνικά • ‎English • ‎français • ‎Nederlands • ‎português do Brasil • ‎svenska
GSoC 2018
Anpassen von Bildern im neuen Medienmanager
Anleitung
Gsoc2016.png
Joomla! 
4.x

Einführung

Der Hauptaugenmerk dieser Erweitung liegt im Erhalt der wichtigen Botschaft, die mit dem Bild verknüpft ist, dem Benutzer wird dabei ein Weg geboten, einen Bereich des Bildes hervorzuheben. Bilder werden mit Hilfe dieser Erweiterung reaktionsfähig. Diese Erweiterung wird durch das Media-Action- und das Inhaltsplugin unterstützt.

Merkmale

  • Bietet einen Fokuseditor, der die Fokusinformationen des Verfassers auf eine intuitivere Art erfasst.
  • Automatischer Zuschnitt von Bildern entsprechend dem Ansichtsbereich des Clientgeräts.
  • Der Zuschnitt erfolgt um den vom Verfasser gewählten Bereich.
  • Der Autor kann bestimmte Maße wählen, auf welche die Bilder zugeschnitten werden sollen.
  • Der Verfasser kann für verschiedene Geräte den entsprechenden Fokus wählen.
  • Der Urheber kann auch alle in der Größe angepassten Bilder und die vorher festgesetzten Fokusierpunkte für ein bestimmtes Bild im Fokuseditor löschen.
  • Löscht ein Verfasser das Originalbild vom Medienmanager, wird auch das in der Größe geänderte Bild und die hervorzuhebenden Bereiche gelöscht.

Anmerkung: Um auf diese Erweiterung zugreifen zu können, muss der Administrator zwei Plugins im Plugin-Erweiterungsmanager freischalten:

  1. Media-Action: Smart Crop Plugin
  2. Inhalt: Adaptive Image Plugin

Zugeschnittene Bilder

Original image with focus area
Resized Images for focus area mentioned

Eine Anleitung, Eckpunkte für einen Bildbereich eines bestimmten Bildes festzulegen

  1. Finde im Medienmanger das Bild, welches du durch die Betonung eines Bildbereichs hervorheben willst. Wenn gewählt, klicke auf den Bleistift zur Bearbeitung.,
    NMM edit images-en.png
  2. Bearbeite das Bild, im sich öffnenden Fenster klicke auf den Reiter Smart Crop.
    Edit image-en.png
  3. Wähle anschließend den Bildbereich, den du hervorheben möchtest, der Editor ist dabei behilflich.
    Smart Crop Tab-en.png
  4. Nachdem der Bereich festgelegt wurde, speichere und schließe das Editorprogramm, du wirst zum Medienmanger zurückgeleitet.
    Parameters-en.png
  5. Füge das Bild wie gewöhnlich deinem Beitrag hinzu. Wow...!! Dein Bild wurde reaktionsfähig und gleichzeit blieb der wichtige Ausschnitt des Bildes erhalten.

Mehrere Bildbereiche hinzufügen

  1. Führe die gleichen Schritte wie oben aus, die Ausgangsbildbereiche festzulegen.
  2. Das Plugin bietet in der oberen rechten Ecke ein Drop-down Menü mit verschiedenen vorgegebenen Maßen.
    Different Focus-en.png
  3. Wähle ein Maß und wähle dann einen Punkt für den Bildbereich im Fokuseditor.
  4. Speichere und schließe den Reiter

Angepasste Maße verwenden

  1. Suche im Plugin-Erweiterungsmanager nach Media-Action Smart Crop.
    Plugin extension manager-en.png
  2. Füge dort jetzt neue Maße hinzu und speichere das Plugin.
    Add Widths-en.png
    Enter Widths-en.png
  3. Du bemerkst sicher diese Maße im Reiter Smart Crop.
    Custom widths-en.png

Den zuletzt gesetzten Fokussierpunkt löschen

Achtung: Das Folgende wird alle vorher gespeicherten Fokusse und skalierten Bilder des Originalbilds, die durch das Plugin erzeugt wurden, löschen.

  1. Wähle den Reiter Smart Crop unter Bild bearbeiten.
  2. Im rechten unteren Drittel des Bildschirms findet sich der "delete focus" Knopf.
  3. Nach dem Löschen des vorherigen Fokus lade die Seite neu oder klicke auf abbrechen um zum Medienmanager zurückzukehren.
Delete Focus Button-en.png

Arbeitsweise

Die Erweiterung besteht aus zwei unabhängigen Zusatzprogrammen.

Smart Crop Plugin

Hier handelt es sich um ein Media-Action Plugin. Es stellt eine Benutzerschnittstelle zur Verfügung, um Bildbereichspunkte zu verwalten. Es nimmt die Fokuspunkte vom Benutzer entgegen und speichert sie im Datenbestand ab indem eine AJAX-Anfrage an den AdaptiveImageController.php erfolgt. Wenn der Autor schließlich mit dem Fokus zufrieden ist, klickt er auf Speichern und Schließen, was eine weitere AJAX-Anfrage auslöst, diesmal werden neue Bilder mit einem leistungsfähigen Algorithmus erzeugt und im Verzeichnis /media/focus abgelegt. Die Bezeichnung für die in der Größe geänderten Bilder lautet (resize image width)_(base64 encoded full path of the image).

Anpassungsfähiges Bildplugin

Hier handelt es sich um ein Inhaltsplugin. Wenn der Fokus eines bestimmten Bildes in einem derzeit geöffneten Beitrag festgelegt wird, fügt das Plugin das <picture>-Element zu diesem Bild hinzu und all die zugehörigen skalierten Bilder werden an dieses angehängt aus /media/focus/. Dieses Plugin wird auch alle die in der Größe geänderten Bilder löschen, falls das Ursprungsbild nicht gefunden oder gelöscht wurde.

Die Erweiterung ausbauen

Den Speicher für Fokussierpunkte ändern

Derzeit wird der Fokusbereich im JSON-Format im Dateispeichertreiber (JSONFocusStore) gespeichert. Das kann zu jeden beliebigen Datenspeicher geändert werden, indem eine neue Treiberklasse in Joomla\CMS\AdaptiveImage\ erzeugt wird. Die Treiberklasse sollte das Joomla\CMS\AdaptiveImage\FocusStoreInterface anwenden. Die JSONFocusStore Treiberklasse bringt Joomla\CMS\AdaptiveImage\FocusStoreInterface zur Anwendung. FocusStoreInterface hat die folgenden Befehle zur Folge:

1. setFocus($dataFocus, $width, $imgSrc)

Dieser Befehl speichert/aktualisiert den Fokusbereich am Speicherort.
  • $dataFocus Beinhaltet die Dimensionen des Speicherbereichs und ist eine Matrix mit den Werten box-left, box-top, box-width, box-height.
  • $width Das ist die Größe des Bildes für das der Fokussierungsbereich gepeichert wird.
  • $imgSrc Hier wird der komplette Pfad des Bildes entsprechend dem Fokussierungsbereich wiedergegeben.

2. getFocus($imgSrc, $width)

Dieser Befehl gibt den Fokussierungsbereich des Bildes aus. Es gibt dabei alle mit dem Bild verknüpften Fokusbereiche aus.
  • $imgSrc Bezeichnet den kompletten Pfad des Bildes entsprechend dem Fokussierungsbereich.
  • $width(optional) Nur wenn der Benutzer einen Wert für den Fokussierungsbereich mit besonderen Maßen erfasst hat, wird das angezeigt.

3. deleteFocus($imgSrc)

Löscht jedweden Fokus, der mit dem Bild verknüpft ist.
  • $imgSrc Hier wird der komplette Pfad des Bildes entsprechend dem Fokussierungsbereich wiedergegeben.