Sprungmarken

Servicenavigation

Hauptnavigation

Sie sind hier:

Hauptinhalt

Bildergalerien mit dem TinyMCE-Editor einfügen

Inhalt

Auf dieser Seite erfahren Sie, wie Sie eine Bildergalerie in Fiona-Inhaltsfelder einfügen können. Unten auf dieser Seite finden Sie eine Beispiel-Bildergalerie zum Ausprobieren.

Kurzüberblick

  • Die Bilder für die Bildergalerie müssen jeweils in zwei Größen vorliegen: Ein kleines Vorschaubild und das eigentliche, große Bild.
  • Die Bilder werden nicht in Fiona hochgeladen, sondern auf Ihren Webserver, z.B. über FTP.
  • Nachdem die Bilder in zwei Größen auf dem Webserver abgespeichert worden sind, kann in Fiona in Inhaltsfeldern eine Bildergalerie im Editor angelegt werden.

Bildergalerie vorbereiten

Bevor eine Bildergalerie eingefügt werden kann, müssen die Bilder in zwei Größen vorliegen:

  • Vorschaubild: wird auf der Webseite angezeigt und lässt sich anklicken, um großes Bild anzuzeigen
  • eigentliches, großes Bild: Dieses Bild wird erst angezeigt, nachdem der Besucher ein Vorschaubild angeklickt hat, um die Galerie zu öffnen

Hier finden Sie Hinweise zu geeigneten Bildgrößen.

Die Vorschaubilder werden immer geladen. Das große Bild wird erst geladen, wenn es tatsächlich angezeigt werden soll.

Liegen die Bilder in zwei Größen vor, müssen beide Versionen der Bilder auf Ihren Webserver hochgeladen werden, z.B. per FTP. Laden Sie die Bilder nicht in Fiona hoch. Der Fiona-Webadmin kann auf dem Server außerhalb von Fiona ein Verzeichnis für Galeriebilder anlegen und Zugänge für Redakteure bereitstellen. Bei Fragen dazu wenden Sie sich an Ihren Fiona-Webadmin.

Sie benötigen zum Einfügen eines Bildes zwei absolute HTTP(S)-URLs, die je auf das Vorschaubild und das große Bild verweisen, z.B.:

URL für das Vorschaubild:

https://www.webauftritt.tu-dortmund.de/galeriebilder/vorschau/1.jpg
URL für das große Bild:

https://www.webauftritt.tu-dortmund.de/galeriebilder/gross/1.jpg

Hinweise: 

  • Wenn Ihr Webauftritt über HTTPS ausgeliefert werden soll, verwenden Sie für die Bilder HTTPS-URLs, um Mixed-Content-Fehler zu vermeiden.
  • Beim Verwenden von HTTP-Links kann Ihr Browser für das Editor-Fenster eine Mixed-Content-Warnung anzeigen ("Unsicherer Inhalt"), da HTTP-Ressourcen im Kontext einer HTTPS-Seite verwendet werden.

Bildergalerie einfügen

Um eine Bildergalerie im Editor einzufügen, ist zunächst der Menüpunkt "Einfügen - Galerie einfügen" auszuwählen.

Es öffnet sich folgendes Pop-Up-Fenster:

Bildergalerie einfügen - Screenshot

Um ein Bild in die Galerie einzufügen, müssen die oben genannten URLs, die je auf das Vorschaubild und das große Bild verweisen, in das Textfeld eingegeben werden. Pro Zeile des Textfeldes darf nur eine URL eingetragen werden.

  • In der ersten Zeile des Textfeldes wird die URL für das Vorschaubild erwartet.
  • In der zweiten Zeile des Textfeldes wird die URL für das große Bild erwartet.
  • In der dritten Zeile wird die Bildbeschreibung als Text eingegeben.
  • In der vierten Zeile kann optional eine erweiterte Bildbeschreibung eingegeben werden. Falls keine erweiterte Bildbeschreibung erforderlich ist, kann diese Zeile übersprungen werden.

Bildelemente eintragen - Screenshot

Der Inhalt des Textfeldes stellt den Inhalt der Bildergalerie in Textform dar. Um weitere Bilder in die Bildergalerie einzufügen, kann in der nächsten freien Zeile wieder eine URL für ein Vorschaubild eingefügt werden, danach eine URL für ein großes Bild usw.

Beim Klicken auf die Schaltfläche "Ok" geschieht folgendes:

Die Vorschaubilder der von Ihnen eingetragenen Bildelemente werden im Editor in einem speziellen Container mit hellgrüner Hintergrundfarbe angezeigt. Alle in diesem Container befindlichen Bilder gehören zu einer Bildergalerie. Eine Webseite kann beliebig viele dieser Container enthalten, demnach auch beliebig viele Bildergalerien.

Galerievorschau im Editor - Screenshot

Wichtige Hinweise zur Darstellung im Editor

Die Ansicht im Editor entspricht nicht der Galeriedarstellung auf der fertigen Webseite, sondern dient lediglich Vorschauzwecken.

Editieren Sie den Inhalt des grünen TU-Galerie-Containers nicht manuell, fügen Sie insbesondere keine zusätzlichen Texte oder andere Elemente in diesen Container ein. Dies führt dazu, dass die Galerie auf der Webseite nicht wie gewünscht dargestellt wird.

Wenn Sie den TU-Galerie-Container im Editor ausgewählt haben, können Sie "Enter"  bzw. "Return" auf der Tastatur drücken, um Inhalt unter dem Container einzufügen.

Hinweise zu langen Bildbeschreibungen

Lange Bildbeschreibungen, die im Textfeld über mehrere Zeilen weg angezeigt werden, können problemlos eingefügt werden. Es darf allerdings keinen Zeilenumbruch in einer Bildbeschreibung geben.

Bildergalerie bearbeiten

Um eine eingefügte Bildergalerie zu bearbeiten, wählen Sie im Editor ein Vorschaubild der Galerie oder den TU-Galerie-Container aus und wählen den Menüpunkt "Einfügen - Galerie bearbeiten".

Im Textfeld wird der Inhalt Ihrer Bildergalerie wieder in Textform dargestellt. Es können nun beliebige Änderungen vorgenommen werden.

Der Galerietyp kann ebenfalls geändert werden.

Durch bestätigen mit "Ok" werden die Änderungen übernommen. Mit "Abbrechen" können Sie die Änderungen verwerfen.

Bildergalerie löschen

Um eine Bildergalerie zu löschen, bearbeiten Sie diese und leeren das Textfeld vollständig. Bestätigen Sie dann mit "Ok".

Geeignete Bildergrößen

Es ist wichtig, Bilder mit geeigneten Bildgrößen zu verwenden, damit die Webseite, auf der die Bildergalerie eingebunden ist, schnell geladen werden kann und nicht unnötig hohe Datenmengen übertragen werden müssen (insbesondere wichtig für Handy-Nutzer mit mobilem Internet).

  • Die Vorschaubilder sollten querformatig etwa mit 240 x 160 Pixeln  und hochformatig etwa mit 160 x 240 Pixeln aufgelöst sein und eine durchschnittliche Dateigröße von 15 kB nicht überschreiten.
  • Die Vorschaubilder sollten alle gleich hoch sein, um die Darstellung der Galerie zu optimieren.
  • Die großen Bilder sollten querformatig in der Regel Auflösungen von etwa 1200 x 800 Pixeln und hochformatig Auflösungen von etwa 800 x 1200 Pixeln haben sowie eine durchschnittliche Dateigröße von etwa 300 kB nicht überschreiten.
    • Falls diese Abmessungen für den gewünschten Anwendungsfall nicht ausreichen (z.B. Darstellung sehr detailreiche Bilder), können größere Bilder erwogen werden. Bildgrößen von 1 MB sollten aber nur in Ausnahmen überschritten werden.
    • Für Slider sollten die Bilder ebenfalls so groß gewählt werden.

Abmessungen von Bildern können Sie mit vielen frei verfügbaren Tools ändern. Bei JPEG-komprimierten Bildern lässt sich zudem die gewünschte Bildqualität einstellen. Eine subjektiv geringfügig schlechtere Bildqualität kann die Dateigröße des Bildes bereits deutlich reduzieren.

Darstellung von Bildergalerien

Bilder in Bildergalerien werden auf der exportierten Webseite automatisch in der eingetragenen Reihenfolge angezeigt. Insbesondere bei Vorschaubildern mit verschiedenen Abmessungen werden einige Vorschaubilder größer als andere angezeigt. Dies lässt sich nicht beeinflussen. Die Darstellung ist zudem abhängig von der Bildschirmbreite.

Galerie-Typen

Der Galerie-Typ beeinflusst die Darstellung der Galerie auf der Webseite. Derzeit sind folgende Galerie-Typen wählbar:

  • Bildschirmfüllend
    Beim Klick auf ein Galerie-Vorschaubild wird die große Version des Bildes vor einem schwarzen Hintergrund angezeigt, der die übrige Webseite überdeckt.
  • Kompakt
    Beim Klick auf ein Galerie-Vorschaubild wird die große Version des Bildes in einem Pop-Up so angezeigt, dass die übrige Webseite im Hintergrund noch sichtbar ist. Außerdem werden die Bildbeschreibungen unter dem Bild angezeigt.
    Auf mobilen Geräten wie Handys wird die große Version des Bildes auch in der kompakten Ansicht  in der Regel bildschirmfüllend dargestellt.
  • Slider
    Die Galerie wird als Slider dargestellt. Der Galerie-Typ "Slider" bietet zusätzliche Einstellungsmöglichkeiten, aufrufbar über die Schaltfläche "Weitere Optionen":
    • Slider-Höhe/Slider-Breite: Gibt die maximalen Abmessungen des Sliders in Pixel auf der Webseite an.
    • Slider-Geschwindigkeit: Gibt die Zeit an, wie lange ein Bild angezeigt wird, bis zum nächsten weitergeschaltet wird.
    • Autoplay: Gibt an, ob die Galerie-Bilder automatisch weitergeschaltet werden.

Die Galerietypen "Bildschirmfüllend" und "Kompakt" unterscheiden sich nicht in ihrer Darstellung der Galerie auf der Webseite, sondern in der Darstellung der Detailansicht der Bilder.

Beispiel-Bildergalerien

Galerie-Typ "Bildschirmfüllend"

Mensa Campus NordInformatikgebäude OH12SeminarraumgebäudeSymbolfoto WissenschaftSymbolfoto BibliothekSymbolfoto WissenschaftDortmunder USpektralringeCampus NordSymbolfoto WissenschaftSymbolfoto WissenschaftSymbolfoto Kunst

Galerie-Typ "Kompakt"

Mensa Campus NordInformatikgebäude OH12SeminarraumgebäudeSymbolfoto WissenschaftSymbolfoto BibliothekSymbolfoto WissenschaftDortmunder USpektralringeCampus NordSymbolfoto WissenschaftSymbolfoto WissenschaftSymbolfoto Kunst

Galerie-Typ "Slider"

Mensa Campus NordInformatikgebäude OH12SeminarraumgebäudeSymbolfoto WissenschaftSymbolfoto BibliothekSymbolfoto WissenschaftDortmunder USpektralringeCampus NordSymbolfoto WissenschaftSymbolfoto WissenschaftSymbolfoto Kunst