TYPO3 - Mediendatenbank
Diese Anleitung richtet an alle, die die Mediendatenbank aus TYPO3 nutzen, nicht aus destination.data.
Was und wofür ist die Mediendatenbank?
Die Mediendatenbank stellt in TYPO3 den zentralen Ablageort für alle Dateien dar, die auf der Website genutzt werden sollen. Sie beinhaltet also Bilder, Videos, PDFs, Audio Dateien uvm..
Richtig genutzt bietet sie vielerlei Möglichkeiten zur Strukturierung und Gestaltung der Mediendateien.
Aufbau und Bedienung
Wo ist sie zufinden und ein grober Überlick
Länge 50 Sekunden
Die ideale Struktur
Eine ideale Struktur ist individuell, daher gilt es hier den eigenen Weg zu finden. Gleiches gilt natürlich auch für die Benennung der Dateien. Hier dennoch ein paar best practices.
Die Seitenbaum Methode
Lege einen Ordner je geplanter Landingpage an und ordne sie hierarchisch so wie sie auch im Seitenbaum liegen. Dadurch lassen sich bei der Seitenerstellung die gewünschten Dateien schnell finden und später schnell austauschen. Jedoch wird die Ordnerstruktur schnell sehr groß.
Beispieldateiname: "Headerbild Startseite"; "Kachelwand Touren Startseite"; "Zweiseitige Bühne Straßenfest Startseite"
Die Verwendungszweck Methode
Ein Ordner pro Dateityp und Anwendungsfall. Hält die Ordnerstruktur klein und ermöglicht ein schnelles abrufen weiterer Alternativen in der Mediendatenbank, um so leichter zwischen Optionen auswählen zu können. Allerdings wird es auch schnell unübersichtlich, wenn die Dateinamen nicht perfekt gepflegt sind.
Beispiel Ordner: "Headerbilder"; "Kachelbilder"; "Halbseitige Hintergründe"; "Hintergrundvideos"
Beispiel Dateinamen: "Startseite Sommer Strand"; "Buchungsseite Hotel Sonnenschein"
Seitenbaum+Verwendungszweck
Hier werden die beiden oberen Varianten kombiniert. Man erstellt erst einen Ordner für die Landingpage und dann darunter hierarchisch einen je Verwendungszweck. Vorteil ist hier das es maximal sortiert ist. Nachteil, dass die Ordnerstruktur schnell sehr aufgeblasen wird und das häufige wechseln der Ordner die Bearbeitung verzögern kann.
Ordner erstellen
ACHTUNG: Beim umbenennen, löschen und verschieben von Ordnern, kann es zu Ausgabeproblemen kommen. Achte darauf, dass nachdem die Änderung vorgenommen wurde, die Ausgabe auf den entsprechenden Seiten weiterhin stimmt.
Länge 52 Sekunden
Dateien hochladen
Wie müssen/dürfen meine Dateien sein?
Unterstützte Dateiformate:
Bilder: JPEG, PNG, GIF, TIFF, BMP, SVG
Audio: MP3, WAV, OGG
Video: MP4, WebM, Ogg, FLV
Dokumente: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, CSV, RTF, TXT, SQL, HTML, JS, CSS
Archivdateien: ZIP, TAR, GZ, BZ2
Best practices:
Bilder:
Dateiformat: JPEG für Fotos, PNG für Transparenz.
Kompression: Reduziere die Dateigröße mit Kompressions-Tools. Hier ist ein best practice tinyjpg.com
Auflösung: Header 2560px breit, kleiner Bilderbühnen ca. 1080px breit
Bilder skalieren: Lade das Bild vom Format passend zum Anwendungszweck. Querformat Bilder für Querformatbühnen, Hochformat für Hochfortmat.
Videos:
Dateiformat: Verwende idealerweise MP4
Kompression: Reduziere die Dateigröße mit Kompressions-Tools. Best practice ist hier VLC Media Player.
Auflösung: Für Headervideos empfiehlt sich mindestens FullHD (1920x1080px)
Bitrate: Wähle eine ausgewogene Bitrate. Diese variiert je nach Video, hier ggf. etwas ausprobieren, was noch gut aussieht aber die Datei nicht zu groß macht.
Codec: H.264
Dateigröße prüfen: Dateigröße unter 10MB
Länge: Meistens reichen für Headerbühnen schon 10 Sekunden
Audio:
Dateiformat: MP3
Upload
Länge 32 Sekunden
Youtube/Vimeo Videos hinzufügen
In der Mediendatenbank lassen ebenfalls Youtube und Vimeo Videos hinterlegen, welche dann in den Bühnen ausgewählt werden können. Um diese hinzuzufügen, gehe wie folgt vor:
Wir starten in dem Ordner der Mediendatenbank, wo es hinzugefügt werden soll.
1. Drücke oben auf "Neu"
2. Scrolle ggf. etwas runter und gib den Link zum Video ist das Feld unter "URL der Quelldatei" ein.
3. Drücke "Medien hinzufügen".
Metadaten öffnen
Länge 26 Sekunden
Welche Felder für was?
SEO-Pflichtfelder und allgemein relevante Felder sind gefettet.
Allgemein:
- Bildname: Dateiname des Bildes
- Titel: Titel des Bildes. Enthält grundlegende Informationen zum Bild.
- Beschreibung: Beschreibung des Bildes.
- Panorama: Wenn das Bild eine 360 Grad / Panorama Aufnahme ist muss hier die Checkbox aktiviert werden
- Alternativer Text: Text der die Barrierefreiheit unterstützt. Dieser wird bspw. von Vorleseprogrammen vorgelesen.
- Bildunterschrift: In manchen Bühnen beim Mouseover sichtbar.
- als Download: Sofern das Bilddownloadmodul verhanden ist aktiviert man hier den Download dafür.
Metadaten:
- Urheberrecht: Urheber des Bilds/der Datei
- Land: Name des Staats
- Region: Regionsname
- Stadt: Stadtname
- Breitengrad: Geografische Einheit
- Längengrad: Geografische Einheit
Kameradaten:
-> nicht relevant
Zugriff:
- Sichtbar: Aktiviert oder deaktiviert das Bild auf allen Seiten, wo es eingepflegt wurde.
Bildzuschnitt und Fokuspunkt setzen
Als letzte Optimierung kann ein Bild in TYPO3 noch zugeschnitten und der Fokuspunkt gesetzt werden.
Länge 47 Sekunden
Bestehende Datei/Bild ersetzen
Wenn ein Bild/eine Datei auf allen Seiten auf denen es/sie eingebunden ist gleichzeitig getauscht werden soll, bietet TYPO3 dafür eine Funktion. Gehe dafür wie folgt vor:
Starte in der Mediendatenbank in dem Ordner in dem die Datei liegt.
Hinweis:
Bevor eine Datei ersetzt wird, sollte sicher gegangen werden, ob die Stellen in denen sie eingebunden ist, auch sinnvoll für die neue ist. Um herauszufinden, wo die Datei hinterlegt ist, kann dies mithilfe der Ref Zahl angezeigt werden.
1. Zu finden ist diese in der Übersicht des Ordners, rechts.
2. Es öffnet sich ein Pop Up. Scrolle nach unten. Dort ist eine Liste aller eingebunden Seiten.
Ersetzen
1. Klicke auf die drei Punkte rechts bei der Datei.
2. Wähle "Ersetzen".
3. Entscheide ob der Dateiname erhalten bleiben soll und klicke anschließend auf "Durchsuchen"
4. Es sollte sich nun der Dateibrowser des PC/Macs öffnen. Wähle die Datei mit der die bestehende ersetzt werden soll aus und bestätige.
5. Anschließend sollte der Pfad nun in der "Neue Datei auswählen" Zeile stehen. Drücke nun "Ersetzen".