Dateiformate

Der wirHub komprimiert Bilder nicht automatisch. Für eine optimale Performance solltest du daher ein paar Dinge beim Erstellen von Medieninhalten beachten, die hier aufgelistet sind.

Schnelleinstieg

Bilder

Bilder, die in den Smart-Blocks hinterlegt werden, werden nicht automatisch komprimiert. Redakteure müssen daher selbst auf die Dateigröße achten.

Wir empfehlen:

PNG, JPG, SVG oder GIF (besser WEBP)
Format > Wenn kein Foto involviert dann als SVG, hierbei bitte Schrift in Pfade umwandeln und exportiert das SVG mit der Dezimalstelle: 3 (Illustrator)
Format > Wenn mit Foto dann JPG
Format > Wenn transparenter Hintergrund dann PNG
kleiner als 1 MB
für Web optimiert speichern, z. B. via Photoshop Export oder kostenlose Tools wie TinyPNG

Und folgende Pixelmaße:

Smart-Block Bühne – Startseite: 1920 x 1080px
Smart-Block Bühne – Unterseiten: 1920 x 680px
Smart-Block Bild: 1140px breit / Höhe je nach gewünschtem Format
Smart-Block Kapitel Teaser: 823 x 574px
Smart-Block Ansprechperson: 150 x 150px

Videos

Damit Videos in allen Browsern abgespielt werden können empfehlen wir die Videos in

MP4 mit H.264 Codec und 720px (1280 x 720px) oder 1080px (1920 x 1080px)

zu verwenden. Außerdem sollte für den Fall, dass das Video nicht abgespielt werden kann, ein Vorschaubild in ebenfalls 1920 x 1080px hinterlegt werden.

Anhänge

Hier kann prinzipiell jedes Dateiformat hinterlegt werden. Für die folgenden Formate werden automatisch Vorschaubilder angelegt:

JPG, PNG, SVG, docx, ppt, pdf

Für alle anderen Formate können manuell Vorschaubilder gepflegt werden. Grundsätzlich würde jedes Format funktionieren. Empfehlen würden wir aber JPG, 1:1 oder 4:3 bzw. 16:9.
Und natürlich für Web optimiert und möglichst kleiner als 1 MB.

Icons für die Icon Library

Icons müssen in der Icon Library als SVG hinterlegt werden.
Damit die Funktion des Einfärbens in andere Farben problemlos funktioniert, muss Folgendes beachtet werden:

1. Icon anlegen in Illustrator:

Die Icons bestehen aus einem zusammengesetzten Pfad
Konturen sind in Konturlinien umgewandelt
die Farbfelder sind aufgeräumt (z. B. nicht zwei Farbwerte für einen Blauton)
Text ist in Konturen umgewandelt
Bilder sind nicht enthalten
Illustrator-Bearbeitungsfunktionen sind ausgestellt
Dateinamen so wie es später im Frontend als Name angezeigt werden soll

2. SVG speichern:

Datei/Speichern unter/Format: SVG (svg)
Mehr Optionen einblenden
SVG-Optionen analog Screenshot anpassen:
- SVG-Profile: SVG 1.1
- Text: In Konturen umwandeln
- Bildposition: Beibehalten
- CSS-Eigenschaften: Präsentationsattribute
- Dezimalstellen: 3
- Kodierung: Unicode (UTF-8)
- Responsiv: Checkbox anklicken

Platzhalter für Icon Library

1. Platzhalter anlegen:
Platzhalter-Icons ebenfalls analog der Anleitung oben anlegen und als SVG speichern.

2. Platzhalter mit Text-Editor anpassen:
Die SVGs müssen mit Inline Styles geschrieben werden, d. h. sie brauchen „paths“ mit je einem „fill“ (dort müssen die richtigen HEX-Werte hinterlegt sein). Dafür das SVG mit dem Text-Editor öffnen und die Formen (<rect und/oder <circle) in <path umbenennen und direkt dahinter fill="#000000" mit dem entsprechenden HEX-Code ergänzen.

3. Farbe in der Icon Library hinterlegen:
Platzhalter-Icons unter „Einstellungen“ im Smart-Tool unter „Farben“ hinzufügen.

Beispiele:

Animationen

JSON-Dateien können in diesem Smart-Block mit Hilfe des von Airbnb entwickelten Lottie-Frameworks hinterlegt werden.

Lottie-Plugin

Audios

Hier können mp3-Dateien hinterlegt werden.