VEGAS Pro 21
Ahadesign Tutorials

Die Erweiterung Imgen passt die Größe von Bildern nicht nur beim Skalieren automatisch an, bindet Wasserzeichen ein und komprimiert sie auch gleich.

Image Generator

Imgen für Joomla!

Bei Imgen handelt es sich um eine Komponente für Joomla 1.5, 1.6 und 1.7, welche Bilder komprimiert und dynamisch in der Größe anpassen kann.

Für diese Extension sind außerdem zwei Plugins erhältlich. Mit dem einen Plugin lassen sich Wasserzeichen für Bilder hinzufügen. Das andere Plugin ist für das Resizing von Bildern innerhalb eines Artikels zuständig.

Die Komponente kann die in der Größe veränderten Bilder im Zwischenspeicher (Cache) aufbewahren. Der Pfad zu den Bildern kann verschlüsselt werden. So lassen sich die Speicherorte der originalen Bilder verbergen, falls dies gewünscht ist.

Damit der Image Resizer funktioniert, wird einfach nur der URL eines Bildes in die Komponente eingetragen. Dies bedeuted eine einfache Integration des Image Generators für eine beliebige Joomla Erweiterung.

Die Installation verläuft wie üblich mit dem Joomla-Installer. Zuerst wird die Komponente heruntergeladen und im Backend unter Erweiterungen -> Erweiterungen im Tab Installieren wird die Paketdatei hochgeladen.

Imgen - Komponente installieren

Dann sollte folgende Erfolgsmeldung ausgegeben werden: 

Imgen - Installation abgeschlossen

Die Komponente ist nun logischerweise unter Komponenten zu finden. 

Imgen - Komponente

Klickt man darauf, sieht man lediglich einen Hinweistext mit ein paar Anweisungen in englischer Sprache. Wie man diesen Anweisungen entnehmen kann, soll man oben rechts auf den Button Optionen klicken.

Außerdem wird gleich erklärt, wie der URL für Bilder auszusehen hat, wenn die Bilder im Standard-Ordner images liegen. Verwendet man in der Konfiguration von Imgen vorgegebene Werte für die Breite und Höhe der Images, wird der untere kürzere Link natürlich mit Angabe eines eigenen Bildes verwendet. Ganz unten führt ein Link zur Dokumentation dieser Extension. Diese Doku ist allerdings nur in englischer Sprache verfügbar.

Weiter geht es also mit einem Klick auf die Optionen, welche eine Lightbox mit wenigen Einstellungen zum Vorschein bringen.

Imgen - Konfiguration

Als erstes kann hier der vorgegebene Ordner für die Bilder angegeben werden. Hier sollte man also prüfen, ob der Ordner "stories" vorhanden ist, was zb. in Joomla 1.6 nicht mehr automatisch der Fall ist. Ansonsten kann er einfach per FTP angelegt werden oder der Default-Ordner muss eben hier in den Optionen geändert werden.

Dann geht es ebenso simpel weiter mit der Angabe der vorgegebenen Werte für Breite und Höhe in Pixeln und der Qualität. Bei weniger als 100 werden die Bilder entsprechend komprimiert, was oft durchaus sinnvoll ist.

Mit Cache Images kann die Zwischenablage aktiviert werden, was auch vom Entwickler so empfohlen wird. Die Cache Time gibt den Zeitraum in Minuten an, wie lange die Daten zwischengespeichert bleiben sollen.

Die Komponente schlägt gleich einen Ordner für die in der Größe veränderten Dateien bzw. für die Zwischenspeicherung vor. Das kann man gut so belassen.

Möchte man auch Bilder von externen Seiten mit der Komponente verwenden, muss die Option "Allow HTTP Images" aktiviert werden. In diesem Fall wird die Funktion "allow_url_fopen" benötigt, was eventuell erst in der PHP-Konfiguration eingestellt werden muss. Der Entwickler empfiehlt, diese Option nicht zu aktivieren.

Auch die Ausgabe von Fehlermeldungen, also die Option "Display Error Messages" sollte im Normalfall nicht genutzt werden. Im Falle von Problemen könnte dies aber schon hilfreich sein.

Nun wird einfach noch auf Speichern&Schließen geklickt und das war es auch schon.

Für einen ersten Test habe ich in Joomla 1.7 den Ordner stories innerhalb des Ordners images angelegt und dort das Bild powered_by.png eingefügt. In der Konfiguration wurde nichts geändert. Dann habe ich folgenden Link in die Adresszeile des Browsers eingetragen:

index.php?option=com_imgen&img=powered_by.png&width=300&height=200&format=png

Daraufhin erscheint das eigentlich nur 165x68 Pixel große Bild verzerrt auf die Größe 300x200 Pixel, wie im Link angegeben.

Imgen - Resized Image

Schiebt man das Browserfenster zusammen, wird das Bild ebenfalls proportional verkleinert. Die Komponente macht also genau das, was sie auch verspricht. Das vergrößerte Bild ist jetzt im Ordner images/imgen gespeichert.

Der Link kann auch mit anderen oder zusätzlichen Parametern verwendet werden. Anstelle von img= könnte man auch imgencoded= verwenden. Damit wird der Pfad zum Bild dann in Base64 verschlüsselt. Falls das Bild nicht im Ordner liegt, welcher in den Optionen der Komponente angegeben wurde, muss im Link für den Parameter &img der gesamte Pfad zum Bild eingetragen werden.

Auch der Parameter &format kann natürlich einen anderen Wert als png erhalten. Zusätzlich könnte noch der Parameter layout verwendet werden. Zb. layout=gif, wenn vielleicht ein PNG-Bild als GIF ausgegeben werden soll. Normalerweise ist das aber nicht notwendig.

Mit dem Parameter &quality wird ein Wert zwischen 1 und 100 also von extrem komprimiert bis sehr gute Qualität übergeben, wenn man das möchte. Soll das Resizing proportional stattfinden, reicht übrigens die Angabe eines einzigen Wertes, also entweder Breite oder nur die Höhe. Der jeweils fehlende Wert wird dann von Imgen kalkuliert.

Wird nirgendwo eine Breite und/oder Höhe vergeben, findet auch kein Resizing statt. So könnten für Bilder auch lediglich die Kompression oder Wasserzeichen, aber ohne Resizing verwendet werden.

Das alleine macht natürlich noch nicht so viel Sinn. Jetzt könnte man auch einen neuen Menüpunkt für Imgen anlegen. Also unter Menüs -> Main Menu wird zb. ein neuer Menüeintrag gewählt.

Imgen - Menü

Jetzt kann wie üblich ganz oben bei den Details ein Menütyp durch Klick auf den Auswählen-Button gewählt werden. Hier findet sich als Typ nun auch das "imgen Layout".

Imgen - Menütyp

Nach der Auswahl des imgen Layout wird noch ein Titel vergeben und die üblichen Einstellungen vorgenommen, wie bei anderen Menüpunkten auch. Nach dem Speichern und Schließen erscheint auf der Frontpage nun der neue Menübutton. Bei einem Klick darauf erscheint allerdings nur eine leere Seite. Der Sinn erschließt sich hier nicht so ganz. Wahrscheinlich ist hier das Layout für die Verwendung mit anderen Erweiterungen gemeint, wofür man aber dort auch den Code anpassen muss. Vielleicht kommt da noch was vom Entwickler.

Die Komponente bereitet die Funktionalität also eigentlich nur vor. Deshalb sollten jetzt unbedingt auch die Plugins installiert werden. Auch das geht wieder wie üblich unter Erweiterungen -> Erweiterungen im Tab Installieren mit Paketdatei hochladen.

Das wäre einmal die Datei imageresizer0.zip und plug_watermark0.zip

Nach der Installation können diese Plugins konfiguriert und vor allem auch aktiviert werden. Das geht unter Erweiterungen -> Plugins. Ein Klick auf die Plugins öffnet das Konfigurationsfenster. Beim ImageResizer sieht es auf der rechten Seite bei den Parametern dann so aus:

Imgen - Resizer Plugin Parameter

Hier können die Breiten und Höhen für die verschiedenen Views wie Bloglayout, Artikellayout und Hauptbeiträge in Joomla angegeben werden. Außerdem kann hier wieder der Pfad zum Bild mit Base64 verschlüsselt werden. Auf der linken Seite bei den Details muss lediglich das Plugin aktiviert werden.

Das zweite Plugin nennt sich Image - Watermark. Bei einem Klick darauf sieht es dann so aus:

Imgen - Wasserzeichen Plugin Konfiguration

Dieses Plugin kann also für ein Wasserzeichen genutzt werden, welches die Bilder vor unerlaubtem Gebrauch schützen soll. Oben wird der Pfad zum Wasserzeichen-Bild angegeben. Das kann ein PNG, GIF oder auch JPG sein.

Dann kann noch die Opacity angegeben werden. Der Wert zwischen 0 und 100 bestimmt also die Durchsichtigkeit des Wasserzeichens, wobei 100 nicht mehr durchsichtig ist. Verwendet man bereits ein Bild mit Transparenz, wird der Wert hier einfach ignoriert. Auch hier sollte nicht vergessen werden, das Plugin vor dem Speichern noch zu aktivieren.

Ruft man jetzt eine Seite mit einem Bild auf, erscheint wie hier im Beispiel das Wasserzeichen "copyright sample".

Imgen - Wasserzeichen

Laut Entwickler kann Imgen auch mit anderen Erweiterungen genutzt werden, wenn diese ein normales Template-System verwenden. Allerdings muss dann doch etwas im Code herumgewühlt werden. Wird zum Beispiel die Shop-Komponente Virtuemart mit dem vorgegebenen Theme verwendet, dann müsste die Datei theme.php angepasst werden.

Um ein Resize für das Haupt-Produktbild zu ermöglichen, muss zusätzlicher Code nach folgendem Codebereich welcher sich zwischen Zeile 76 und 81 befindet, eingesetzt werden:

if( stristr( $product['product_full_image'], "http" ) ) {
$imageurl = $product['product_full_image'];
}
else {
$imageurl = IMAGEURL.'product/'.rawurlencode( $VM_LANG->convert($product['product_full_image']));
}

Darunter wird dann folgendes eingetragen:

$imageurl = 'index.php?option=com_imgen&format=image&img='.$imageurl;

Die Erweiterung Imgen ist sicher sehr interessant, aber auf jeden Fall auch noch deutlich Ausbaufähig und längst nicht perfekt. Der Ansatz ist aber sehr vielversprechend und für viele Zwecke bietet Imgen ausreichende Möglichkeiten.

Komponente und Plugins sind kostenlos zu haben und für den Download ist keine Registrierung auf der Entwicklerseite notwendig. Insgesamt eine positive Sache.

Hier geht es zum Imgen - Download. (Link funktioniert nicht mehr und wurde entfernt.)

Speichern
Cookies Einstellungen
Wir verwenden Cookies, um Ihnen das beste Erlebnis auf unserer Webseite zu ermöglichen. Wenn Sie die Verwendung von Cookies ablehnen, funktioniert diese Website möglicherweise nicht wie erwartet.
Alle akzeptieren
Alle ablehnen
Essential
Für grundlegende Funktionalität der Website notwendig
Website
Akzeptieren
Marketing
Eine Reihe von Techniken, die die Handelsstrategie und insbesondere die Marktstudie zum Gegenstand haben.
Diverse
Akzeptieren
Ablehnen
Functional
Tools, die Ihnen beim Navigieren auf der Website mehr Funktionen bieten, dies kann soziales Teilen einschließen.
Osano
Akzeptieren
Ablehnen
Analytics
Werkzeuge zur Analyse der Daten, um die Wirksamkeit einer Webseite zu messen und zu verstehen, wie sie funktioniert.
Google Analytics
Akzeptieren
Ablehnen