TYPO3 - Headerbild bestimmen: Unterschied zwischen den Versionen

Anleitung
Anleitung
Informationen
Betriebssystem	Alle
Service	TYPO3
Interessant für	Angestellte, Bereiche und Studierende
HilfeWiki des ZIM der Uni Paderborn

Aktuelle Version vom 15. Oktober 2024, 02:22 Uhr

TYPO3

Allgemeine Informationen

Wenn Sie eine neue Seite erstellen, sind in der Regel ein Headerbild und ein Layout des Kopfbereiches der Seite (Bühne) vorhanden, welche die Seite von einer übergeordneten Seite geerbt hat. Diese Anleitung zeigt Ihnen, wie Sie dies ändern können.

Beispiel für ein Headerbild.

Was ist zu tun?[Bearbeiten | Quelltext bearbeiten]

Seite öffnen → „Seiteneigenschaften bearbeiten“ → Tab „Erscheinungsbild“.
Bühnen-Layout auswählen: Unter „Bühne (Nur diese Seite)“ können Sie zwischen „Kleine Bühne“ (4,75:1 Seitenverhältnis) und „Große Bühne“ (16:9) wählen.
Bild hinzufügen: Klicken Sie auf „Neue Relation erstellen“, um ein Bild auszuwählen. Wählen Sie ein Bild aus einem Ordner (z. B. UpbMedia) oder laden Sie ein eigenes hoch.
Bildoptionen anpassen: Nutzen Sie den „Editor öffnen“, um den Bildausschnitt festzulegen, und fügen Sie einen alternativen Text sowie ggf. weitere Metadaten hinzu.
Speichern.

Schritt-für-Schritt Anleitung[Bearbeiten | Quelltext bearbeiten]

Wählen Sie die Seite aus, die Sie ändern möchten.
Klicken Sie anschließend auf "Seiteneigenschaften bearbeiten".

Öffnen Sie den Tab "Erscheinungsbild".

Scrollen Sie nach unten zu den Einstellungen für "Bühne (Nur diese Seite)"

Wählen Sie das gewünschte Bühnen-Layout aus. Zur Auswahl haben Sie:

Kleine Bühne - Standard - Seitenverhältnis des Bildes ca. 4,75:1
Große Bühne - Besonders hervorzuhebene Webseiten - Seitenverhältnis des Bildes 16:9

Wenn Sie das Layout ändern, muss die Seitenanzeige aktualisiert werden.

Über "Neue Relation erstellen" können Sie ein neues Bild hinzufügen.

Wählen Sie in der linken Spalte den gewünschten Ordner aus.
Wenn Sie keine eigenen Bilder hochladen möchten, finden unter anderem im Ordner UpbMedia passende Bilder.
Wählen Sie anschließend das gewünschte Bild aus.

Klappen Sie das Menü für das neue Bild aus.

Über "Editor öffnen" können Sie den angezeigten Bildausschnitt anpassen.
Metadaten können Sie über "Metadaten dieser Datei anpassen" ändern.

Nach der Auswahl des Headerbildes sollten Sie (für Blinde und Sehbehinderte) einen alternativen Text hinzufügen, sofern dieser nicht – wie hier – bereits zu den Metadaten der Grafikdatei zählt. Auch einen Titel – hier ebenfalls bereits bei den Metadaten vorhanden – können Sie eingeben. Eine Beschreibung/Bildunterschrift wird beim Headerbild im Web nicht angezeigt.
Mehr dazu unter: TYPO3 - Metadaten einfügen

Bei der großen Bühne können Sie zusätzlich einen Untertitel und einen Beschreibungstext ergänzen.

Beispiele[Bearbeiten | Quelltext bearbeiten]

Siehe auch[Bearbeiten | Quelltext bearbeiten]

TYPO3

Bei Fragen oder Problemen wenden Sie sich bitte telefonisch oder per E-Mail an uns:

Tel. IT: +49 (5251) 60-5544 • Tel. Medien: +49 (5251) 60-2821 • E-Mail: zim@uni-paderborn.de

Das Notebook-Café ist die Benutzerberatung des ZIM - Sie finden uns in Raum I0.401

Wir sind zu folgenden Zeiten erreichbar:

	Mo	Di - Fr
Vor-Ort-Support	Geschlossen	Über die Feiertage geschlossen
Telefonsupport	08:30 - 13:00	Über die Feiertage geschlossen

Das ZIM:Servicecenter Medien auf H1 hat aktuell zu folgenden Zeiten geöffnet:

Mo	Di - Fr
08:00 - 16:00	Über die Feiertage geschlossen

@@ Zeile 1: / Zeile 1: @@
-{{Infobox article
+{{article
-| os = Alle
+|type=Anleitung
-| service = Typo3
+|os=Alle
-| targetgroup = Angestellte, Bereiche, Studierende
+|service=Service:Typo3
-| type = Anleitung
+|targetgroup=Angestellte, Bereiche, Studierende
-| disambiguation =
+|hasdisambig=Nein
 }}
+Wenn Sie eine neue Seite erstellen, sind in der Regel ein Headerbild und ein Layout des Kopfbereiches der Seite (Bühne) vorhanden, welche die Seite von einer übergeordneten Seite geerbt hat. Diese Anleitung zeigt Ihnen, wie Sie dies ändern können.
+<br clear=all>
-<!-- Entweder draft mit fertigem Inhalt -->
-{{draft}}
-<!--oder stub und einer Erklärung, was hier passieren soll-->
+Beispiel für ein Headerbild.
-{{stub}}
+[[Datei:Typo3-headerbild-01.png|links|mini|ohne|850px|Headerbild]]
+<br clear=all>
-<!-- Folgend der empfohlene Seitenaufbau -->
+== Was ist zu tun? ==
-Kurzer Einleitungstext
+* '''Seite öffnen''' → „Seiteneigenschaften bearbeiten“ → Tab „Erscheinungsbild“.
+* '''Bühnen-Layout auswählen:''' Unter „Bühne (Nur diese Seite)“ können Sie zwischen „Kleine Bühne“ (4,75:1 Seitenverhältnis) und „Große Bühne“ (16:9) wählen.
+* '''Bild hinzufügen:''' Klicken Sie auf „Neue Relation erstellen“, um ein Bild auszuwählen. Wählen Sie ein Bild aus einem Ordner (z. B. UpbMedia) oder laden Sie ein eigenes hoch.
+* '''Bildoptionen anpassen:''' Nutzen Sie den „Editor öffnen“, um den Bildausschnitt festzulegen, und fügen Sie einen alternativen Text sowie ggf. weitere Metadaten hinzu.
+* '''Speichern.'''
-== Was ist zu tun? ==
+== Schritt-für-Schritt Anleitung ==
-* Stichpunktartige Auflistung
-* aller Arbeitsschritte
-== Schritt für Schritt Anleitung ==
+[[Datei:Typo3-headerbild-02.png|links|mini|ohne|450px]]
-Um ein Headerbild einzufügen bzw. ein vorhandenes Headerbild zu ersetzen, legen Sie - falls noch nicht vorhanden - unter "Dateiliste" einen Ordner für das Headerbild oder die Headerbilder an, laden eine Grafik oder mehrere Grafiken im Format 944 x 295 Pixel hoch und editieren die Metadaten, damit dem Besucher der Webseite später Informationen zum Bildinhalt und zur Urheberin / zum Urheber zur Verfügung stehen. Der Name des Ordners für die Headerbilder - hier "grossbilder" - sollte erkennen lassen, was der Ordner enthält, und könnte z. B. auch "headerbilder" oder - bei Anlage eines Sliders - "slider" sein.
+<br>
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 1.jpg|Abbildung 1|left]]
+* Wählen Sie die Seite aus, die Sie ändern möchten.
+* Klicken Sie anschließend auf '''"Seiteneigenschaften bearbeiten"'''.
 <br clear=all>
+[[Datei:Typo3-headerbild-03.png|links|mini|ohne|450px]]
+<br>
+* Öffnen Sie den Tab '''"Erscheinungsbild"'''.
+<br clear=all>
-In diesem Beispiel sind fünf Grafiken hochgeladen worden, die von Matthias Groppe stammen und sich alle auf das internationale Jahr des Lichts beziehen. Bei komplexeren Bildern, z. B. bei Gruppenfotos mit namentlich bekannten Personen, könnte die "Beschreibung" natürlich umfangreicher und konkreter sein. Vergessen Sie nicht, das Dokument nach dem Einfügen der Metadaten zu speichern.
+[[Datei:Typo3-headerbild-04.png|links|mini|ohne|450px]]
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 2.jpg|Abbildung 2|left]]
+<br>
+* Scrollen Sie nach unten zu den Einstellungen für '''"Bühne (Nur diese Seite)"'''
 <br clear=all>
-Platzieren Sie nun in der Ansicht "Seite" den Mauszeiger auf der Seite "Seite 1" und rufen Sie über die rechte Maustaste "Bearbeiten" auf:
+Wählen Sie das gewünschte Bühnen-Layout aus. Zur Auswahl haben Sie:
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 3.jpg|Abbildung 3|left]]
+* Kleine Bühne - Standard - Seitenverhältnis des Bildes ca. 4,75:1
+* Große Bühne - Besonders hervorzuhebene Webseiten - Seitenverhältnis des Bildes 16:9
+<br>
+[[Datei:Typo3-headerbild-06.png|links|mini|ohne|450px]]
+<br>
+* Wenn Sie das Layout ändern, muss die Seitenanzeige aktualisiert werden.
 <br clear=all>
-Wechseln Sie unter "Erscheinungsbild / Medienelement / Modus" von "Standard" zu "Bild". Wenn "Standard" gewählt ist, richtet sich die Anzeige des Bildes oder Sliders im Header der Seite nach der Einstellung, die die übergeordnete Seite aufweist. Wenn Sie ein anderes Headerbild wünschen, müssen Sie also "Bild" wählen.
+[[Datei:Typo3-headerbild-05.png|links|mini|ohne|450px]]
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 4.jpg|Abbildung 4|left]]
+<br>
+* Über '''"Neue Relation erstellen"''' können Sie ein neues Bild hinzufügen.
 <br clear=all>
-Klicken Sie anschließend auf "Neue Relation erstellen":
+[[Datei:Typo3-headerbild-07.png|links|mini|ohne|450px]]
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 5.jpg|Abbildung 5|left]]
+<br>
+* Wählen Sie in der linken Spalte den gewünschten Ordner aus.
+* Wenn Sie keine eigenen Bilder hochladen möchten, finden unter anderem im Ordner ''UpbMedia'' passende Bilder.
+* Wählen Sie anschließend das gewünschte Bild aus.
 <br clear=all>
+[[Datei:Typo3-headerbild-09.png|links|mini|ohne|450px]]
+<br>
+* Klappen Sie das Menü für das neue Bild aus.
+# Über '''"Editor öffnen"''' können Sie den angezeigten Bildausschnitt anpassen.
+# Metadaten können Sie über '''"Metadaten dieser Datei anpassen"''' ändern.
+<br clear=all>
-Daraufhin öffnet sich ein neues Fenster mit dem Verzeichnisbaum. Klicken Sie erforderlichenfalls auf den Ordner "grossbilder", um ihn zu öffnen. Markieren Sie im Ordner "grossbilder" mit einem Häkchen die Grafik, die Sie als Headerbild nutzen möchten, und klicken Sie danach auf "Auswahl importieren". Falls Sie mehrere Grafiken markieren, wird im Modus "Bild" nur die oberste markierte Grafik importiert.
+<bootstrap_alert color=info>
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 6.jpg|Abbildung 6|left]]
+Nach der Auswahl des Headerbildes sollten Sie (für Blinde und Sehbehinderte) einen alternativen Text hinzufügen, sofern dieser nicht – wie hier – bereits zu den Metadaten der Grafikdatei zählt. Auch einen Titel – hier ebenfalls bereits bei den Metadaten vorhanden – können Sie eingeben. Eine Beschreibung/Bildunterschrift wird beim Headerbild im Web nicht angezeigt.
-<br clear=all>
+<br>
+Mehr dazu unter: [[TYPO3 Metadaten einfuegen]]
+</bootstrap_alert>
-Unterhalb von "Neue Relation erstellen" wird jetzt das ausgewählte Bild mit den Metadaten angezeigt. Unter "Titel" und "Beschreibung (Bildunterschrift)" sind die zuvor eingetragenen Metadaten bereits voreingestellt. Sie können sie einfach so belassen und ohne weiteres eigenes Zutun übernehmen, sie bei Bedarf aber auch überschreiben. Die Metadaten zu "Urheber" werden dagegen hier nicht angezeigt und können hier nicht geändert werden. In der Regel ist das aber auch nicht notwendig oder sinnvoll. Obwohl der Button "Neue Relation erstellen" zu sehen ist, können Sie über diesen Button im Modus "Bild" keine zweite Grafik einfügen. Um das Einfügen einer neuen Grafik möglich zu machen, müssen Sie vorher mit dem Mauszeiger auf die bereits eingefügte Grafik gehen und den Datensatz mittels des dann erscheinenden Abfalleimer-Symbols löschen.
+[[Datei:Typo3-headerbild-12.png|links|mini|ohne|450px]]
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 7.jpg|Abbildung 7|left]]
+<br>
+* Bei der großen Bühne können Sie zusätzlich einen Untertitel und einen Beschreibungstext ergänzen.
 <br clear=all>
+==Beispiele==
+[[Datei:Typo3-headerbild-08.png|links|mini|ohne|850px|Kleine Bühne]]
+<br clear=all>
-Wenn Sie nun das Dokument speichern und als Webseite anzeigen lassen, erscheint im Header das ausgewählte Bild. Wenn Sie den Mauszeiger auf dem Bild platzieren, wird ein Tooltip sichtbar, in dem Titel und Urheberin/Urheber des Bildes genannt werden. Über das von einem Kreis umschlossene "i" rechts oben im Bild können Sie zusätzlich die "Beschreibung" abrufen, die allerdings in diesem Beispiel mit dem "Titel" identisch ist:
+[[Datei:Typo3-headerbild-11.png|links|mini|ohne|850px|Große Bühne ohne Untertitel und Beschreibung]]
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 8.jpg|Abbildung 8|left]]
 <br clear=all>
+[[Datei:Typo3-headerbild-10.png|links|mini|ohne|850px|Große Bühne mit Untertitel und Beschreibung]]
+<br clear=all>
-[[Datei:Screenshot Webanwendungen Typo3 Headerbild bestimmen 9.jpg|Abbildung 9|left]]
-<br clear=all>
-== Siehe auch ==
+==Siehe auch==
-Weiter interessante Artikel verlinken
+* [[TYPO3]]