JoomImages

Zuletzt aktualisiert am Freitag, 03. Februar 2012 09:24

Das Modul JoomImages zeigt Bilder aus der JoomGallery an. Mit seinen umfangreichen Konfigurationsmöglichkeiten kann es auf die individuellen Bedürfnisse angepasst werden. Im folgenden findet ihr Erklärungen zu den einzelnen Parametern und Beispiele.

Diese Dokumentation bezieht sich auf das Modul in der Version 1.5.5. Voraussetzung ist die Installation der JoomGallery der Version 1.5.5 oder neuer.

Nach der Installation des Moduls könnt ihr in den Parametern das Erscheinungsbild und die Bildauswahl vorgeben. Am Anfang kann das Backend besonders für Erstnutzer des Moduls unübersichtlich wirken. Darum ist es sinnvoll, nicht sofort viele Parameter zu ändern, sondern nur wenige und sich das Ergebnis der vorgenommenen Einstellungen sofort im Frontend anzusehen.

So entwickelt ihr am schnellsten ein Gefühl für die Bedeutung der Parameter. Die Tooltips zu den Bezeichnungen geben mit ihren kurzen Beschreibungen eine erste Hilfe.

Wenn Ihr Einstellungen vorgenommen habt und dann keine Bilder mehr angezeigt werden und ihr nicht wisst, welche Parameteränderungen dafür verantwortlich waren: Deinstalliert das Modul und installiert es neu. Dann werden die Standardparameter vorgegeben und ihr könnt wieder schrittweise eure Wunscheinstellungen testen.


In den allgemeinen Parametern wird die Anzeige über die Standardansicht oder die Slideshow festgelegt. Weiterhin wird hier eingestellt, wie die Bilder nach bestimmten Kriterien ermittelt und in einer bestimmten Reihenfolge angezeigt werden sollen.

Allgemeine Parameter

Allgemeine Parameter

Modul Klassen Suffix
Im Normalfall wird die Ausgabe des Moduls im HTML Code von einem HTML-Tag 'div' mit der CSS-Klasse 'moduletable' oder 'module' umgeben. Für die Einrichtung von speziellen Styles nur auf dieses Modul bezogen, könnt ihr hier einen Text eingeben, z.B. '_jimg'. Dann würde der Name der CSS-Klasse um diesen Text erweitert werden, zum Beispiel 'moduletable_jimg' . Im CSS kann dann so das Modul unabhängig von anderen Modulen gestyled werden. Am Anfang könnt ihr dieses Feld leer lassen.

Cache
Wenn in Joomla! das Caching eingeschaltet ist, kann durch Setzen dieser Option auf 'Ja' auch eine Zwischenspeicherung der Modulausgaben eingeschaltet werden. Das kann zu einem schnelleren Aufbau der Seite führen, aber leider in manchen Fällen auch zu Fehlern in der Anzeige. In diesem Fall setzt diese Option wieder auf 'Nein'.

Itemid
Wenn ihr eine andere Itemid als die der JoomGallery verwenden wollt, gebt hier einen neuen Wert ein.

Standardansicht oder Slideshow anzeigen
In der Standardansicht werden Bilder der Galerie in mehreren Zeilen und Spalten angezeigt. In den 'weiteren Parametern für die Standardansicht' könnt ihr dies genauer einstellen. Die Slideshow zeigt immer nur ein Bild aus der in den Parametern vorgegebenen Bildsammlung an. Dabei können in den 'weiteren Parametern für die Slideshow' genauere Einstellungen vorgenommen werden.

Art der Bilder
Hier könnt ihr vorgeben, welche Bildtypen aus der JoomGallery im Modul angezeigt werden sollen, Thumbnails, Detail- oder Originalbilder.

Anzahl der Bilder
Legt hier fest, wieviele Bilder maximal aus der JoomGallery ermittelt werden sollen. Diese werden dann gleichzeitig oder paginiert in der Standardansicht bzw. in der Slideshow nacheinander angezeigt. Es kann gut sein, dass durch weitere Vorgaben in den Einstellungen nicht diese Anzahl von Bildern ermittelt werden kann und im 'schlimmsten' Fall kein Bild angezeigt wird. Dazu später mehr.

Sortierung
Hier könnt ihr vorgeben, in welcher Reihenfolge die Bilder ausgegeben werden sollen

Wenn die folgenden Optionen der Sortierung ausgewählt werden, erfolgt eine Abfrage von Bildern, 
zu denen mindestens ein Kommentar abgegeben wurde. Wenn bisher kein Kommentar für ein Bild
abgegeben wurde, werden im Modul auch keine Bilder angezeigt.


Zeitraum
Ihr könnt hier die Auswahl auf die Bilder beschränken, die innerhalb eines bestimmten Zeitraums hochgeladen wurden.

Kategorien/Mit Unterkategorien/Kategorien ignorieren oder anzeigen
In dem Feld 'Kategorien' könnt ihr die IDs der Kategorien eingeben, aus denen aussschließlich Bilder im Modul angezeigt werden sollen. Oder diese IDs bezeichnen die Kategorien, aus denen keine Bilder im Modul angezeigt werden sollen. Die Kategorie IDs findet ihr im Kategoriemanager der JoomGallery. Mehrere IDs werden durch ein ',' getrennt.

Beispiel: Es sollen nur aus den Kategorien mit den IDs 3 und 4 Bilder im Modul angezeigt werden.
Kategorien: 3,4
Kategorien ignorieren oder anzeigen: Zeigen

Wenn ihr 'Mit Unterkategorien' auf 'Ja' setzt, bezieht sich die obige Einstellung auch auf abhängige Unterkategorien. Wenn im Beispiel die Kategorie 10 eine Unterkategorie von 3 ist, werden auch Bilder aus der Unterkategorie 10 angezeigt.

An Kategorien anpassen
Wenn das Modul und die JoomGallery gleichzeitig angezeigt werden, kann über diesen Parameter bestimmt werden, ob das Modul nur Bilder aus der gerade gezeigten Kategorie ausgibt.


Mit der Standardanzeige können mehrere Bilder aus der JoomGallery gleichzeitig angezeigt werden. Neben den schon erklärten 'Allgemeinen Parametern' kann in den 'Weiteren Parametern für die Standardansicht' das Aussehen der Darstellung für die Anordnung der Bilder im gesamten als auch für die einzelnen Bilder vorgenommen werden.
Testet die Einstellungen schrittweise und nicht mehrere auf einmal. Dies gilt besonders für die Größeneinstellungen der Bilder und die Anzeige der Textausgaben in Verbindung mit Kommentaren.

Parameter der Standardansicht 1

Parameter Standardansicht Teil 1

Anzahl Spalten
Hier könnt ihr vorgeben, in wievielen Spalten die Bilder angezeigt werden sollen. So könnt ihr indirekt die Anzahl der Zeilen festlegen. Zum Beispiel würde die Ausgabe von 10 Bildern in 4 Spalten 3 Zeilen ergeben. Es kann abhängig von der Anzahl der Spalten und der Breite der Bilder passieren, dass der Platz zwischen den Bildern verschwindet und es sogar zu Überlappungen kommt.

Beispiel (3 Spalten):

Beispiel für die Standardansicht

Ihr könnt mit den Größeneinstellungen für die einzelnen Bilder versuchen, diesen Abstand wieder herzustellen, oder eine Spalte weniger vorgeben. Hier ist Experimentieren angesagt.

Pagination
Bei der Darstellung von vielen Bildern (besonders z.B. bei der Platzierung in einem Artikel oder in einer Modulposition der JoomGallery) kann es hilfreich sein, diese nicht komplett anzuzeigen, sondern eine sogenannte Pagination zu aktivieren, anfangs die der Seite 1.

Beispiel:
Anzahl der Bilder: 9
Anzahl Spalten: 3
Bilder in Pagination: 3
Position der Paginationlinks: Oben


TODO


Bedenkt bitte, dass im Hintergrund die Links zu allen Bildern geladen werden. Per Javascript/CSS werden nur die Bilder der aktiven Seite in der Pagination aktiviert. Bei einem Klick auf eine andere Seitenzahl werden die vorherigen Bilder ausgeblendet und die der neuen Seite eingeblendet. Bei einem Browserrefresh 'springt' die Pagination wieder auf die erste Seite.

Bildlink

Nachricht, wenn es keine Bilder gibt
Wenn entsprechend eurer Vorgaben keine Bilder ermittelt werden konnten, kann eine Information darüber ausgegeben werden. Aktiviert diese Anzeige, wenn ihr experimentiert. damit könnt ihr sicher gehen, dass das Modul tatsächlich keine Bilder gefunden hat und nicht andere Fehler eine Rolle spielen.

Position des Bildes
Wie soll das Bild in Beziehung zu den Textelementen angeordnet werden? Die Einstellungen sollten selbsterklärend sein.
Wenn ihr 'links' oder 'rechts vom Text' einstellt und der Platz in der Breite nicht ausreicht, wird der Text unterhalb des Bildes angezeigt.

Dynamische Thumbnailgröße/Breite/Höhe
Wenn aktiviert, wird bei der Anzeige ein Script aufgerufen, welches aus dem Bild einen Ausschnitt berechnet. Damit ist eine gleichmäßige Formatierung aller Bilder möglich, z.B. quadratische Thumbnails. Ein Beispiel seht ihr unten auf unserer Webseite:
Anzahl Bilder: 10
Anzahl Spalten: 5
Dynamische Thumbnailgröße: Ja
Breite: 60
Höhe: 60

Besonders bei der Darstellung vieler und größerer Bilder kann diese vorherige Berechnung 
zeitintensiv und prozessorlastig sein. Das kann zu einem verzögerten Aufbau eurer Seite
führen. Alle anderen Parameter für die Größenangaben werden ignoriert.

CSS Größendefinition und CSS max. Größe
Während bei der dynamischen Thumbnailgröße ein Ausschnitt des Bildes angezeigt wird, kann hier das vollständige Bild in der Breite oder Höhe bzw. in beidem verändert angezeigt werden. Im letzten Fall kann dies aber zu Verzerrungen des Bildes führen. Wenn ihr quadratische Thumbnails unverzerrt anzeigen lassen wollt und die Ursprungsbilder unterschiedliche Formate haben, ist die dynamische Thumbnailgröße die bessere Wahl.

Mit diesen Parametern könnt ihr die Bilder verkleinern, ohne dass die Originalproportionen verloren gehen.

Beispiel: Die Thumbnails haben eine maximale Kantenlänge von 133px (Höhe oder Breite). Ihr wollt die längste Seite des Bildes auf 100px verkleinern. In 'CSS max. Größe' gebt ihr dann '100' ein und setzt 'CSS Größendefinition' auf 'Ja'. In diesem Fall wird für jedes einzelne Bild per CSS eine individuelle Höhen und Breitenvorgabe ausgegeben.

Ihr könnt auch größere Werte als die tatsächlichen Dimensionen eingeben. Das Ergebnis geht aber 
zu Lasten der Darstellung, die Bilder wirken verschwommen und verpixelt. Diese Parameter werden
ignoriert, wenn der Parameter 'dynamische Thumbnailgröße' aktiviert ist. Wegen der Vorgabe von
CSS-inline Styles für jedes einzelne Bild vergrößert sich der ausgegebene Code. Dies kann
Auswirkungen auf die Ladezeit der Seite haben. Wenn die 'CSS Größendefinition' aktiviert ist,
werden die Einstellungen in 'Breite der Bilder' und 'Höhe der Bilder' ignoriert.

Breite der Bilder und Höhe der Bilder
Während bei der dynamischen Thumbnailgröße ein Ausschnit errechnet und angezeigt wird und mit der 'CSS Größendefinition' die kompletten Bilder mit CSS-Styles beeinflusst werden, können mit diesen Parametern Größeneinstellungen über die Vorgaben der img Tags festgelegt werden. Dies entspricht im Ergebnis den der CSS-Größendefinition, es wird nur eine andere Methode der Größenbeeinflussung im HTML Code gewählt.

Beispiele:

Diese Einstellungen werden ignoriert, wenn die 'dynamische Thumbnailgröße' oder die 
'CSS Größendefinition' aktiviert ist.

Im zweiten Teil der Parametrierung für die Standardansicht geht es um die Einstellungen für die Ausgabe der Textelemente, des Scrolleffekts und der allgemeinen Ausrichtung der Elemente. Beachtet bitte, dass bei Aktivierung der Parameter für die Kommentare ggf. keine Bilder angezeigt werden, wenn bisher keine Kommentaren vergeben worden sind.

Parameter der Standardansicht 2

Parameter Standardansicht Teil 2

Textanzeige
Wenn diese Einstellung auf 'Nein' gesetzt ist, sind die nachfolgenden Parameter für die Anzeige von Textelementen wirkungslos. Es wird nur das Bild angezeigt.

Bildtitel
Anzeige des Bildtitels

Zeilenumbruch Titel
Nach welcher Anzahl von Zeichen des Bildtitels soll ein Zeilenumbruch eingefügt werden? Wenn auf '0' eingestellt, wird der Bildtitel in einer Zeile ausgegeben.

Bildbeschreibung
Anzeige der Bildbeschreibung

Maximale Textlänge
Ab welcher Anzahl von Zeichen soll der Text der Bildbeschreibung insgesamt gekürzt werden?

Zeilenumbruch Text
Ab welcher Anzahl von Wörtern in der Beschreibung soll ein Zeilenumbruch eingefügt werden?

User bis Anzahl Kommentare
Ausgabe der entsprechenden Textelemente

Wenn ihr  die Einstellungen der Kommentartexte (Datum/Text/Anzahl) aktiviert habt, werden Bilder 
ohne Kommentare nicht angezeigt. Wenn kein kommentiertes Bild vorhanden ist, zeigt das Modul
kein Bild an.

Maximale Kommentarlänge und Zeilenumbruch Kommentar
siehe 'Maximale Textlänge' und 'Zeilenumbruch Text'

Link zu Kommentar
Soll ein Link auf die Kommentare unterhalb der Detailansicht in der JoomGallery ausgegeben werden?

Bilder scrollen
Mit dieser Einstellung kann mit dem HTML Tag 'marquee' eine einfache Slideshow realisiert werden. Dabei werden die Bilder horizontal oder vertikal bewegt.

Diese Einstellung ist nach derzeitigem CSS Standard nicht definiert, sie ist aber wahrscheinlich 
für den noch nicht verabschiedeten Standard CSS3 vorgesehen (Quelle). Im Moment gilt
dieses von Microsoft eingeführte Tag noch als 'proprietär'. Es könnte also Probleme bei
bestimmten Browsern geben, welche diese Funktionalität nicht oder nur teilweise umgesetzt
haben. Ein Test mit mehreren Browsern ist in diesem Fall immer sinnvoll. Besonders mit dem
Opera, unsere Erfahrung.

Scrollrichtung
In welche Richtung sollen die Bilder bewegt werden?

Höhe/Breite des Scrollfeldes
Abmessungen der 'Box' in der die Bilder herein- und wieder herausscrollen

Scrollamount und Scrolldelay
Mit diesen beiden Werten wird festgelegt, wie flüssig, diese Anmiation ablaufen soll. 'Scrollamount' legt fest, in welchen Pixelsprüngen die Bilder bewegt werden. 'Scrolldelay' beschreibt die Pause in Millisekunden zwischen zwei Pixelsprüngen. Experimentiert eure besten Einstellungen aus

scrollmouse
Soll die Bildshow anhalten, wenn der Mauszeiger darüber bewegt wird?

Ausrichtung horizontal und Ausrichtung vertikal
Hier legt ihr fest, wie die Bilder und Textelement ausgerichtet werden sollen

Sectiontableentry
Wenn aktiviert wird jeder Bildzeile abwechselnd die CSS Klasse 'sectiontableentry1' und 'sectiontableentry2' zugewiesen. Mit entsprechender Definition z.B. in der 'Template CSS' könnt ihr so den einzelnen Zeilen unterschiedliche Hintergrundfarben zuweisen (Zebraeffekt)

Rahmen
In den restlichen Parametern der Standardansicht könnt ihr einen Rahmen um jedes Bild definieren. Achtet darauf, dass im Parameter 'Farbe des Rahmens' ein valider Farbwert vorgegeben ist, z.B. '#000000', nicht '000000'. Ihr könnt auch die Shortsyntax verwenden, soweit dies möglich ist: #000. Weiterhin ist die Vorgabe der Einheiten für die Parameter 'Breite des Rahmens' und 'Abstand des Rahmens vom Bild' wichtig. Also '2px' oder '0.2em', nicht '2'.


Die Slideshow (auf mootools basierend) zeigt im Gegensatz zu der Standardansicht immer nur ein Bild an. Genauer gesagt: Im HTML werden zwei Bilder aufgebaut und per Javascript zwischen diesen mit Übergangseffekten gewechselt. Die im Modul integrierten Javascripts arbeiten auch so in der RokSlideshow. Für das Modul wurde eine kleine Änderung eingebaut, um mehrere Instanzen von Modulen mit aktivierter Slideshow zu ermöglichen.

Die Idee und Realisierung wurde uns von einer Entwicklerin übersandt. Wir haben diese gern mit kleinen Anpassungen übernommen. Vielen Dank an Helene!

Wenn vorher schon das Wort 'Experimentieren' fiel, gilt das für die Einstellungen der Slideshow besonders. Es kann hier nicht beschrieben werden, welche Einstellungen für euch die 'besten' sind. Das findet ihr nur heraus, indem ihr ein wenig herumspielt.

Parameter der Slideshow

Parameter Slideshowansicht

Breite/Höhe
Abmessungen der Slideshow in px. Hier nur eine Zahl eingeben.

Art der Bilder
Ihr könnt hier einstellen, welche Bilder ihr darstellen wollt (Thumbnails/Detailbilder/Originalbilder). Das hängt von den Abmessungen ab, die ihr für die Slideshow vorgegeben habt. Thumbnails in einer groß dimensonierten Slideshow würden sehr verpixelt angezeigt werden.

Ladeanzeige
Bevor die Slideshow angezeigt wird, müssen alle Bilder vorgeladen werden. Da ist es sinnvoll diese Einstellung auf 'Ja' zu stellen, um nicht während dieses Vorganges eine gähnende Leere an der Stelle des Moduls anzuzeigen. Dies gilt besonders, wenn Detailbilder oder Originalbilder vorgeladen werden müssen.

Bildbeschreibung/Bildtitel anzeigen
Wenn einer dieser Parameter aktiviert ist, wird bei laufender Slideshow am unteren Rand der entsprechende Text eingeblendet und nach kurzer Zeit wieder ausgeblendet

Höhe des Textfeldes bis Farbe
Bei aktivierter Textanzeige der Bildbeschreibung und des Bildtitels könnt ihr hier Feineinstellungen vornehmen

Dynamische Bildgrößenänderung
Ein Parameter der zu Kopfschmerzen führen kann.... Bei bestimmten Effekten (z.B. Zoom oder Combo - Ken Burnes) macht er Sinn, manchmal leider nicht, besonders bei der Anzeige von Bildern in unterschiedlichen Formaten (Hoch/Querformat). Allgemein geht es darum, dem Javascript der Slideshow die Größenänderung der Bilder zu überlassen, damit in der vorgegebenen Box das komplette Bild angezeigt werden kann.

Bei diesem Effekt und besonders der Anzeige von Bildern in unterschiedlichen Formaten wird trotz eingeschalteter 'Bildgrößenänderung' nur ein Ausschnitt angezeigt. Bisher ist hier keine Lösung bekannt. In diesem Fall solltet ihr auf die Ausgabe von Bildern in dem gleichen Format achten.

Anzeigedauer
Der Zeitraum in Millisekunden, in dem das Bild angezeigt wird. Hier nur einen Zahlenwert angeben.

Dauer des Überganges
Der Zeitraum in Millisekunden für die Dauer des Überganges. Hier nur einen Zahlenwert eingeben.

Effekt

Schwenken in %
Nur wirksam für die Effekte 'Schwenken' und 'Combo - Ken Burns Effekt'
Der Bereich in % der Bildfläche innerhalb dem geschwenkt werden soll

Zoom in %
Nur wirksam für die Effekte 'Zoom' und 'Combo - Ken Burns Effekt'
Der Bereich in % der Bildfläche innerhalb dem gezoomt werden soll

Art des Effektes für Pushing/Wiping
mootools basierte Effekte welche zusätzlich die Effekte 'Pushing' und 'Wiping' ändern, einfach ausprobieren


Das Modul generiert je nach vorgenommenen Einstellungen individuelle CSS Styles, die in den HEAD der angezeigten Seite geschrieben werden. Zur Unterscheidung des CSS mehrerer Module auf einer Seite mit unterschiedlichen Einstellungen, wird die ID des jeweiligen Moduls für die Benennung der CSS Klassen verwendet. Diese ID findet ihr im Joomla! Backend (Erweiterungen->Module->Site). So können die Einstellungen eines Moduls nicht die Darstellung anderer Module beeinflussen.

Das so aufgebaute CSS für jede Modulinstanz wird im folgenden als dynamisches CSS bezeichnet.

Dynamisches CSS 1 Dynamisches CSS 2

Erklärung der dynamisch generierten CSS-Klassen (xx= ID des Moduls):

Einstellungen für alle Modulinstanzen könnt ihr in der Datei '/modules/mod_joomimg/assets/mod_joomimg.css' vornehmen. Dort könnt ihr natürlich auch die oben dynamisch erzeugten CSS Klassen um zusätzliche Styles erweitern. Bedenkt aber bitte, dass bei einem Update auf eine neue Version diese Datei überschrieben wird.


Damit sind wir am Ende dieser kleinen Dokumentation. Wenn bei euch noch Fragen auftreten, meldet euch bitte im Forum. Verbesserungvorschläge für diesen Text oder das Modul selbst nehmen wir dort auch sehr gern entgegen

Danke und viel Spaß mit dem Modul JoomImages
JoomGallery Team