Einzelne Bilder im Seiteninhalt:

  • Einzelne Bilder können über den Bild einfügen-Button im Text-Editor oder am einfachsten mit Seiteninhalt Typ "Bilder" / "Text und Bilder" (dann im Reiter 'Bilder') eingefügt werden.
  • Bei "Text mit Bild" ist das Layout wählbar: Bild neben Text rechts/links/oben/unten, mit/ohne Textumfluss etc. Die Abstände zw. Bild und Text werden per CSS festgelegt (Administrator).
  • Die Bilddatei sollte in beiden Fällen immer aus der Dateiliste referiert werden, also weder als Magic-Zauberbild (Editor) noch direkt hochladen (Media). Typo3 erzeugt trotzdem immer ein extra Bild auf temporären Ordner! Um ein Bild zu ersetzen, reicht es also nicht, es in der Dateiliste auszutauschen. sondern es muss immer in den Seiteninhalt neu eingefügt werden! (Ausnahme: Galerie-Plugins)

Bildgrößen:

  • Die Anzeige-Breite (width) von Bildern sollte sich immer am 16-Spaltenraster (grid) im Styleguide von David (pdf Seite 8) orientieren! Daraus ergeben sich folgende Standard-Bildbreiten (Pixel) :
    100 (2 Spalten), 160 (3 Spalten), 220 (4 Spalten), 280 (5 Spalten), 580 (10 Spalten).
  • Achtung: Eine größere Anzeige-Breite als die hochgeladene wird immer unscharf! Optimal sind hochgeladene Bilder mit 580px Breite und weboptimierter < 200KB Speichergröße!
  • Breitere Bilder werden immer automatisch auf 580px verkleinert angezeigt, solche neben dem Text immer auf 280px. Die Bildbreite ist ein Auswahlfeld mit Voreinstellung 280px. Achtung: Leer = 'keine Angabe' bedeutet Originalbildbreite und muss bei jeder Änderung neu ausgewählt werden!
  • Die Anzeige-Höhe (height) von Bildern kann einfach mit der Zuschnittsoption im Reiter 'Erscheinungsbild' reduziert werden (mit variabler Ausschnittswahl) - das gilt dann für alle Bilder dieses Seiteninhalts!

Beschriftung, Verlinkung und Vergrößerung mit Lightbox:

  • Im Seiteninhalt Reiter 'Bilder' in das Feld rechts neben der Bilderliste können Bildunterschriften eingegeben werden. Für Beschriftung auf dem Bild HTML-Tags h1-h6 benutzen: s. Teaserbilder.
  • In das Feld 'Titel' kommt der Text, der beim Mouseover eines Bildes erscheint. Falls das leer ist, wird die Beschriftung angezeigt - ggfs. unschön wg. HTML-Tags!
  • in das Feld 'Links' können als Verweisziel Webadressen bzw. Seiten-IDs aus dem Seitenbaum eingetragen bzw. per Auswahlfenster ausgewählt werden. Achtung: Die Checkbox 'per Klick vergrößern' muss in diesem Fall deaktiviert sein!
  • Wenn die Checkbox 'per Klick vergrößern' aktiviert wird, werden beim anclicken in Frontend alle Bilder dieses Seiteninhalts nacheinander in der hochgeladenen Größe in einer Lightbox angezeigt. Achtung: mit Bildbeschriftung kommen Bilder mehrfach in der Lightbox-Liste vor -  deshalb stattdessen lieber Titelfeld benutzen!
  • Wenn zusätzlich im Reiter 'Erscheinungsbild' im Rahmen-Auswahlfeld oder im Layout-Auswahlfeld 'Lightbox-Galerie' ausgewählt wird, wird nur das 1. Bild des Seiteninhalts angezeigt und beim anclicken im Frontend alle nacheinander in der Lightbox. Optionen: 'Slideshow' mit play/stop-Taste in der Lightbox unten rechts, 'Präsentationsmodus' mit anwählbaren Bild-Nummern unten links. Funktioniert für alle Spalten und Bildbreiten! 

Sonstige Bilder: Logos etc.

  • Teaserbilder für Seitenteaser stehen in der Dateiliste z. B. im Ordner images/teaser und werden in den Seiteneigenschaften zugeordnet: mehr s. Seitenteaser.
  • Subdomain-Logos stehen in der Dateiliste nun unter images/Logos und werden auf der SD-spez. Seite 'Module' in der Randspalte zugeordnet. Sie werden in Originalgröße (d. h. 105px breit) angezeigt und sind immer mit der Startseite der Subdomain verlinkt (außer hier bei INTERN). Achtung: Linkziel nach Kopieren anpassen, Datensatzreferenz nur innerhalb der Subdomain!