TYPO3 Dokumentation für Redakteure

4 Bilder und Dateien

4.1 Bildbearbeitung

Zur Erzeugung und Bearbeitung von Bildern und sonstigen Dateien, wie z.B. PDF, verwenden Sie bitte Ihre gewohnten (Bildbearbeitungs-) Programme.

Bilder sollten möglichst in einer für Webseiten geeigneten Auflösung (Pixelgröße) vorhanden sein aber eine Größe von 1Mbyte nicht überschreiten, zur Anzeige auf der Webseite können die Bilder dann von TYPO3 in die richtige Größe umgerechnet werden, weiterhin ist es möglich, eine Klick-Vergrößerung zu aktivieren. Außerdem sollten Sie die Bilder nur in einem von allen Web-Browsern unterstützten Format erzeugen (GIF für Bilder mit einfachen Farbflächen(bis 256 Farben), JPEG für Photos mit Farbverläufen und feinen Strukturen).

Bilder und andere Dateien laden Sie über das Modul Datei / Dateiliste (File / Filelist) auf Ihren Dateienbereich am TYPO3-Server. Dann können Sie die Bilder bzw. die Download-Links in Ihre Web-Pages einfügen. Details dazu finden Sie in den nachfolgenden Abschnitten.

4.2 Bilder- und Datei-Upload

In TYPO3 steht Ihnen nicht nur ein Bereich für Ihre Webseiten, sondern auch ein Upload-Bereich zum Hochladen Ihrer Bilder und Dateien zur Verfügung, auf den Sie mit dem Modul Datei / Dateiliste (File / Filelist) zugreifen können. Dieses Modul zeigt Ihnen Ihren Dateien­baum an.

Mit dem Kontextmenü - Punkt Neu (New) können Sie diesen Bereich in Ordner unterteilen:

Ordner anlegen Schritt 1
Ordner anlegen Schritt 1
Ordner anlegen Schritt 2
Ordner anlegen Schritt 2

Diese Ordner können Sie mit den Plus- und Minus-Symbolen auf und zuklappen:

Ordnerliste ausgeklappt
Ordnerliste ausgeklappt
Ordnerliste eingeklappt
Ordnerliste eingeklappt

Für das Hochladen von Bildern und sonstigen Dateien verwenden Sie das Kontextmenü -  Datei-Upload (Upload Files):

Datei Upload Schritt 1
Datei Upload Schritt 1
Datei Upload Schritt 2
Datei Upload Schritt 2

Hier hochgeladene Dateien können Sie immer wieder verwenden und auch mehrfach in verschiedene Seiten einbinden, ein erneuter Upload ist nicht notwendig.

Wenn Sie auf den Ordnernamen im Dateienbaum klicken, wird in der Arbeitsfläche eine Liste von allen darin enthaltenen Dateien angezeigt. Mit dem Häkchen „Vorschaubilder anzeigen“ (Display thumbnails) können Sie ein- und ausschalten, ob in dieser Liste nur die Dateinamen oder auch die Bildinhalte (als Vorschaubilder) angezeigt werden:

Dateiliste ohne Thumbnails
Dateiliste ohne Thumbnails
Dateiliste mit Thumbnails
Dateiliste mit Thumbnails

Wenn Sie auf das Icon neben dem Dateinamen klicken, erscheint ein Kontextmenü. Mit dem Punkt Löschen (Delete) können Sie eine Datei bzw. ein Bild im Upload-Bereich löschen.

Datei Löschen
Datei Löschen

Außerdem können Sie Dateien oder Bilder im Upload-Bereich durch neue Versionen er­setzen, indem Sie beim Datei-Upload eine Datei mit demselben Dateinamen auswählen und das Häkchen „Dateien überschreiben“ (Overwrite files) setzen.

  • Im Fall von Download-Dateien erhält von da an jeder Benutzer, der den ent­spre­chen­den Download-Link anklickt, die neue Version der Datei.
  • Im Fall von Bildern wirkt das Löschen oder Ersetzen im Upload-Bereich nur für das künftige Einbinden. Die vorher in Webseiten eingefügten Bilder bleiben unver­ändert. Falls Sie in einer Webseite ein altes Bild durch die neue Version ersetzen wollen, müssen Sie dort das alte Bild löschen und das neue Bild neu einfügen.

4.3 Bilder einbinden

Um Bilder in Ihre Web-Seiten einzubinden, gibt es zwei Möglichkeiten:

  • Sie können zum Einen den Inhaltstyp Text verwenden und das Bild oder die Bilder mit den entsprechenden Funktionen des Rich Text Editors einfügen - siehe Abschnitt 4.3.1. Diese Vorgehensweise ist allerdings nur dann ratsam, wenn Sie reltiv kleine Bilder schnell einfügen wollen. Bei größeren Formaten werde Sie so schnell den Überblick verlieren.
  • Meistens ist es besser den Inhaltstyp Text mit Bild (Text with Images) oder Nur Bilder (Images only) zu verwenden.
    Mit diesem Inhaltstyp können Sie Bilder unkompliziert und übersichtlich einbinden und auch gleich die Anzeigegröße bestimmen, einen Rahmen hinzufügen und/oder eine Bildunterschrift setzen, etc.
    - siehe auch Abschnitt 4.3.2.

4.3.1 Bilder im Rich Text Editor

Mit dem Rich Text Editor können Sie ein Bild jeweils innerhalb des Textes oder am rechten oder linken Rand neben dem Text oder als eigenen Absatz linksbündig, zentriert oder rechtsbündig oberhalb oder unterhalb des anderen Textes oder innerhalb einer Tabelle einfügen. Sie können das Bild auch mit einem Link versehen („anklickbar“ machen) sowie die Größe des Bildes einstellen und einen Titel und Alternativtext für das Bild angeben.

Zu diesem Zweck muss das Bild vorher auf den TYPO3-Server hochgeladen worden sein (siehe Abschnitt 4.2).

Wenn Sie ein Bild einfügen wollen, gehen Sie so vor:

  1. Zuerst klicken Sie an die entsprechende Stelle im Textblock.
  2. Dann klicken Sie auf das Symbol Bild einfügen (insert image) Bild einfügen (insert image).
  3. Dann wählen Sie das Bild aus den bereits hochgeladenen Bildern aus, indem Sie zuerst in der Baumstruktur Ihres Dateienbereiches den Folder auswählen und dann in der Liste der Bilder das gewünschte Bild mittels Klick auf den Dateinamen wählen:
Bild auswählen
Bild auswählen

Wenn Sie ein „anklickbares“ Bild mit einem Link erzeugen wollen, dann müssen Sie zuerst das Bild einfügen, dann auf das Bild klicken und mit dem Verlinkungs- Symbol Verlinkungs- Symbol ein Link setzen, so wie es in Abschnitt 3.3 beschrieben ist.

Wenn Sie mit der rechten Maustaste auf das Bild klicken, erscheint ein Kontextmenü. Mit dem Punkt „Bildeigenschaften“ (Image properties) können Sie wichtige Eigenschaften des Bildes festlegen, wie z.B. die Position und der Alternativtext:

Bildeigenschaften öffnen
Bildeigenschaften öffnen
Bildeigenschaften bearbeiten
Bildeigenschaften bearbeiten
  • Mit dem Auswahlmenü Fließen (Float) können Sie das Bild an den rechten oder linken Rand mit „herum fließendem Text“ setzen oder es innerhalb des Texts belassen, wo sie es eingefügt haben.
  • Unter Titel (Title) können Sie einen kurzen erklärenden Text angeben, der dem Benutzer angezeigt wird, wenn er mit der Maus über das Bild geht.
  • Unter Alternativtext (Alternate text) sollten Sie einen kurzen Text angeben, der statt des Bildes ausgegeben wird, wenn keine Bilder dargestellt werden (z.B. Blindenschrift, Sprachausgabe oder Textanalyse durch eine Suchmaschine, siehe die Hinweise zur Barrierefreiheit in Abschnitt 6.1.3).
  • Wenn das Bild ein anklickbarer Link ist, geben Sie in beiden Fällen (Titel und Alternativtext) an, wohin der Benutzer beim Anklicken gelangt bzw. welche Funktion das Symbol oder Icon hat.

Ihre Eingaben werden erst dann wirksam, wenn Sie auf den Aktualisieren / Update -Button klicken.

4.3.2 Bilder als eigenes Inhaltselement

Außerdem stehen die beiden speziellen Inhaltstypen Text mit Bild (Text with Images) und Nur Bilder (Images only) zur Verfügung. In diesen beiden Inhaltstypen erscheinen die vom Inhalts­typ Text bekannten Eingabefelder (siehe Abschnitt 2.2) und zusätzlich weitere Eingabe­felder für das Einfügen von einem oder mehreren Bildern:

Für die Auswahl des Bildes (oder auch mehrer Bilder) haben Sie hier zwei Möglichkeiten:

  1. Entweder Sie wählen das Bild aus den vorher auf den TYPO3-Server hochgeladenen Bildern aus (siehe Abschnitt 4.2). Dazu verwenden Sie das Symbol Dateien auswählen (Browse for files) Dateien auswählen (Browse for files) neben dem oberen Listenfeld. Dies ist für Bilder sinnvoll, die immer wieder an mehreren Stellen gebraucht werden und deshalb am TYPO3-Server extra im Upload-Bereich zur Verfügung stehen sollen (empfohlen).
  2. Oder Sie fügen das Bild direkt von Ihrem eigenen PC ein. Dazu wählen Sie den Button „Durchsuchen“ (Browse) neben dem unteren Dateinamenfeld und wählen das Bild aus den auf Ihrem PC gespeicherten Dateien aus. Diese Bilder werden dann direkt in dieses eine Inhaltselement hochgeladen. Dies ist für Bilder sinnvoll, die nur in dieser Webseite gebraucht werden, aber auch in diesem Fall wenig anzuraten, da dann leicht der Überblick verloren geht.

Unter Position legen Sie fest, wo das Bild innerhalb der Web-Seite relativ zum Textfeld bzw. zu den anderen Inhaltselementen der Seite erscheinen soll:

  • oberhalb oder unterhalb, und dort links­bündig, zentriert oder rechts­bündig,
  • oder am rechten oder linken Seitenrand, und dort mit herum fließenden Text oder in einer eigenen Spalte.

4.4 Dateien zum Download einbinden

Um Ihre Download-Dateien verfügbar zu machen, bieten Sie den Benutzern eine Webseite an, die Links auf die Download-Dateien und eventuelle weitere Hinweise und Informationen zu diesen Dateien enthält wie Inhalt, Format, Größe (damit die Benutzer abschätzen können, wie lange der Download dauern wird), Urheberrechte und dergleichen.

Dazu gehen Sie so vor:

  • Sie verwenden ein Inhaltselement vom Typ Text.
  • Darin erstellen Sie mit dem Rich Text Editor eine Liste von Download-Links.
  • In dieser Liste geben Sie für jede einzelne Download-Datei an, mit welchem anklickbaren Text sie angezeigt wird, in einer geeigneten Reihenfolge und mit einer geeigneten Formatierung.
  • Dann setzen Sie auf diese Texte jeweils mit dem Link-Symbol (siehe Kapitel 3.1) den Link auf die Downlaod-Datei, die Sie im Unterpunkt „Datei“ (File) aus Ihrem Dateienbaum auswählen, wie in Abschnitt 3.3 beschrieben.

Tipp: Im Unterpunkt „Datei“ (File) sehen Sie nur die Dateien in Ihrem eigenen Bereich. Links auf Download-Dateien, die in einem anderen Bereich liegen, können Sie im Unterpunkt „External URL“ mit dem URL der Download-Datei anlegen.

Alternativ können Sie auch ein Inhaltselement vom speziellen Typ Datei-Links (File links) verwenden, das eine Download-Liste in einem einfachen Standard-Format anzeigt, siehe Abschnitt 6.4.6.