Zum Inhalt springen
  • Anleitung TYPO3
  • Login / Account
  • Funktionen / Extensions
  • Audio / Video
  • Dig. Barrierefreiheit
  • Nutzungsbedingungen
  • FAQ
  • Zentrale Informationstechnik (TYPO3-Team)
  • IT-Servicezentrum (ITSZ)
  • Technische Universität München
Technische Universität München
  • 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
    • Umfang
    • Nutzungsbedingungen
    • Anforderung
  • Anleitung
    • TYPO3 Grundlagen
      • Begriffe
      • Modulleiste
      • Seitenbaum
      • Filelist
      • Registrierung und Login ins Backend
      • Berechtigungskonzept
        • Groupdelegation
    • Arbeiten mit Seiten
      • Seitentypen
      • Seite anlegen
      • Seiten verbergen/sichtbar machen
      • Seiten sortieren/kopieren
      • Seiten löschen
      • Seite zeitsteuern
      • Seiten-Layout ändern
    • Arbeiten mit Seiteninhalten
      • Seiteninhaltstypen
      • Seiteninhalte anlegen
      • Überschriften
      • Text & Media
        • Bilder
        • Bildergalerie
        • Slideshow
        • Alternativtexte für Bilder schreiben
      • Audio & Video
        • Audiodateien einbinden
        • Video einbinden
      • 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
    • Englischsprachige Seite
    • Kontaktbereich
    • Rechtliches
    • Lageplan
      • Lageplan mit Google Maps
      • Lageplan mit dem BayernAtlas
  • Digitale Barrierefreiheit
    • Barrierefreie Inhalte mit TYPO3
    • Schnelleinstieg für Redakteure
    • Leichte Sprache
  • FAQs
  • Kontakt
  • Sitemap
  1. Startseite
  2. Anleitung
  3. Arbeiten mit Seiteninhalten
  4. Text & Media
  5. Bilder

Bilder einfügen

Bilder können alleinstehend oder zusammen mit Text eingebaut werden. Es können auch gleichzeitig mehrere Bilder eingebettet werden, die nebeneinander oder untereinander angeordnet werden können.

Bevor Sie Bilder in das Inhaltselement einbauen, müssen diese (z.B. JPG-Bilder) in die Filelist hochgeladen werden.

Bilder für die Webseite vorbereiten

Bilder müssen vor dem Hochladen in die Webseite vorbereitet werden:

  • Laden Sie Bilder nicht einfach von der Kamera in die Webseite oder ins Dateisystem der Webseite
  • Bearbeiten Sie die Bilder im Vorfeld in einem Bildbearbeitungsprogramme (z.B. Photoshop): 
    • Dateinamen ändern
    • Verkleinern Sie die Bildgröße auf die Maße wie sie dann in der Webseite dargestellt werden sollen
  • Verwenden Sie nur Bilder im Dateiformat jpg/jpeg, gif, png, svg oder webp
  • Erstellen Sie die Bilder mit gleicher Breite und Höhe wenn diese zusammen in das gleiche Inhaltselement eingebaut werden - bevor Sie diese in die Filelist der Webseite hochladen.
  • Beim Layout mit rechter Spalte ist die maximale Breite der Bilder 936 Pixel, beim Layout ohne rechte Spalte ist die maximale Breite 1176 Pixel.
  • Inhaltselement anlegen
  • Bilder einfügen
  • Darstellungsoptionen
  • Reihenfolge der Bilder ändern
  • Metadaten eintragen (Image Metadata)

Inhaltselement "Text&Media" anlegen

Screenshot: Text & Media-Element anlegen
Bild 1: Text & Media-Element anlegen

Um Mediaelemente (Bilder, Video, Audio) in ein Inhaltselement einzufügen, wählen Sie als Content Element Type "Text & Media" aus.

Bilder einfügen

Screenshot: Add media file
Bild 2: Add media file
  • Klicken Sie im Reiter Media auf Add media file (Bild 2 No.1). Die Filelist öffnet sich in einem Pop-Up-Fenster.
  • Jetzt können Sie ein oder mehrere Bilder dem Inhaltselement hinzufügen.
  • Die Metadaten der Bilder (Image Metadata) können Sie bearbeiten, wenn Sie im Backend das jeweilige Bild (Bild 2 No.2) anklicken.

Darstellungsoptionen

Screenshot: Darstellungsoptionen
Bild 3: Darstellungsoptionen

Unterhalb der Bilderauswahl werden nun die Media Adjustments gesetzt, die gleichermaßen für alle oben ausgewählten Bilder gelten:

  1. Geben Sie entweder die Breite oder Höhe ein (Bild 3 No.1). Bitte nur einen der beiden Werte eintragen!
  2. Wählen Sie den Textfluß: Wie ist die Position der Media-Elemente in Bezug zum Text (Bild 3 No.2).
  3. Number of Columns (Bild 3 No.3): 
    • Sollen mehrere Bilder untereinander dargestellt werden, wählen Sie Number of Columns = 1.
    • Möchten Sie mehrere Bilder nebeneinander platzieren, wählen Sie die gewünschte Anzahl (max. 9) der Spalten.
  4. Enlarge on Click (Bild 3 No.4): Diese Funktion gibt es nur für Bilder. Weitere Informationen dazu finden Sie in der Beschreibung zur Bildergalerie-Funktion.

Reihenfolge der Elemente ändern

Screenshot: Elemente verschieben
Bild 4: Elemente verschieben

Die Reihenfolge der Mediaelemente kann per Drag & Drop geändert werden:

  • Klicken und halten Sie den "Festhalter" (Bild 4) und ziehen das Bild an die gewünschte Position.

Metadaten eintragen (Image Metadata)

To top

TUM TYPO3 (ZIT)

Technische Universität
München

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

TYPO3 v12

Änderungen in TYPO3 v12 gegenüber der bisherigen Version 10

  • Datenschutz
  • Impressum
  • Barrierefreiheit