Zum Hauptinhalt springen
TYPO3

Funktions-Highlight: Bilder verwalten und bearbeiten wie ein Profi in TYPO3

Author
Published

Wenn Sie an einem Blog-Post oder einer Landingpage arbeiten, ist das Letzte, was Sie tun möchten, mit verschiedenen Apps und mehreren Tabs zu jonglieren. Mit TYPO3 müssen Sie das nicht, denn der TYPO3 Core stellt Ihnen (nach einiger Konfiguration) sofort Bildtools zur Verfügung, mit denen Sie:

  • Bilder hochladen
  • Bilder bearbeiten, zuschneiden und in der Größe verändern
  • Bilddateien seitenübergreifend nutzen
  • SEO mit Bilddaten verbessern

Hier ist ein kurzer Überblick über die Grundlagen, die Sie wissen müssen, bevor Sie mit Bildern in TYPO3 arbeiten.

Oktober 2024: TYPO3 v13 ist da! Sehen Sie, wie die Bildbearbeitung ein großes Update erhalten hat und jetzt das Zuschneiden von .svg-Bildern direkt ohne zusätzliche Tools ermöglicht

Screenshot, der zeigt, wie man Bilder aus der Dateiliste hochlädt
Um ein Bild hochzuladen, klicken Sie mit der rechten Maustaste auf einen Ordner oder auf die Schaltfläche "Hochladen" oben auf der Seite "Dateiliste".

Ihre Bilder und Videos an einem Ort: Dateiliste

Jedes Bild, das Sie hochladen, wird automatisch zur Dateiliste hinzugefügt. In TYPO3 finden Sie alle Bilder, die Sie jemals hochgeladen haben, in der Dateiliste, die Sie über das Dateilistensymbol im linken Menü Ihres TYPO3-Backends erreichen.

Sie können Ihre Assets organisieren, indem Sie in der Dateiliste Ordner mit beschreibenden Titeln erstellen. Sie können auch einfach ein oder mehrere Bilder von einem Ordner in einen anderen verschieben. So können Sie beispielsweise alle Variationen Ihres Firmenlogos in einem Ordner mit dem Namen "Logos" ablegen.

Das macht Ihr Leben einfacher: Diese Struktur ermöglicht es Ihnen, dasselbe Bild (z. B. Ihr Logo) auf mehreren Seiten wiederzuverwenden, anstatt für jede Seite ein neues Bild hochzuladen. So können Sie auch die Metadaten Ihres Bildes wiederverwenden, obwohl Sie diese auf Seitenbasis überschreiben können.

Ausführliche Informationen finden Sie im Abschnitt "Dateimodul" des Tutorials "Erste Schritte".

Screenshot der Bildauswahl UI
Sie können über fünfzehn verschiedene Arten von Dateierweiterungen über die Benutzeroberfläche von TYPO3 hinzufügen

TYPO3 erlaubt viele Arten von Bildern und Medien

Wenn Sie an einer Seite arbeiten und ein Bild hinzufügen oder hochladen müssen, haben Sie drei Möglichkeiten, dies zu tun:

  • Mediendatei hinzufügen: Fügen Sie ein vorhandenes Bild aus Ihrer Dateiliste hinzu.
  • Dateien auswählen & hochladen: Laden Sie eine neue Datei von Ihrem Computer hoch (Sie können den Dateimanager Ihres Desktops verwenden oder das Bild per Drag & Drop einfügen).
  • Medien per URL hinzufügen: Wenn Sie ein Bild oder Video aus dem Internet verwenden, fügen Sie einfach den Link ein.

Alle in grün aufgelisteten Dateierweiterungen sind mit TYPO3 kompatibel.

Screenshot, der zeigt, wie man Bilder aus der Dateiliste hochlädt
Um ein Bild hochzuladen, klicken Sie mit der rechten Maustaste auf einen Ordner oder auf die Schaltfläche "Hochladen" oben auf der Seite "Dateiliste".

Hochladen von Bildern im Voraus oder beim Erstellen von Seiten

Das Hochladen eines Bildes (oder mehrerer Bilder auf einmal) in die Dateiliste ist eine gute Möglichkeit, Ihre Inhalte zu organisieren, insbesondere wenn Sie ein Bild mehrfach verwenden. Klicken Sie einfach auf den Upload-Button oben auf der Dateiliste oder klicken Sie mit der rechten Maustaste auf den Ordner, in dem sich das Bild befindet.

Wenn Sie hingegen zu den Menschen gehören, die Bilder oder Videos in der Regel spontan hinzufügen, haben Sie zwei weitere Möglichkeiten zum Hochladen von Bildern.

Ein Inhaltselement ist ein strukturiertes Element, das verschiedene Bausteine wie Überschriften, Text und Bilder formatiert. Das Hinzufügen von Bildern über ein Standard-Inhaltselement wie "Text & Medien" stellt sicher, dass Ihre Bilder auf Ihrer gesamten Website einheitlich formatiert sind.

Das folgende Beispiel zeigt, wie Sie ein Bild über ein "Text & Medien"-Element für einen Blogbeitrag einfügen können.

Screenshot, der zeigt, wie man ein Inhaltselement zu einer Seite hinzufügt

Schritt 1: Wählen Sie die Schaltfläche "Content", um ein neues Inhaltselement zu Ihrer Seite hinzuzufügen.

Screenshot des Pop-up-Fensters "Neues Inhaltselement erstellen", das auf das Element "Text & Medien" zeigt

Schritt 2: Wählen Sie ein Inhaltselement wie "Text & Medien", das es Ihnen ermöglicht, ein Bild hinzuzufügen.

Screenshot der Registerkarte "Medien" auf der Seite "Neue Seiteninhalte erstellen", die auf die Schaltfläche "Mediendatei hinzufügen" zeigt

Schritt 3: Wählen Sie die Registerkarte "Medien" und laden Sie ein Bild hoch, indem Sie auf "Mediendatei hinzufügen" klicken. Daraufhin öffnet sich ein Pop-up-Fenster zur Dateiauswahl

Ein kleiner Tipp: Wir empfehlen, die Schaltfläche "Mediendatei hinzufügen" und nicht die Schaltfläche "Dateien auswählen und hochladen" zu verwenden, da Medien, die direkt auf die Seite hochgeladen werden, automatisch in einem user_upload-Ordner in der Dateiliste gespeichert werden, der von Ihrer bestehenden Dateistruktur getrennt ist, was es schwierig machen könnte, Dateien zu finden, wenn Ihre Website wächst.

Screenshot des Popup-Fensters "Dateiauswahl

Schritt 4: Wählen Sie auf der linken Seite des Pop-up-Fensters den Dateiordner, aus dem Sie Ihr Bild auswählen möchten. Sie können ein bereits vorhandenes Bild auswählen, indem Sie es anklicken. Laden Sie ein neues Bild in diesen Ordner hoch, indem Sie die Schaltfläche "Dateien auswählen" unten im Pop-up-Fenster wählen und auf "Dateien hochladen" klicken.

Sie können Bilder auch über einen Rich-Text-Editor hinzufügen, also über die Schnittstelle, die Sie wahrscheinlich von Word, Pages oder Google Docs gewohnt sind. Wenn Ihr TYPO3-Setup die CKEditor-Erweiterung enthält und so konfiguriert ist, dass Sie Bilder hinzufügen können, können Sie auf das "Foto"-Symbol klicken, um ein Bild hinzuzufügen. Der Nachteil dieser Methode ist, dass es schwieriger ist, eine einheitliche Formatierung auf der gesamten Website beizubehalten - aus diesem Grund empfehlen wir die Verwendung von Inhaltselementen!

Screenshot der Bild-Metadaten
Füllen Sie Metadaten aus, um Ihre Bilder durchsuchbar zu machen

Bild-Metadaten festlegen zur Verbesserung der SEO

Mit TYPO3 können Sie Metadaten für Ihre Bilder festlegen. Metadaten wie alternativer Text tragen dazu bei, dass mehr Ihrer Inhalte in den Suchergebnissen auftauchen, da Webcrawler den Text lesen können.

Zu den Metadaten gehören:

  • Titel: Der Titel des Bildes wird als Tooltip-Text angezeigt, wenn ein Benutzer mit der Maus über das Bild fährt.
  • Beschreibung (Bildunterschrift): Der Text, der unter dem Bild als Beschriftung erscheint.
  • Alternativer Text: Diese Eingabehilfe beschreibt das Asset selbst; wenn Ihr Bild nicht geladen werden kann oder wenn ein Benutzer sehbehindert ist, beschreibt der Alt-Text das Bild.
Screenshot von Bild-Metadaten, der auf den Bildbearbeitungs-Editor verweist
Klicken Sie auf die Schaltfläche "Editor öffnen", um das Bild zu bearbeiten

Bearbeiten und Skalieren von Bildern

Angenommen, Sie haben ein Bild hinzugefügt, möchten aber eine unsaubere Kante entfernen oder nur einen bestimmten Teil anzeigen. Wenn Sie den Bildeditor öffnen, können Sie die Datei auf die gewünschte Größe zuschneiden.

Screenshot von Image Editor
Sie können Bilder zuschneiden und die Größe entsprechend dem gewünschten Seitenverhältnis ändern.

Unabhängig davon, welche Größe Sie für den zugeschnittenen Bereich wünschen, gibt es Tastenkombinationen zur Anpassung des Seitenverhältnisses, sodass Sie sicher sein können, dass Ihre Bilder an jede Bildschirmgröße angepasst werden. Die verfügbaren Seitenverhältnisse sind:

  • 16:9
  • 4:3
  • 3:2
  • 1:1
  • Frei
Screenshot der verschiedenen Seitenverhältnisse, die für Gerätegrößen eingestellt sind
Sie können das Seitenverhältnis für alle Gerätegrößen einstellen

Um Bilder responsive zu machen, erlaubt TYPO3 die Konfiguration von Breakpoints und Seitenverhältnissen für jede Gerätegröße, von Desktop bis Mobile.

Screenshot der Registerkarte "Erscheinungsbild" in der Benutzeroberfläche für die Bearbeitung von Inhaltselementen
Ausrichtung, Effekte und Layout auf der Registerkarte "Erscheinungsbild" bearbeiten

Wenn Sie auf die Registerkarte "Erscheinungsbild" eines Inhaltselements klicken, können Sie das Erscheinungsbild des Bildes bearbeiten, indem Sie Rahmen, Farbeffekte und Ränder hinzufügen.

Einstieg in die Bildbearbeitung in TYPO3

Jetzt, wo Sie die Grundlagen kennengelernt haben, hoffen wir, dass Sie einen Eindruck davon bekommen haben, wie leistungsfähig das TYPO3 CMS ist, wenn es um das Hochladen und Bearbeiten von Bildern geht. Wenn Sie weitere Informationen zur Bildbearbeitung in TYPO3 suchen, finden Sie hier weitere hilfreiche Tutorials. Um Wissen, Ideen und Ratschläge auszutauschen, schließen Sie sich einer lebendigen Gemeinschaft von TYPO3-Nutzern an, indem Sie sich noch heute bei My TYPO3 registrieren.