Inhaltsverzeichnis

Zweitlogos

Zweitlogos können per TypoScript Constants definiert werden und werden unterhalb des Logos ausgegeben und auf die Unterseiten vererbt.

Zweitlogos können zudem verlinkt werden, z.B. mit der Einstiegsseite einer Abteilung, die ein Zweitlogo hat.

Die Definition per TypoScript sieht wie folgt aus:

visol.page {
  subpageLogoName = hscl
  subpageLogoDescription = Hochschulsport Campus Luzern
  subpageLogoTypolinkParameter = 1257
}

Mit dieser Konfiguration wird unterhalb des Uni-Logos ein Container erzeugt, der über die CSS-Klasse „logo_hscl“ das Logo lädt. Für Screenreader wird zudem die Beschreibung des Logos ergänzt. Ist eine PID gesetzt, wird das Logo in einen Link gewrappt.

Ein Logo hinzufügen

Um ein neues Logo nutzen zu können, muss dieses im Ordner

EXT:userunilutemplate/Resources/Public/Images/SubpageLogos/

gespeichert werden. Für die optimale Darstellung auf Retina-Devices sollte das Logo in einer SVG- und PNG-Version vorliegen (PNG = Fallback für nicht SVG-fähige Browser). Danach muss das CSS für die Logos definiert werden:

EXT:userunilutemplate/Resources/Private/Stylesheets/subpagelogo.less:

.logo__hscl {
	background-image: url('@{subpageLogoPath}/hscl.svg');
	padding-bottom: (66 / 200) * 100%;
}

html.no-svg .logo__hscl {
	background-image: url('@{subpageLogoPath}/hscl.png');
}

Da die Logos wie der Rest der Seite responsive sind, wird für die Höhenangabe das padding-bottom verwendet. Damit das Logo proportional ist, muss das padding-bottom aus Höhe und Breite berechnet werden:

padding-bottom: (Höhe / Breite) * 100%;

Zudem wird für nicht-SVG-fähige Browser die PNG-Variante definiert. Liegt das Logo nur als PNG vor, fällt diese Anweisung weg und das Logo wird von Beginn weg nur als PNG definiert.

Design-Hinweise

Anleitung für Grafiker