--- title: Gallery url: "https://www.toujou.de/service/elementbibliothek/media-elements/gallery/" date: 2019-01-11 modified: 2022-09-27 --- # Gallery 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Media Elements](https://www.toujou.de/service/elementbibliothek/media-elements/) 5. [Gallery](https://www.toujou.de/service/elementbibliothek/media-elements/gallery/) Gallery ======= Eine Galerie mit mehreren Bildern, zentriert auf der Seite. Item-ID: 05-003 [Beispielansicht](#c1007244) [Anleitung](#c1007245) [Verhalten](#c1007246) ![](https://www.toujou.de/_assets/processed/d9FUmrhWJl-4MN0CgpkCGKSw6xJChWclvRu2sfUfiPk/q:85/w:433/h:54/fn:Y3NtXzA1XzAwMy1HYWxsZXJ5XzIwMDBfMjUwXzA0MzU2MWMwODg:t/cb:ad13603e29a64e0a75f6fb093f8ad0672b43a7e0/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNV9NZWRpYV9FbGVtZW50c18yMDAwXzI1MC8wNV8wMDMtR2FsbGVyeV8yMDAwXzI1MC5wbmc) --- Beispielansicht ----------------- [ ![Das Bild zeigt ein stilisiertes Flugzeug, das in der Luft fliegt, umgeben von einem ruhigen, einheitlichen grünen Farbton.](https://www.toujou.de/_assets/processed/xqogzPL_61rrdwrp7iQliPANNxA7wYMrkmz6DkZL8UY/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfQWVyb3BsYW5lXzA4NjUzMjgwNjA:t/cb:0cfa965a0a01089b986d1d37d0ce23635161b6e9/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X0Flcm9wbGFuZS5wbmc) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_Aeroplane.png) [ ![Ein grauer Elefant und sein Kind stehen auf einem einfarbigen Hintergrund, der die Aufmerksamkeit auf sie lenkt.](https://www.toujou.de/_assets/processed/5WZS4woyTaJZZXsVWpzwYy6BX7g79MSWWrvf0D9sfYM/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfZWxlcGhhbnRfNDBlZDkzNjY3Zg:t/cb:3b8ba21a5efd78eb83f49852ae73455572e9c425/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2VsZXBoYW50LnBuZw) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_elephant.png) [ ![Zwei stilisierte Heißluftballons stehen nebeneinander, eine rot und eine grün gestreift, auf einem neutralen Hintergrund.](https://www.toujou.de/_assets/processed/j4hvk1KMvK1apNMQsoETQkYak3f6jJn9MxBpoIqaNIE/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfSG90QWlyQmFsb29uc184OWI2OTg4MzU1:t/cb:bd1ebc30b4baefaca8c1d1026e8cb0d7abe8a765/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X0hvdEFpckJhbG9vbnMucG5n) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_HotAirBaloons.png) [ ![Ein modernes Hotelgebäude mit einem großen Pool und grünen Rasenflächen umgeben von Bäumen und Liegen.](https://www.toujou.de/_assets/processed/3UWEaWI4TMUSjICjfDacNYwJfLhz2Dz6eAUNAo4h7-s/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfSG90ZWxfZjRjMmRjZDBhYw:t/cb:7a488ac50402c9a96474a2fd28c2fc9ac05270c3/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X0hvdGVsLnBuZw) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_Hotel.png) [ ![Das Hochhaus, das in sanften Rosa-Tönen gehalten ist, hebt sich durch seine klare Linienführung und den schlichten Hintergrund hervor.](https://www.toujou.de/_assets/processed/2ARwIMvz7NuVWjhi9avEEsUowJMbP0ic1OoxNCL6dyk/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfcGhvbmVib290aF85OTA0OWM5Mzhm:t/cb:25f3fa35cad280a63de1a086ce0f2f634f131a81/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3Bob25lYm9vdGgucG5n) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_phonebooth.png) [ ![Eine stilisierte Pyramide mit mehreren Treppen und einem kleinen Tempel auf der Spitze, umgeben von Bäumen.](https://www.toujou.de/_assets/processed/pM-XzSSsn8MrKAKqmSDQy4PbA9et5v8Y0psXL0fTFyI/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfdGVtcGxlLWlua2FfMmRhYzBlMWE0MQ:t/cb:3298c10ce12be039c349f332b54092ae35a4fd9f/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS1pbmthLnBuZw) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_temple-inka.png) [ ![Ein stilisierter Pagodenbau mit mehreren Ebenen und goldener Spitze, umgeben von einem kleinen Garten und Zäunen.](https://www.toujou.de/_assets/processed/zksPD8LZwVTTFFezX8aF7xux5TTqtfGbikEjb_4XliA/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfdGVtcGxlXzM4ODcyNjkzZGE:t/cb:6ef820cebb5d446970b97472c73df58d52c19967/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS5wbmc) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_temple.png) [ ![Ein fröhlicher Weihnachtsmann steht neben einem festlich geschmückten Weihnachtsbaum mit bunten Geschenken darunter.](https://www.toujou.de/_assets/processed/JkRCd2PuOgj3lm_K4lGzl2eX4B9KSsGt9LA63Hg5zpo/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfdG91am91X1htYXNfMGUxYWNhZWYwNg:t/cb:b4f4ba376d6367f206d03d5be49df919cc56e622/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RvdWpvdV9YbWFzLnBuZw) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_toujou_Xmas.png) [ ![Das Bild zeigt verschieden große beigefarbene Pakete auf einem ockerfarbigen Grund.](https://www.toujou.de/_assets/processed/mMQoMkbaIz56rAkbS4uYGYYEu7DFTkCx3IoI3BXaZJ8/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:292/h:180/fn:Y3NtXzY4OHgzODdfYm94ZXNfZDFjNDlkMWQ3ZQ:t/cb:df27c08ccddad7ae7227813e795b272cd8ec2bcd/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzLnBuZw) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_boxes.png) --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/UmDEc8wrWfmiB96_UcXxRZXkiISqqeard3WDHCWQRB4/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwMi0xLWJpbGRlcl9hbmxlZ2VuXzMxYTQ5MWVjZWU:t/cb:6775fa22a527ea635a6ca2b6aa0eb736073b17de/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDAzX2dhbGxlcnkvMDUtMDAyLTEtYmlsZGVyX2FubGVnZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-003_gallery/05-002-1-bilder_anlegen.png) ### Bilder anlegen - Klicken Sie auf den Button **Inhalt** und wählen unter dem Reiter *Media* das Element **Gallery** aus. - Klicken Sie nun im Reiter *Allgemein* **Bild hinzufügen/Add media file**. - Wählen Sie eine/mehrere Bilddateien aus Ihrer Fileliste aus oder laden Sie die gewünschten Dateien in den entsprechenden Ordner hoch. [ ![](https://www.toujou.de/_assets/processed/qFG3h2fkKlnOtTf7fD3MWYYsp03QyBULjkOPMq13w2E/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwMi0yLWJpbGRfYmVhcmJlaXRlbl8wMmY1NWM1NWM1:t/cb:f5b47088c1a44638f76a5eda238e2e63847f043e/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDAzX2dhbGxlcnkvMDUtMDAyLTItYmlsZF9iZWFyYmVpdGVuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-003_gallery/05-002-2-bild_bearbeiten.png) ### Bilder bearbeiten - Unter jedem nun hochgeladenen Bild öffnet sich ein Menü zur Bearbeitung der **Bild-Metadaten**. - Aktivieren Sie das Feld **Beschreibung (Bildunterschrift)**, um den Bildern eine Bildunterschrift hinzuzufügen. Schreiben Sie den Text in das dafür vorgesehene Feld. - Die Bildunterschrift ist bei aktivierter Lightbox unter dem jeweiligen Bild zentriert sichtbar. [ ![](https://www.toujou.de/_assets/processed/gbrLePL_BU9hlYEelGRE0lZtpLbfIRodziFxogjaas0/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwMi0zLWJpbGRfZm9ybWF0aWVyZW5fMjExYzhlNGQ4OA:t/cb:d725b91d8225820e158d9e662021fc06333bc618/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDAzX2dhbGxlcnkvMDUtMDAyLTMtYmlsZF9mb3JtYXRpZXJlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-003_gallery/05-002-3-bild_formatieren.png) ### Bilder formatieren - Unter dem Button **Editor öffnen können Sie das Seitenverhältnis für Mobile, Tablet-, Desktop- oder Widescreen-Ansicht anpassen. - Setzen Sie den Bildfokus für das Responsive-Verhalten jeweils auf die gewünschte Bildfläche. --- Verhalten ----------- Die *Gallery* bietet Ihnen die Möglichkeit, mehrere Bilder neben- und untereinander in Form einer Galerie darzustellen. Achten Sie auf ein ähnliches Seitenverhältnis der Bilder und meiden die Mischung von Hoch- und Querformaten. Die Galerie entfaltet optisch bei einer sehr hohen Anzahl an Bildern (> 20) ihre beste Wirkung, unter drei Bildern ist die Galerie nicht zu empfehlen. **Responsive:** Auf kleiner werdenden Endgeräten werden die Bilder zunächst in Zweierreihen dargestellt. Auf kleinen Darstellungsflächen werden alle Bilder untereinander angezeigt. --- Verknüpfte Themen ----------------- Erläuterungen aus dem [toujou](https://www.toujou.de/service/toujou-setup/)- & [TYPO3-Setup](https://www.toujou.de/tutorials/), die mit dieser Elementanleitung in Verbindung stehen. [Bildbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/) [Dateiliste](https://www.toujou.de/tutorials/dateiliste/)