zum Inhalt springen

Bilder in TYPO3

Bilder für das Responsive Design vorbereiten

Die Webseiten der Universität zu Köln verwenden ein so genanntes Responsive Design, welches sich dynamisch der Größe des vorhandenen Bildschirms anpasst. Daraus ergeben sich einige Anforderungen an die Bilder, welche Sie verwenden möchten:

  • Bilder sollten immer eine Mindestbreite 600 Pixeln (px) haben. Ansonsten kann es je nach Art der Verwendung zu Unschärfe oder Weiß-Bereichen kommen.
  • Bilder sollten im Allgemeinen nicht mit mehr als 1000px Breite hochgeladen werden. Größere Bilder belegen unnötig Speicher und verlangsamen Ihre Seite zum Teil dramatisch.
  • Alle Bilder auf einer Seite sollten immer das gleiche Seitenverhältnis haben. Es empfiehlt sich möglichst durchgängig das Format 16:9 zu verwenden.

Verschiedene Datei-Formate haben unterschiedliche Stärken und Schwächen:

  • JPG / JPEG: Gute Kompression für Fotos, ungeeignet für Grafiken, Logos, Diagramme und Text
  • GIF: Sehr gute Kompression für simple Grafiken mit wenig Farben (keine Farbverläufe), Transparenz teilweise möglich.
  • PNG: Gute Kompression für Fotos, geeignet für Grafiken, Voll- und Halbtransparenz möglich. PNG ist für alle Anwendungsgebiete ein guter Kompromiss!
  • Speichern Sie Grafiken und Fotos niemals als BMP oder TIFF. Dies sind völlig veraltete Formate ohne jegliche Vorteile und haben eine zu große Dateigröße.

Bilder hochladen

Um auf Ihrer Website Bilder einzufügen, laden Sie diese zunächst in die Dateiliste. Vergeben Sie einen möglichst eindeutigen Dateinamen, damit Sie das Bild später leicht wiederfinden. Unterordner helfen zusätzlich Bilder schnell wieder zu finden.

Sobald Sie das Bild auf den Server geladen haben, sollten Sie dem Bild Metadaten, also Informationen über das Bild, hinzufügen. Möglich sind zum Beispiel eine Beschreibung und Alt-Text, welche bei jeder Verwendung des Bildes automatisch genutzt werden.

Die wichtigsten Felder finden Sie im Tab "General":

  • Im Feld "Title" können Sie den Inhalt des Tooltips festlegen, der erscheint, wenn Sie mit dem Mauszeiger über das Bild fahren.
  • Im Feld "Description" können Sie einen Text eingeben, der unterhalb des Bildes angezeigt wird. Das ist zur Erläuterung des Bild-Inhalts hilfreich.
  • Im Feld "Keywords" können Sie das Bild mit Schlagworten versehen, allerdings werden diese bisher von TYPO3 in keiner Form weiter genutzt.
  • Im Bereich "Accessibility" finden Sie das Feld "Alternative Text". Dieses setzt im HTML-Code das alt-Attribut des img-Tag. Das ist der Text, der Nutzenden Ihrer Seite angezeigt wird, falls das Bild nicht geladen wird. Das ist aber auch zugleich der Text, der Nutzenden von Screenreadern und Suchmaschinen hilft den Bild-Inhalt zu verstehen, also sowohl für Barrierefreiheit als auch für Suchmaschinenoptimierung sinnvoll.

Im Tab "Access" können Sie einstellen, ob das Bild im Frontend verfügbar ist:

  • Falls Sie den Status eines Bildes von "OK" auf "Pending" oder "Under Review" stellen, erscheint an der Stelle des Bildes ein Text, der auf eine ausstehende Freigabe-Prüfung hinweist.
  • Falls Sie das Häkchen bei "Visible" entfernen, erscheint an Stellen wo das Bild eingebunden wurde stattdessen der Text "Das eingefügte Bild kann nicht angezeigt werden, es wurde in der Dateiverwaltung für die Anzeige auf Webseiten gesperrt." 
  • Beachten Sie: Sowohl nach Änderung des Status, als auch nach Ein- oder Ausblenden des Bildes müssen den Frontend-Cache oder die Caches der betroffenen Seiten löschen, damit sich die Anzeige ändert.

Urheber- / Lizenzvermerke einfügen

Die Lizenzbedingungen von Bildern verlangen vielfach, dass bestimmte Informationen (zum Beispiel oft der Name des Fotografen / der Fotografin, die Art der Lizenz und Ähnliches) am Bild kenntlich gemacht werden. Diese Informationen sollten Sie direkt beim Bild in der Filelist speichern. Dafür sind zwei Felder vorgesehen:

  • "Caption" im Tab "General"
  • "Creator" im Tab "Metadata"

Wenn ein Bild regulär (nicht in Form eines Teaser oder im Main Slider) eingebunden wird, dann werden beide Felder unterhalb der Description eingeblendet. Prüfen Sie, ob damit die Lizenzbedingungen eingehalten werden. Der wesentliche Unterschied besteht darin, dass Felder wie "Description" beim Einfügen in eine Seite überschrieben werden können, aber "Caption" und "Creator" nur direkt in FileList geändert werden können.

Daraus folgt aber auch, dass der Inhalt beider Felder beim normalen Einbinden der Bilder nicht ausgeblendet werden kann. Verwenden Sie die beiden Felder "Caption" und "Creator" deshalb auch nur dann, wenn es Ihre Absicht ist, dass die enthaltenen Informationen jedes Mal beim normalen Einbetten der Bilder angezeigt werden.

 

 

 

Beispiel für Bildunterschriften und Urheberangabe

Der Inhalt des Description Feld wird hier angezeigt und könnte beim Einbinden des Bildes überschrieben werden.

Alle Rechte vorbehalten / All rights reserved (Dies ist die Caption und wäre nur in der Filelist zu ändern)

Foto: Thomas Oliver Moll (Dies ist das Creator Feld und wäre nur in der Filelist zu ändern)

Bilder in Seiten einfügen

Legen Sie an der gewünschten Position innerhalb der Seite ein neues Inhaltselement vom Typ "Images Only" / "Bilder" (aus dem Tab "Typical page content") an. Es öffnet sich eine Dialogbox:

  • Im Tab "General" müssen Sie eine Überschrift für das Bild definieren um das Element im Backend identifizieren zu können. Wenn diese Überschrift nicht im Frontend zu sehen sein soll, dann stellen Sie das Drop-Down-Menü Type auf "Hidden".
vergrößern: Tooltip-Test
  • Im Tab "Images" können Sie über den Button "Add images" bereits hochgeladene Bilder aus der Dateiliste auswählen. Dafür öffnet sich ein Fenster in welchem Sie alle Verzeichnisse und Unterverzeichnisse sehen, auf die Sie Zugriff haben. Klicken Sie auf den Namen eines Ordners um dessen Inhalt zu sehen.
  • Falls Sie das gewünschte Bild noch nicht hochgeladen haben, können Sie im gleichen Tab stattdessen den Button "Select and Upload Files" verwenden um dies nachzuholen.
  • Manchmal ist es sinnvoll ein Bild einzubetten, es aber nicht direkt in der maximal verfügbaren Größe darzustellen. Dafür steht Ihnen im Tab "images" die Option "Enlarge on Click" zur Verfügung, die eine Lightbox-Funktionalität aktiviert: Wenn die Option aktiviert wurde, genügt im Frontend ein Klick auf das Bild um es in Originalgröße anzuzeigen.
vergrößern:
Im Tab "Images" können Sie mit dem Button "Add Image" (1) ein bereits hoch geladenes Bild auswählen. Mit dem Button "Select & upload files" (2) können Sie ein Bild hochladen und direkt auswählen. Wenn Sie unter "Behavior" ein Häkchen für die Funktion "Click to enlarge" (3) setzen, werden Bilder so dargestellt, dass sie nach einem Klick vergrößert werden.

Nachdem Sie nun ein Bild aus der FileList ausgewählt haben, können Sie einzelne Informationen überschreiben. Klicken Sie dazu auf den Pfeil neben der verkleinerten Ansicht des Bildes. Wenn Sie beim Speichern des Bildes die entsprechenden Felder ausgefüllt haben, sind diese bereits vorausgefüllt. Sie können die angezeigten Felder überschreiben. Der Feldname "Caption (Description)" ist hier irreführend: dort finden Sie den Inhalt des Felds "Description" und nicht des hier nicht zu überschreibenden Feld "Caption". Darüber hinaus haben Sie die Möglichkeit das Bild zu verlinken indem Sie das Feld "Link" ausfüllen.

vergrößern:
Mit dem kleinen Pfeil (1) klappen Sie das eigentliche Menü auf. Danach können Sie den Title, den Alt-Text und die Description (irreführend als "Caption (Description)" markiert) bei Bedarf überschreiben. Sie können das Bild mit dem entsprechenden Feld (2) auch direkt verlinken.

Aus der Verwendung des Responsive Design ergibt sich eine wichtige technische Einschränkung: Sie können weder die exakten Abmessungen noch die exakte Position eines Bildes festlegen. 

  • Im Tab "Appearance" / "Erscheinungsbild" stellen Sie im Drop-Down-Menü "Layout" lediglich die Breite des Bildes ein. Das geht nicht durch die Angabe von Pixeln, sondern muss in Prozent der Breite des übergeordneten Elements (in der Regel der Hauptspalte) erfolgen. Die proportionale Höhe wird automatisch berechnet. Sie können zwischen 33, 50, 67 und 100 Prozent wählen.
  • Die Position eines Bildes auf der Seite ist ebenso variabel. Ein Bild das auf einem PC-Bildschirm links neben einem Textblock angezeigt wurde, kann auf einem Smartphone ober- oder unterhalb des Textes erscheinen. In diesem Fall ist schlicht kein Platz vorhanden um Bild und Text lesbar nebeneinander darzustellen.

Verzichten Sie deshalb auf Formulierungen, die sich auf eine konkrete Positionierung eines Bildes beziehen wie “Auf dem Bild links sehen Sie..”.

Eine Kontrolle über Umbrüche im Layout erhalten Sie durch Verwendung des Divider-Inhaltselements.

vergrößern:
Im Tab "Appeareance" wählen Sie vor allem über das Drop-Down-Menü "Layout" aus wieviel Prozent der verfügbaren Breite das Bild einnehmen soll. Die Menü-Elemente unter "Image Alignment" haben als Folge des Responsive Design Ansatz keine Funktion.

Im Tab "Metadata" können Sie das Feld Creator setzen. Weitere Felder in den Tabs "Metadata", "Camera Data" und "Categories" werden von TYPO3 Installationen des RRZK derzeit nicht ausgewertet.

 

Kontakt
Bei Fragen und für eine individuelle Beratung wenden Sie sich bitte an den RRZK-Helpdesk