Teaser-Hintergrundbilder

Für optimale Kontrolle über den Ausschnitt und die Qualität empfehlen wir, Bilder, die Sie als Teaser-Hintergrundbilder verwenden wollen, selbst zu beschneiden und zu skalieren.

Deshalb hier in den ersten beiden Abschnitten Informationen zu den Dimensionen der Bilder und wie TYPO3 damit verfährt.

Sie können Teaser-Hintergrundbilder ohne Teaser-Inhalt auch als reine Dekorationsbilder verwenden.

Und zwar auf allen Seiten gleich oder auf jeder Seite anders. Die Möglichkeiten werden weiter unten im Abschnitt Teaser-Hintergrundbild-Varianten dargelegt.

Dimensionen der Teaser-Hintergrundbilder

Teaser groß

  • Der Rahmen für Teaser-Hintergrundbilder misst 728 x 270 Pixel (B x H).
  • Teaser-Hintergrundbilder werden im Rahmen horizontal und vertikal zentriert platziert.
  • Teaser-Hintergrundbilder werden nicht skaliert.
  • Zu große Teaser-Hintergrundbilder werden von den Rändern her beschnitten.
  • Bei zu kleinen Teaser-Hintergrundbildern sieht man an den Rändern die Hintergrundfarbe.

Teaser klein

  • Der Rahmen für Teaser-Hintergrundbilder ist unterschiedlich breit, abhängig davon, ob wieviele Teaser angezeigt werden:
    • ohne Teaser: 727 x 170 Pixel (B x H)
    • bei 1 Teaser: 495 x 170 Pixel (B x H)
    • bei 2 oder 3 Teaser: 450 x 170 Pixel (B x H)
  • Die Teaser-Hintergrundbilder werden darin rechtsbündig, vertikal zentriert platziert.
  • Wenn erforderlich, werden sie skaliert.

Teaser-Hintergrundbild-Varianten

Drei Varianten des Teaser-Hintergrundbildes sind möglich:

  1. Drei Teaser-Hintergrundbilder, wenn Teaser-Inhalt vorhanden ist
  2. Default-Teaser-Hintergrundbild, wenn kein Teaser-Inhalt vorhanden ist
  3. Seitenabhängige Teaser-Hintergrundbilder, wenn kein Teaser-Inhalt vorhanden ist

Hintergrundbild wenn Teaser vorhanden

Zu Teasertext n gehört auf jeder Seite innerhalb Ihres Webauftritts Teaserbild n.

Sie können durchaus auf jeder Seite andere Teaser darbieten. Es kann auf Seite X Teaser 1 einen anderen Inhalt haben als auf Seite Y. Das Gleiche gilt für Teaser 2 und Teaser 3. Aber das Hintergrundbild zu Teaser 1 wird auf allen Seiten das gleiche sein. Das gilt auch für die Hintergrundbilder zu Teaser 2 und Teaser 3.

Die Teaserbilder liegen im Verzeichnis "layout01INSTITUTE/Img/" und heissen

  • teaser_img_01.jpg
  • teaser_img_02.jpg
  • teaser_img_03.jpg

Die Namen und Speicherort der Teaserbilder sind fest vorgegeben. Überschreiben Sie die vorhandenen Dateien bitte mit Ihren eigenen Teaserbildern.

Hintergrundbild wenn kein Teaser

Es ist allerdings möglich, alle Teaser ohne (sichtbaren) Teaser-Content zu belassen.

In diesem Fall wird im Teaserbereich ein Hintergrundbild angezeigt, das in der institutseigenen CSS-Datei layout01INSTITUTE/Css/base.css vereinbart wurde.

CSS-Deklaration im Auslieferungszustand:

.js #teaser-bar #teaser {
  background: url("../Img/teaser_img_def_800_344.jpg") 50% 50% no-repeat;
}

Der Name der Bilddatei ist also nicht fest vorgegeben. Überschreiben Sie gerne diese Vorbelegung.

Seitenabhängiges Teaser-Hintergrundbild

Sie können seitenabhängige Teaser-Hintergrundbilder vereinbaren. Diese werden dargeboten, wenn kein Teaser-Inhalt vorhanden ist.

Die Bilddateien müssen Unterverzeichnis "layout01INSTITUTE/Img/" liegen und den Dateinamen "teaser_img_def_seitenId.jpg" haben. Dabei ist seitenId die ID der Seite, auf der das Bild dargeboten werden soll.

Beispiel

  • Datei "layout01INSTITUTE/Img/teaser_img_def_1234.jpg"
  • wird auf der Seite mit der ID=1234 automatisch als Hintergrundbild für den Teaserbereich verwendet

Seitenabhängige Teaser-Hintergrundbilder werden nicht auf Unterseiten "vererbt".