7.2    Bilder und andere Medien einfügen 

Ohne Illustrationen ist ein Beitrag, selbst nach ansprechender Formatierung, eine langweilige Textwüste. In diesem Abschnitt lernen Sie Mittel kennen, multimediale Elemente einzubinden, um Ihre Texte optisch aufzulockern.

7.2.1    Einleitungs- und Komplettes Beitragsbild einfügen 

Joomla! ermöglicht die Verwaltung von Bildern in einem internen Medienmanager, die dem Inhalt eines Serververzeichnisses entspricht (/images/). Bilder lassen sich so per FTP, aber auch durch das Administrations-Backend hochladen. Da das Reiseforum eine große Anzahl von Fotos präsentiert, empfiehlt es sich, von Anfang an mit Unterordnern zu arbeiten, um die Bilder schon beim Upload sinnvoll zuzuordnen.

1. Wechseln Sie über das Menü Inhalt • Medien in den Medienmanager (siehe Abbildung 7.16).

   

   Abbildung 7.16    Der Medienmanager gleicht einem Dateimanager-Fenster – links die Verzeichnisse, rechts die Inhalte.

2. Klicken Sie in der Buttonleiste oben auf Neues Verzeichnis erstellen.

3. Nun schiebt sich ein Texteingabefeld zwischen Buttonleiste und Dateiliste. Für das Reiseforum möchten Sie Bilder der vorgestellten Urlaubsziele hochladen. Geben Sie in das Textfeld »urlaubsziele« ein, und klicken Sie auf Verzeichnis erstellen (siehe Abbildung 7.16).

4. Der neue Ordner erscheint sowohl links in der Baumansicht der Verzeichnisse als auch rechts in der Detailansicht.

Zum Hochladen der Bilder wechseln Sie entweder in den eigentlichen Medienmanager (Menü Inhalt • Medien) oder zum Beitrag, in dem sie erscheinen sollen.

1. Bearbeiten Sie den Beitrag, indem Sie in der Beitragsliste auf seinen Namen klicken, und wechseln Sie zum Reiter Bilder und Links.

2. Klicken Sie neben Einleitungsbild auf Auswählen, öffnet sich ein Popup-Fenster, in dem alle Bilder, die sich in der Joomla!-Medienbibliothek befinden, galerieartig präsentiert werden. Bis jetzt sieht man da nur Beispielabbildungen und Joomla!-Logos und den eben erstellten Unterordner urlaubsziele.

3. Wechseln Sie mit einem einfachen Mausklick in den Unterordner urlaubsziele.

   

   Abbildung 7.18    Wechseln Sie schon vor dem Hochladen des Bildes ins richtige Verzeichnis – das Umsortieren falsch hochgeladener Bilder ist nur per Dateibrowser bzw. FTP-Client möglich.

4. Klicken Sie im Popup-Fenster unten bei Datei hochladen auf den Button Dateien auswählen.

5. Im Dateidialog wählen Sie ein auf Ihrer Festplatte gespeichertes Foto aus. Beginnen Sie den Upload über den Button Hochladen starten.

6. Jetzt ist das Bild Bestandteil der Joomla!-Galerie auf dem Server; markieren Sie es, und klicken Sie dann auf die Schaltfläche Einfügen (siehe Abbildung 7.18). Das Popup schließt sich, der Bildname erscheint im Textfeld neben Einleitungsbild.

7. Geben Sie nun noch einen passenden Text in die Felder Alternativer Text und Bildunterschrift ein (siehe Abbildung 7.19). Das erste Feld steht für das berühmte HTML-alt-Attribut; dieser Text erscheint bei einigen Browsern, wenn man mit der Maus über das Bild fährt. Wichtiger aber: Es beschreibt das Bild für Besucher mit Sehschwächen und Suchmaschinen.

8. Verfahren Sie genauso mit dem Bild für Komplettes Beitragsbild darunter: Auswählen • Dateien auswählen • Hochladen starten. Dann das Bild markieren und auf Einfügen klicken. Und natürlich den Alternativen Text und (optional) die Bildunterschrift nicht vergessen.

   

   Abbildung 7.19    Die Angabe eines »Alternativen Textes« für jedes Bild gehört zum guten Stil – ein Muss für Suchmaschinen und Besucher mit Seheinschränkungen.

9. Klicken Sie im Beitragsformular auf Speichern, und bewundern Sie das Ergebnis im Frontend-Browsertab (siehe Abbildung 7.20).

   

   Abbildung 7.20    Das Einleitungsbild erscheint über dem Teaser auf der Homepage; auf der »Weiterlesen«-Beitragsseite wird es durch das Beitragsbild abgelöst, das ebenfalls zwischen Überschrift und Fließtext erscheint.

7.2.2    Beitragsbild einfügen 

Flexibler ist der Einsatz von Beitragsbildern innerhalb des Fließtextes, da Sie hier vor allem mehr Optionen bei der Positionierung und Größe haben. Darum ist diese Art der Bildintegration in der Regel zu bevorzugen.

1. Bearbeiten Sie den Beitrag, indem Sie in der Beitragsliste auf seinen Namen klicken, und klicken Sie unter dem Editorfenster auf den Button Bild. Wichtig: Verwenden Sie nicht den Button in der TinyMCE-Buttonleiste, hier stehen weniger Optionen zur Verfügung.

2. Jetzt öffnet sich wieder das große Popup-Fenster, das Sie so ähnlich vom Einleitungs- bzw. Kompletten Beitragsbild kennen. Wechseln Sie wieder in den Unterordner urlaubsziele.

3. Wählen Sie ein bereits hochgeladenes Bild, oder scrollen Sie ganz nach unten, um zu den Bedienelementen für den Bilder-Upload zu gelangen. In diesem Fall klicken Sie auf Dateien auswählen, wählen das Bild von Ihrer Festplatte und bestätigen den Upload über den Button Hochladen starten.

4. Füllen Sie jetzt noch die Textfelder aus:

   • Beschreibung: Dieser Text erscheint im alt-Attribut des Bildes und ist für Menschen mit Sehschwächen und Suchmaschinen gedacht, um den Bildinhalt textlich zu beschreiben.

   • Bildtitel: Text für das title-Attribut, der beim Fahren mit der Maus über das Bild erscheint

   • Bildbeschriftung: HTML5-konforme Bildunterschrift (<figcation>-Tag)

     SEO-Tipp: Bildeinbindung mit Bildbeschriftung

     Lassen Sie das Feld Bildbeschriftung leer, setzt der Editor das Bild in ein <p>-Tag. Das ist zwar HTML-konform, es geht aber besser: Füllen Sie die Bildbeschriftung aus, wickelt der Editor Bild und Text in das semantische HTML5-<figure>-Tag, das speziell der Auszeichnung von Illustrationen dient. Die Bildbeschriftung erscheint dabei in einem <figcaption>-Tag – HTML5-konform und suchmaschinenoptimiert.

5. Die übrigen Felder ignorieren Sie zu diesem Zeitpunkt. Klicken Sie auf Einfügen, um das Bild schließlich in den Beitrag einzubinden.

Abbildung 7.22    Extrem große Bilder stutzen Sie nach dem Einfügen mit der Maus durch Ziehen der Bildecken zurecht.

Falls Sie im Editorfenster jetzt nur noch das Bild oder einen Ausschnitt des Bildes sehen, dann müssen Sie noch mal an die Bildeigenschaften ran, um seine Größe anzupassen (siehe Abbildung 7.22).

1. Klicken Sie das Bild an, dessen Eigenschaften verändert werden. Markiert ist es, wenn Sie an den Ecken und in der Mitte der Kanten kleine weiße Quadrate sehen.

2. Mit der Maus ziehen Sie auf die weißen Quadrate in irgendeine Richtung, um die Bildgröße zu verändern. Das ist allerdings sehr ungenau. Klicken Sie deshalb besser auf das Icon Bild einfügen/bearbeiten (). Achtung: Sie verändern hier nur die dargestellte Größe des Bildes. Der Editor nimmt keine echte Verkleinerung (Herunterskalierung) vor, sondern teilt dem Browser lediglich mit, das Bild kleiner anzuzeigen (siehe Abbildung 7.23).

   

   Abbildung 7.23    Bearbeiten Sie die exakte Größe eines Bildes über den Button »Bild einfügen/bearbeiten« und Eingabe der Breite in Pixeln.

3. In dem kleinen, sich öffnenden Popup-Fenster sind nun einige Bildeigenschaften einstellbar:

   • Quelle: Die URL des Bildes. Den Einsatz des Joomla!-internen Medienmanagers erkennen Sie, falls der Link mit »images« beginnt. An diese Stelle können Sie aber auch jede beliebige andere Internetadresse eingeben. In HTML entspricht diese Eigenschaft dem src-Attribut des <img>-Tags.

   • Bildbeschreibung: das alt-Attribut des Bildes für Besucher mit Sehschwächen und Suchmaschinen

   • Abmessungen und Seitenverhältnis beibehalten: Geben Sie entweder eine Breite oder Höhe an, und lassen Sie das Häkchen gesetzt, damit der Browser die jeweils andere Abmessung automatisch angleicht.

   Um das Riesenfoto zu verkleinern, tragen Sie im Feld Abmessungen z. B. »340« ins erste Feld (Breite) ein, das ist genau die Hälfte der Gesamtbreite des Standardtemplates von Joomla!, und klicken Sie auf OK. Im Editorfenster erscheint das Bild jetzt deutlich kleiner.

   Info: Haben Sie zu Beginn dieses Kapitels den TinyMCE-Editor über Erweiterungen • Plugins • Editor - TinyMCE • Funktionalität auf Komplett gestellt, eröffnet sich Ihnen an dieser Stelle ein weiterer Reiter. Über Erweitert erhalten Sie weitere Einstellungsmöglichkeiten für das Beitragsbild:

   • Stil: In diesem Feld lassen sich CSS-Styles hinterlegen, die im <img>-Tag im style-Attribut landen.

   • Vertikaler Abstand: Pixelwert für den oberen und unteren Abstand zwischen Bild und umgebenden Elementen, z. B. Absätzen. Hinter den Kulissen fügt das Feld dem Bild, also dem <img>-Tag, CSS-Anweisungen für margin-top und margin-bottom hinzu. Das Ergebnis erscheint im Feld Stil.

   • Horizontaler Abstand: Analog zum vertikalen Abstand werden hier Ränder für margin-left (links) und margin-right (rechts) erzeugt. Der generierte Style landet im Feld Stil.

   • Rahmen: Pixelwert für einen einfachen Rahmen um das Bild (border-width-Style)

Wenn Sie ein bisschen mit den Bildeigenschaften experimentieren, kommen Sie schnell an die Grenzen der Formatierungsmöglichkeiten. Auf der einen Seite ist das gut, denn eine große Anzahl von Formatierungsoptionen lädt Autoren, deren Spezialität das Schreiben und nicht das Layouten ist, zu chaotischen Beitragsgestaltungen ein. Auf der anderen Seite sind die zur Verfügung gestellten Mittel begrenzt. Vertikale und horizontale Abstände werden z. B. nur auf das Bild, nicht aber auf die Bildunterschrift angewendet.

7.2.3    Videos einbinden 

Möchten Sie Videos auf Ihrer Website einbinden, nutzen Sie am besten eine öffentlich zugängliche und kostenlose Plattform wie YouTube oder Vimeo. Das hat gleich zwei Vorteile: Zum einen verbrauchen Sie keine Bandbreite Ihres Webhosting-Kontos; und das ist bei den großen Datenmengen, die bei Videos anfallen, nicht unerheblich. Zum anderen erzeugen Sie damit einen zweiten Marketingkanal, in dem Sie Ihr Video auch innerhalb der Videoplattform listen.

Videos bindet man für gewöhnlich über das <iframe>-Tag in andere Webseiten ein. Die Verwendung dieses Tags ist in den Voreinstellungen von Joomla! aber nicht erlaubt. Es ist demzufolge eine kleine Konfigurationsänderung am Editor erforderlich:

1. Wechseln Sie über das Menü Erweiterungen • Plugins zum Plugin-Manager.

2. Klicken Sie auf den Plugin-Namen Editor - TinyMCE.

3. Dies ist das Konfigurationsfenster des TinyMCE. Suchen Sie das Feld Verbotene Elemente, und entfernen Sie einfach das Wort iframe aus der kommaseparierten Liste.

4. Um die Möglichkeit zu erhalten, Videos in Beiträge einzufügen, muss außerdem das Feld Funktionalität auf Komplett stehen; nur dann erscheint im Editor der betreffende Button.

5. Speichern & Schliessen Sie die Konfiguration in der oberen Buttonleiste.

Jetzt fügen Sie das externe Video in den Beitrag ein:

1. Browsen Sie auf der YouTube- oder Vimeo-Website zu Ihrem Video, und klicken Sie darunter auf den Link Teilen, dann auf Einbetten (YouTube) bzw. auf das kleine Paperflieger-Icon (, Vimeo).

2. Den dargestellten Link, ein komplexes <iframe>-Tag, kopieren Sie in Ihre Zwischenablage.

3. Zurück ins Joomla!-Administrations-Backend: Bearbeiten Sie den Beitrag, der das Video enthalten soll, und setzen Sie den Cursor an die Stelle, wo das Video erscheinen wird.

4. Klicken Sie auf den Button Video einfügen/bearbeiten ().

5. Es erscheint das Popup Video einfügen/bearbeiten, wechseln Sie zum Reiter Einbetten.

6. Fügen Sie den YouTube/Vimeo-Link aus der Zwischenablage in das Textfeld (siehe Abbildung 7.25).

   

   Abbildung 7.25    Zwar lassen sich Videos auch über die Angabe »Quelle« im Reiter »Allgemein« einbauen, besser kopieren Sie aber den kompletten <iframe>-Link von YouTube oder Vimeo in den Reiter »Einbetten«.

7. Klicken Sie auf Ok, Speichern Sie den Beitrag, und prüfen Sie im Frontend das Ergebnis (siehe Abbildung 7.26).

   

   Abbildung 7.26    Erst nach Entfernung des HTML-Tags »iframe« aus der Liste verbotener Tags in der Editorkonfiguration erscheint das eingebundene Video im Editorfenster.

YouTube bietet noch einige Optionen für die Videodarstellung; diese werden als Parameter an die im src-Attribut angegebene URL gehängt, z. B. //www.youtube.com/embed/ZlFFwtcVu6Q?autoplay=1&modestbranding=1&theme=light.

Hier ein Auszug aus den wichtigsten Parametern, die vollständige Liste finden Sie unter https://developers.google.com/youtube/player_parameters (englischsprachige Seite).

Parameter	Funktion
autohide=0|1	Der Wert 1 versteckt die Bedienelemente des Players, nachdem der Player startete. 2 blendet den Fortschrittsbalken aus, während die übrigen Elemente sichtbar bleiben.
autoplay=0|1	1 startet das Video automatisch unmittelbar beim Laden der Webseite.
end=Sekunden	Das Video stoppt automatisch nach der angegebenen Anzahl von Sekunden.
fs=0|1	Steht für Full Screen – Vollbildmodus. 1 zeigt den Button zum Aktivieren des Vollbildmodus an, 0 versteckt ihn.
loop=0|1	Veranlasst den Player, das Video in einer endlosen Schleife zu spielen.
modestbranding=1	Entfernt das YouTube-Logo.
showinfo=0|1	0 versteckt den Videotitel, der normalerweise vor Start des Videos angezeigt wird.
start=Sekunden	Startet das Video ab der angegebenen Anzahl von Sekunden.
theme=dark|light	Die das Video umgebenden Bedienelemente erscheinen entweder dunkel (dark) oder hell (light) getönt.

Tabelle 7.2    Die wichtigsten Parameter des YouTube-Players