3.6 Bilder einbinden 

Sie haben sicherlich schon einen Blick auf die untere Hälfte der Bearbeitungsseite geworfen und sich davon überzeugt, dass man natürlich auch Bilder in den Artikel einbinden kann. Joomla! bietet Ihnen dafür sogar zwei Wege an.

3.6.1 Über die Symbolleiste 

Zum einen gibt es das Icon Bild einfügen in der Symbolleiste. Diese Funktion fügt im Hintergrund ein ganz normales <img>-Tag ein, dessen Parameter Sie über den Dialog aus Abbildung 3.10 im Register General bestimmen können.

Am wichtigsten ist die Angabe des Pfades zu der Bilddatei. Leider ist es ein wenig umständlich und darüber hinaus fehleranfällig, den richtigen Pfad eigenständig in das dafür vorgesehene Feld einzutippen. Das in Abbildung 3.11 gezeigte Beispiel können Sie selbst ausprobieren, da das Bild coffee.jpg bei der Joomla!-Installation mitgeliefert wird. Sie können aber auch eigene Dateien in die Ordner kopieren und mit der entsprechenden Pfadangabe hochladen.

Über den Reiter Appearance werden die Bildparameter wie z.  B. Ausrichtung, Rahmen und Größe festgelegt, die sich ebenfalls an die HTML-Markups anlehnen.

Wie der Name schon sagt, können Sie im Register Advanced einige fortgeschrittene Techniken des Webdesigns nutzen, die nicht mehr zum Standardrepertoire von HTML zählen. Dazu gehören z.  B. Bildwechsel bei Mausereignissen oder die Vergabe einer ID.

Nachdem Sie Ihre gewünschten Einstellungen vorgenommen haben, setzen Sie mit dem Button Insert Ihre Einstellungen um und fügen das Bild ein oder brechen den Dialog mit Cancel unverrichteter Dinge ab.

Den Vorteil dieser Methode der Bildintegration sehen Sie sofort, denn im Gegensatz zum im Folgenden beschriebenen Weg ist das Bild auch im Bearbeitungsmodus sichtbar.

3.6.2 Über das Register Bilder 

Nun kommen wir zu der zweiten, etwas komfortableren Art, ein Bild einzubinden. Dafür werden wir das oberste Register Bilder des Registerstapels im unteren Bereich der Bearbeitungsseite zu Hilfe nehmen.

Damit Sie im Bearbeitungsmodus des Frontends auf das Bild zugreifen können, müssen Sie es zuvor über den Media Manager im Backend hochgeladen haben (Abschnitt 6.3, Eigene Bilder einbinden). Das linke Listenfeld Galerie – Bilder (Abbildung 3.12), das Sie im Frontend vor sich sehen, zeigt die Bilder aus dem Standard-Bildordner images/stories an. Dies sind die Grafiken, die Sie einbinden können. Sie haben aber auch die Möglichkeit, in ein Unterverzeichnis zu wechseln und die dortigen Grafikdateien anzeigen zu lassen.

Fügen Sie die Bilder, die Sie in den aktuellen Artikel einfügen möchten, mit der oberen Pfeiltaste oder der Schaltfläche Einfügen in die rechte Liste Inhalt – Bilder ein. Damit legen Sie fest, in welcher Reihenfolge die Bilder im Text angezeigt werden. Mittels Hinauf und Hinunter können Sie diese neu ordnen. In der Liste Bild bearbeiten besteht die Möglichkeit, Eigenschaften wie die Ausrichtung, den Rahmen oder die Bildunterschrift zu konfigurieren.

Um die Grafiken nun tatsächlich im Text unterzubringen, bewegen Sie den Cursor im Textfeld an die Stelle, an der ein Bild eingefügt werden soll, und klicken auf folgenden Button:

Hier klicken, um das Bild zu vergrößern

Es wird nun der Platzhalter {mosimage} eingefügt. Alternativ können Sie diese Variable auch per Hand in das Textfeld eingeben. Damit haben Sie das erste Bild aus Ihrer Liste Inhalt – Bilder eingebunden. Entsprechend der Anzahl der restlichen Bilder sollten Sie nun weitere Platzhalter einfügen.