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. Images

Adding images

Images can be added alone or combined with text. Multiple images can also be embedded at the same time, arranged either side by side or one below the other. 

Before adding images to the content element, they must be uploaded to the file list.

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.
  • Inhaltselement anlegen
  • Insert images
  • Media adjustments
  • Reihenfolge der Bilder ändern
  • Image metadata

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).

Media adjustments

Screenshot: Media adjustments
Image 3: Media adjustments

Below the image selection, the media adjustments are now set, which will apply equally to all the selected images above:

  1. Enter either the width or height (Image 3 No.1). Please only enter one of the two values!
  2. Choose the text wrapping: What is the position of the media elements in relation to the text (Image 3 No.2)
    • Number of Columns (Image 3 No.3): If you want to display several images one below the other, select Number of Columns = 1.
    • If you want to place multiple images side by side, select the desired number (maximum of 9) of columns.
  3. Enlarge on Click (Image 3 No.4): This function is only available for images. For more information, please refer to the description of the image gallery function.

Change the order of elements

Screenshot: Move elements
Image 4: Move elements

The order of the media elements can be changed by drag & drop:

  • Click and hold the "move" icon (Image 4) and drag the image to the desired position.

Image metadata

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