Skip to content
  • Anleitung TYPO3
  • Login / Account
  • Funktionen / Extensions
  • Audio / Video
  • Dig. Barrierefreiheit
  • Nutzungsbedingungen
  • FAQ
  • de
  • en
  • Central Information Technology (TYPO3-Team)
  • IT Service Center (ITSZ)
  • Technical University of Munich
Technical University of Munich
  • Startseite
  • Webauftritte
    • Nichtfakultäre Einrichtungen
    • TUM School of CIT
    • TUM School of ED
    • TUM School of LS
    • TUM School of MGT
    • TUM School of MH
    • TUM School of NAT
    • TUM School of SOT
    • TUM Graduate School (GS)
    • Integrative Research Institutes (IRI)
    • Technology Core Facilities (TCF)
    • Wissenschaftliche Zentralinstitute (WZI)
    • Hochschule für Politik
    • TYPO3 Web-Archiv
  • Service
    • Scope
    • Terms of Use
    • Requirement
  • Documentation
    • TYPO3 Basics
      • Terms
      • Module bar
      • Side tree
      • Filelist
      • Registration and login to the backend
      • Permissions concept
        • Groupdelegation
    • Working with Pages
      • Page types
      • Create a page
      • Hide/show pages
      • Sort/copy pages
      • Delete pages
      • Scheduled publishing
      • Change page layout
    • Working with Page content
      • Page content types
      • Create page content
      • Headers
      • Text & Media
        • Images
        • Image gallery
        • Slideshow
        • Alternative text for images
      • Audio & Video
        • Embed audio files
        • Embed video
      • Tabellen
      • File Links
      • Menu
      • Insert Records
      • Rich Text Editor (RTE)
      • Links setzen
      • Abstand zwischen Inhaltselementen
      • Mehrspaltiger Content
      • Akkordeon-Funktion
      • Rahmen & Boxen
      • Social Media Box
    • Extensions
      • CurlContent
      • TUM MemberList
      • TUMcourses
      • TUMvCard
      • News
      • iFrame with consent
      • T3UP Carousel
    • English Version
    • Contact Area
    • Legal Matters
    • Maps
      • Maps with Google Maps
      • Maps with BayernAtlas
  • Digital Accessibility
    • Quick Start for Editors
    • Leichte Sprache
  • FAQs
  • Contact
  • Sitemap
  1. Startseite
  2. Documentation
  3. Working with Page content
  4. Text & Media
  5. Image gallery

Image gallery

To create an image gallery, use the "Text & Media" element with multiple images (at least 2) and the "Enlarge on click" feature.

Prepare images for the website

Images must be prepared before uploading them to the website:

  • Do not upload images directly from the camera to the website or the website's file system.
  • Edit the images in advance using image editing software (e.g., Photoshop):
    • Change the file names.
    • Reduce the image size to the dimensions in which they will be displayed on the website.
  • Use only image file formats such as jpg/jpeg, gif, png, svg, or webp.
  • Ensure that images have the same width and height if they are to be inserted into the same content element before uploading them to the website's file list.
  • For layouts with a right column, the maximum width for images is 936 pixels; for layouts without a right column, the maximum width is 1176 pixels.

Create content element "Text&Media"

Screenshot: Create text & media element
Image 1: Create text & media element

To insert media elements (images, video, audio) into a content element, select “Text & Media”.

Insert images

Screenshot: Add media file
Image 2: Add media file
  • Click on the Media tab and select Add media file (Image 2 No.1). The file list will open in a pop-up window.
  • You can now add one or more images to the content element.
  • You can edit the image metadata by clicking on the respective image in the backend (Image 2 No.2).

Display options Image gallery

Screenshot: Settings image gallery
Image 3: Settings image gallery
  • Set the size of the thumbnails (Image 3 No.1). Enter either the height or the width. Please enter only one value!
  • Activate the Enlarge on Click option (Image 3 No.4).
  • With Number of Columns (Image 3 No.3), you can control how many thumbnails are displayed side by side.

Example

Description Image 4

In this example, the width of the thumbnails is 350px and the number of columns =3. You also have the option of adding a caption to each image.

 

To top

TUM TYPO3 (ZIT)

Technical University
of Munich

Richard-Wagner-Str. 18
80333 München
typo3(at)tum.de

Information

We are utilizing the OTRS system for our support services. Your support requests will be processed as tickets, in a manner similar to what you may be accustomed to from the IT support. We encourage you to continue communicating with us via email at typo3(at)tum.de.

Membership

TYPO3 Academic Gold Member
  • Privacy
  • Imprint
  • Accessibility