Allgemeines zum Einfügen von Bildern in Joomla

Der Joomla Content Editor (JCE) verfügt über eine interne Speicherungs- und Verwaltungsmöglichkeit für Bilder. Über das Bild-Icon gelangt Ihr dort hin.

Im Bilder-Manager können direkt Bilder hochgeladen, umbenannt oder gelöscht werden. Falls nötig können dort auch Unter-Ordner angelegt werden. Ein Klick auf ein hochgeladenes Bild zeigt dieses in einer Vorschau an und verlinkt automatisch auf den richtigen Bild-Pfad.

Folgendes bitte Beim Upload und Einbinden der Bilder beachten:

• Falls die Bilder in Originalgröße im Artikel angezeigt werden sollen, bitte nicht die 720px Breite übersteigen, weil sonst das Pagelayout (z.B. auf der Frontseite) dadurch zerbrochen wird.
• Screenshots und generell sehr große Bilder, die das Layout sprengen würden, bitte als maximal 200px breites Minibild einfügen (im Bildermanager von Hand "runterdrehen") und anschließend das Bild im Artikel mittels Ketten-Icon verlinken. Mehr dazu im folgenden Kapitel.

Bilder mit Tooltip und Effekten in einen Beitrag einfügen

Bilder lassen sich, dank einer Erweiterung für den Joomla Content Editor (JCE) mit einer sog. Lightbox ausstatten und so besonders gut inszenieren. Es gibt zwei neue Funktionen, um Bilder und Links in Szene zu setzen.

• Der Tooltip wird unterhalb der Maus angezeigt und bietet bereits Informationen bevor etwas angeklickt wurde. 

• Die Lightbox - Nach einem Mausklick öffnet sich ein Bild (muss nicht dasselbe Bild sein) und bietet weitere Infos. Der Rest des Bildschirms wird für die Betrachtung sanft ausgeblendet.

Und so geht's:

1. Tooltip einblenden

• Um einen Tooltip einzublenden, öffnet man mit dem Button den Bild-Dialog im Editor.  Hier kann man auch neue Bilder einstellen, sofern diese noch nicht ins System übertragen wurden.

• Im Feld Titel ist die Beschreibung zu hinterlegen, die dann beim Mouseover angezeigt werden soll.
• In der Karteikarte Erweitert muss in der Klassen-Liste JCE_Tooltip ausgewählt werden.
• Nach dem speichern des Artikels wird der Tooltip als Box unter dem Mauszeiger angezeigt.

2. Lightbox-Effekt hinzufügen

• Als Vorbereitung sollte die Link-URL zum großen Bild bereits via STRG+C in die Zwischenablage kopiert worden sein. Das Bild mit kleinen Maßen (z.B. 200px breiter Thumbnail) sollte in eurem Artikel bereits eingefügt sein.
• Klickt das zu verlinkende Element (z.B. das kleine Bild oder einen Textlink) an
• Öffnet den Verlinkungs-Dialog über das Ketten-Icon
• Traget Im Feld URL die Adresse des großen Bildes ein (STRG+V)
• Tragt im Feld Title die Beschreibung ein, die beim groß aufgeklappten Bild stehen soll.
• Wählt als Klasse (class) jcebox aus
• Speichert den Beitrag ab. Beim Klick auf das Bild sollte nun eine Lightbox mit der Beschreibung geöffnet werden. Achtung: Das Funktioniert wirklich nur auf der Seite selbst und nicht in der Editor-Vorschau.