Joomla! Documentation™

GSoC 2018
Anpassen von Bildern im neuen Medienmanager
Anleitung

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

• Stellt einen Editor zum Anzeigen verschiedener Ausschnitte eines Bildes auf der Basis der Größe des Anzeigefensters zur Verfügung. Dieses Plugin übernimmt auf intuitivere Weise die Informationen vom Verfasser.
• Schneidet Bilder entsprechend dem Ansichtsfenster des Client-Geräts automatisch zu.
• Der Beschnitt erfolgt rund um den vom Verfasser ausgewählten Bereich.
• Der Verfasser kann die Breite wählen, auf die die Bilder zugeschnitten werden sollen.
• Der Verfasser kann für verschiedene Geräte den entsprechenden Ausschnitt wählen.
• Der Urheber kann auch alle in der Größe angepassten Bilder und die vorher festgesetzten Ausschnitte für ein bestimmtes Bild mit dem Ausschnitt-Editor löschen.
• Löscht ein Verfasser das Originalbild vom Medien-Manager, werden auch das in der Größe geänderte Bild und die hervorzuhebenden Bereiche gelöscht.

Anmerkung: Um diese Erweiterung zu aktivieren, muss der Administrator zwei Plugins im Plugin-Erweiterungsmanager freischalten:

1. Media-Action: Focus Plugin
2. Inhalt: Adaptive Image Plugin

Zugeschnittene Bilder

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.,
   
2. Zum bearbeiten des Bildes wird man auf ein neues Fenster umgeleitet. Klicke auf die Registerkarte Fokus.
   
3. Wähle anschließend den Bildbereich, den du hervorheben möchtest, der Editor ist dabei behilflich.
   800px
4. Nachdem der Bereich festgelegt wurde, speichere und schließe das Editorprogramm, du wirst zum Medienmanger zurückgeleitet.
   
5. Nun dieses Bild einfach ganz normal zu dem Beitrag hinzufügen. Wow...!!! Das Bild ist responsiv, wobei der wichtige Teil des Bildes beibehalten wird.

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.
   
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 Focus.
   
2. Füge dort jetzt neue Maße hinzu und speichere das Plugin.
   
   
3. Du bemerkst sicher diese Maße im Reiter Focus.
   

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 Focus 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.

Arbeitsweise

Die Erweiterung besteht aus zwei unabhängigen Zusatzprogrammen.

Focus 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.