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
- Gemäss Layoutvorgaben werden Zweitlogos nicht in der Tablet- und Smartphone-Version angezeigt.
- Auf Inhaltsseiten ohne Header-Bild wird - wenn ein Zweitlogo vorhanden ist - das Nur-Text-Logo der Uni Luzern oberhalb ausgegeben, um Platz zu sparen.
Anleitung für Grafiker
- Das SVG-Logo muss mit dem PNG-Logo deckungsgleich sein (gleiches Seitenverhältnis; gleiche Grösse ist vernachlässigbar, da SVG ja eh ein Vektor-Format ist).
- Es sollte mindestens von jedem Logo eine PNG-Variante existieren. Die SVG-Variante ist gut für Retina-Devices (keine verwaschene Logos). Existiert keine SVG-Variante, sollte die PNG-Version 378 Pixel Breite haben.
- Die Logos dürfen keinen Whitespace rundherum haben, da sie sonst nicht richtig platziert werden. D.h. dass auch die Arbeitsfläche der SVG zugeschnitten werden muss.
- In der SVG Datei muss die Schrift als Pfad abgelegt werden, damit keine andere Schrift als Ersatz verwendet wird.