Hallo und herzlich willkommen zu diesem Tutorial, welches erklärt, wie ihr in Joomla 2.5 in einem Beitrag euren kleinen Vorschau-Bildern ein Bild-Popup in einer schicken „Lightbox“ hinzufügt! Ich zeige euch hier zunächst die unbearbeitete Darstellung eines Beitrags ohne Bilder! Hierzu gilt wieder einmal als erstes zu sagen, dass bei dieser Vorgehensweise 100%ig valider Code entsteht und alle bekannten Browser bei der Darstellung jeweils das exakt gleiche Abbild liefern.
Zunächst müsst ihr den JCE-Editor im Joomla-Administrator-Bereich bekanntermaßen über „Erweiterungen — Erweiterungen“ installieren, da im Standard-Joomla-Editor weder die benötigten Buttons noch die dazu gehörigen Menüs erscheinen. Den JCE-Editor findet ihr auf der Webseite von Joomlacontenteditor.net. In der Video-Beschreibung findet ihr den Link zum Anklicken:
http://www.joomlacontenteditor.net/downloads/editor/joomla-25
Als nächstes installiert ihr das Plugin „JCE-Mediabox“! Dieses findet ihr ebenfalls auf der Webseite von Joomlacontenteditor.net. In der Video-Beschreibung findet ihr den Link zum Anklicken:
http://www.joomlacontenteditor.net/downloads/mediabox/joomla-25
Vergesst bitte nicht, dass ihr das Plugin noch aktivieren müsst! Fast alle Plugins sind nach der Installation erst einmal deaktiviert und tragen damit sehr oft zur ersten Verwirrung bei der dadurch bedingten nicht oder fehlerhaft funktionierenden Einrichtung bei! Falls ihr Probleme beim Auffinden des Plugins haben solllt, gebt einfach „jce“ in das Filterfeld ein. Hier findet ihr dann auch den „Editor — JCE“ und könnt erkennen, dass das Plugin „JCE-Mediabox“ als „System – JCE Mediabox“ erscheint.
Somit ist die Vorarbeit erledigt. Sehen wir uns jetzt zunächst einmal den JCE-Editor an. Dazu müsst ihr im Joomla-Administrator-Bereich unter „Benutzer — Benutzer“ den gewünschten Benutzer auswählen. In der Regel seid ihr das natürlich selbst oder eben euer Publisher! Hier wählt ihr rechts unter „Basiseinstellungen im Dropdownmenü bei „Editor“ den neuen „Editor — JCE“ aus und speichert das Profil ab!
Jetzt geht es endlich an die eigentliche Bearbeitung des Beitrags, in welchen wir nun ein Bild mit Bild-Popup in einer „Lightbox“ hinzufügen. Ihr öffnet den gewünschten Beitrag im Joomla-Administrator-Bereich und erkennt als erstes den neuen JCE-Editor. Die verschiedenen Standard-Belegungen sind natürlich identisch mit fast allen anderen CMS-Editoren, jedoch gibt es hier eben auch viele nützliche Details, welche ich wohl auch noch in diversen weiteren Tutorials erläutern werde.
Im Idealfall liegen eure beiden Bilder bereits im Medienmanager. Falls ihr euch wundert, warum hier von „beiden Bildern“ gesprochen wird, solltet ihr euch an dieser Stelle zunächst mein Tutorial „Bilder hoch laden über Medienmanager“ ansehen. In der Video-Beschreibung findet ihr den Link zum Anklicken:
https://www.youtube.com/watch?v=xWCsWXKzpRs
Zunächst setzt ihr den Cursor an die gewünschte Position und klickt auf den Button „Bild“ direkt unterhalb des Beitrags! Hier wählt ihr das kleine Beitragsbild aus und klickt oben rechts auf „Einfügen“. Wie ihr dieses Bild besser positionieren und optimieren könnt findet ihr in meinem Tutorial „Beitrag mit Bildern im Fließtext ausrichten“! In der Video-Beschreibung findet ihr den Link zum Anklicken:
https://www.youtube.com/watch?v=Rqb06C4agX8
Jetzt ergänzen wir das große Popup-Bild indem wir das Bild im Beitrag einmal anklicken und im JCE-Editor den Button „Insert/Edit Link“ anklicken. Hier klickt ihr zunächst auf den Button „Browse“ rechts vom Eingabefeld „URL“! Denkt bitte daran, dass ihr jetzt das große Popup-Bild auswählen müsst! Durch einen Klick auf „Insert“ übernehmt ihr diese Bild-URL! Anschließend wählt ihr den Reiter „Popups“ aus und im Dropdownmenü „Popup Type“ das „JCE Mediabox Popup“! Unter „Title“ könnt ihr einen Bild-Titel eingeben, sowie unter „Caption“ eine Bild-Beschreibung! Zuletzt klickt ihr unten auf „Insert“ und speichert anschließend den Beitrag ab!
Nachdem ihr im Frontend den Beitrag aktualisiert habt seht ihr nun euer fertig eingebundenes Bild mit Bild-Popup in einer schicken „Lightbox“! Hier fällt allerdings ein kleiner Schönheitsfehler auf. Wo ist die Bild-Beschreibung? Diese ist natürlich keineswegs verschwunden. Die Entwickler haben bei den CSS-Angaben lediglich etwas gespart. Infolgedessen greift die Beschreibung auf die Body-Color zu. Diese ist in meinem Layout mit der Farbe weiß, wie eben auch der Hintergrund der Lightbox, belegt. Dies seht ihr sobald ihr den Titel markiert und mit der Maus weiter nach unten zieht! Es bleibt nun euch selbst überlassen, ob ihr eure Body-Color im Bedarfsfall anpasst oder direkt eine eigene CSS-Klasse für diesen Tag erstellt.Zweiteres erfordert allerdings etwas Programmieraufwand, da in den Plugincode natürlich eine CSS-Klasse eingefügt werden muss! Falls ihr keine Overrides einsetzen möchtet ist eure Anpassung beim nächsten Plugin-Update natürlich wieder weg!
Wenn ihr euch unter dem Reiter „Popups“ das Dropdownmenü „Media Type“ anseht, könnt ihr erkennen, dass hier nicht nur Bilder in das Popup-Fenster eingebunden werden können. Wählt ihr beispielsweise „Youtube Video“ aus und ersetzt unter dem Reiter „Link“ die Bild-URL durch die gewünschte Youtube-URL seht ihr im Popup zu dem Bild jetzt ein Youtube-Video. Da diese Einbindung prinzipiell ein einfacher Hyperlink ist könnt ihr diesen natürlich statt auf ein Beitragsbild auch auf ein Wort oder einen Satz legen. Ein mögliches Beispiel wäre zur Darstellung eines Youtube-Videos der Satz: Hier geht es zum Video!
Ich hoffe, dass dieses Tutorial verständlich war und freue mich darauf euch beim nächsten Tutorial wieder begrüßen zu können.
Neueste Kommentare