Cookies helfen uns bei der Bereitstellung des IMT HilfeWikis. Bei der Nutzung vom IMT HilfeWiki werden die in der Datenschutzerklärung beschriebenen Cookies gespeichert.Weitere Informationen

TYPO3 Slider erstellen: Unterschied zwischen den Versionen

IMT HilfeWiki - das Wiki
Wechseln zu:Navigation, Suche
K (Textersetzung - „{{Infobox article“ durch „{{article“)
 
(3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
{{article
 
{{article
| os = Alle
+
|type=Anleitung
| service = Typo3
+
|os=Alle
| targetgroup = Angestellte, Bereiche, Studierende
+
|service=Meta:Typo3
| type = Anleitung
+
|targetgroup=Angestellte, Bereiche, Studierende
| disambiguation =  
+
|hasdisambig=Nein
 
}}
 
}}
 +
Um in Typo3 einen '''Slider (Bilderfolge, Slideshow)''' für den Header einer Seite zu erstellen, müssen Sie zunächst mehrere geeignete Bilder im '''Format 944 x 295 Pixel''' hochladen und die Metadaten editieren, damit dem Besucher der Webseite später Informationen zum Bildinhalt und zur Urheberin / zum Urheber zur Verfügung stehen.
  
<!-- Entweder draft mit fertigem Inhalt -->
+
Der Name des Ordners für die Sliderbilder sollte erkennen lassen, was der Ordner enthält, und könnte z. B. einfach "Slider" sein. Falls noch kein eigener Ordner für die Sliderbilder existiert, sollten Sie einen neuen Ordner erstellen, wie in der Anleitung [[TYPO3 Ordner anlegen]] beschrieben. Laden Sie anschließend Grafikdateien hoch und editieren Sie die Metadaten, wie in den Anleitungen
{{draft}}
+
* [[TYPO3 Dateien hochladen]],
 
+
* [[TYPO3 Metadaten einfuegen]]
<!--oder stub und einer Erklärung, was hier passieren soll-->
+
* [[TYPO3 Headerbild bestimmen]]
{{stub}}
+
<br>
 
+
beschrieben.
<!-- Folgend der empfohlene Seitenaufbau -->
+
<br clear="all">
Kurzer Einleitungstext
 
  
 
== Was ist zu tun? ==
 
== Was ist zu tun? ==
* Stichpunktartige Auflistung
+
* Slider-Ordner anlegen
* aller Arbeitsschritte
+
* Datensatz erstellen
 +
* Einstellungen vornehmen
 +
* Slider in Webseite einbinden
 +
<br clear=all>
  
 
== Schritt für Schritt Anleitung ==
 
== Schritt für Schritt Anleitung ==
Um in Typo3 einen Slider (Bilderfolge, Slideshow) für den Header einer Seite zu erstellen, müssen Sie zunächst mehrere geeignete Bilder im Format 944 x 295 Pixel hochladen und die Metadaten editieren, 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 Sliderbilder sollte erkennen lassen, was der Ordner enthält, und könnte z. B. einfach "slider" sein. Falls noch kein eigener Ordner für die Sliderbilder existiert, sollten Sie einen neuen Ordner erstellen, wie in der Anleitung [[TYPO3 Ordner anlegen]] beschrieben. Laden Sie anschließend Grafikdateien hoch und editieren Sie die Metadaten, wie in den Anleitungen [[TYPO3_Dateien_hochladen]], [[TYPO3_Metadaten_einfügen]] und [[TYPO3_Headerbild_bestimmen]] beschrieben.
+
=== Datensatz "Slider" erstellen ===
 
+
Erstellen Sie nun in der Ansicht '''"Liste"''' mit Hilfe eines Rechtsklicks eine neue Seite des Typs '''"Ordner"'''. Diese Seite soll die Angaben zu den verschiedenen Slidern enthalten und kann deshalb ebenfalls einfach "Slider" genannt werden:
Erstellen Sie nun in der Ansicht "Liste" eine neue Seite des Typs "Ordner". Diese Seite soll die Angaben zu den verschiedenen Slidern enthalten und kann deshalb ebenfalls einfach "slider" genannt werden:
+
[[Datei:TYPO3 Slider1.png|links|mini|ohne|700px]]
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 1.jpg|Abbildung 1|left]]
 
<br clear=all>
 
 
 
 
 
Erstellen Sie danach auf der Seite "slider" einen neuen Datensatz. Eventuell ist es dazu erforderlich, noch einmal auf "Liste" zu klicken, damit das Symbol "Neuen Datensatz erstellen" auftaucht:
 
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 2.jpg|Abbildung 2|left]]
 
 
<br clear=all>
 
<br clear=all>
  
  
Nach dem Klick auf den Button "Neuen Datensatz erstellen" werden Ihnen verschiedene Möglichkeiten zur Auswahl angezeigt. Klicken Sie auf "Dateisammlung" unter "Systemdatensätze":
+
Erstellen Sie danach auf der Seite "Slider" einen neuen Datensatz, indem Sie auf das Icon klicken. Eventuell ist es dazu erforderlich, noch einmal auf "Liste" zu klicken, damit das Symbol "Neuen Datensatz erstellen" auftaucht:
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 3.jpg|Abbildung 3|left]]
+
[[Datei:TYPO3 Slider2.png|links|mini|719x719px]]
 
<br clear=all>
 
<br clear=all>
  
  
Sie werden daraufhin aufgefordert, einen Titel für die neue Dateisammlung auf der Seite "slider" zu vergeben, und können über "Neue Relation erstellen" die Grafikdateien für den Slider auswählen.
+
Nach dem Klick auf den Button "Neuen Datensatz erstellen" werden Ihnen verschiedene Möglichkeiten zur Auswahl angezeigt. Klicken Sie auf '''"Dateisammlung"''' unter "Systemdatensätze":
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 4.jpg|Abbildung 4|left]]
+
[[Datei:TYPO3 Slider3.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Geben Sie der Dateisammlung einen Namen, z. B. "Slider 1". Nach einem Klick auf den Button "Neue Relation erstellen" öffnet sich ein neues Fenster mit dem Verzeichnisbaum. Klicken Sie erforderlichenfalls auf den Ordner "slider", um ihn zu öffnen. Markieren Sie im Ordner "slider" mit einem Häkchen die Grafiken, die Sie für den Slider nutzen möchten, und klicken Sie danach auf "Auswahl importieren".
+
Sie werden daraufhin aufgefordert, einen '''Titel''' für die neue Dateisammlung auf der Seite "Slider" zu vergeben, und können über '''"Neue Relation erstellen"''' die Grafikdateien für den Slider auswählen.
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 5.jpg|Abbildung 5|left]]
+
[[Datei:TYPO3 Slider4.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Unterhalb von "Neue Relation erstellen" werden jetzt das ausgewählten Bilder 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.
+
Geben Sie der Dateisammlung einen Namen, z. B. "Slider ". Nach einem Klick auf den Button '''"Neue Relation erstellen"''' öffnet sich ein neues Fenster mit dem Verzeichnisbaum. Klicken Sie  auf den Ordner "Slider", um ihn zu öffnen. Markieren Sie im Ordner "Slider" mit einem Häkchen die Grafiken, die Sie für den Slider nutzen möchten, und klicken Sie danach auf das '''"+"'''-Icon.
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 6.jpg|1110px|Abbildung 6|left]]
+
[[Datei:TYPO3 Slider6.png|links|mini|793x793px]]
 
<br clear=all>
 
<br clear=all>
  
  
Sie können die Bildauswahl bei Bedarf noch verändern: Sie können einzelne Bilder über die entsprechenden Symbole verbergen (Symbol Glühbirne) oder löschen (Symbol Abfalleimer) oder über das Symbol "Dieses Objekt verschieben" verschieben.
+
* Unterhalb von "Neue Relation erstellen" werden jetzt das ausgewählten Bilder mit den Metadaten angezeigt.
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 7.jpg|1110px|Abbildung 7|left]]
+
* 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.
 +
[[Datei:TYPO3 Slider7.png|links|mini|809x809px]]
 
<br clear=all>
 
<br clear=all>
  
 
+
==== Weitere Einstellungen ====
Um z. B. das zweite Bild in der Bilderfolge zum Eingangsbild des Sliders zu machen, platzieren Sie den Mauszeiger auf dem genannten Symbol, halten die linke Maustaste gedrückt, ziehen das Bild nach oben und legen es oberhalb des vormals ersten Bildes ab:
+
* Sie können die Bildauswahl bei Bedarf noch verändern: Sie können einzelne Bilder über die entsprechenden Symbole verbergen (Symbol Schieber) oder löschen (Symbol Abfalleimer) oder über das Symbol "Dieses Objekt verschieben (drei Striche)" verschieben.
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 8.jpg|Abbildung 8|1110px|left]]
+
** Um z. B. das zweite Bild in der Bilderfolge zum Eingangsbild des Sliders zu machen, platzieren Sie den Mauszeiger auf dem genannten Symbol, halten die linke Maustaste gedrückt, ziehen das Bild nach oben und legen es oberhalb des vormals ersten Bildes ab.
 +
[[Datei:TYPO3 Slider8.png|links|mini|551x551px]]
 
<br clear=all>
 
<br clear=all>
  
  
Die Bilderfolge wird nun mit dem vormals zweiten Bild eröffnet. Speichern und schließen Sie das Dokument, wenn Sie mit der Abfolge der Bilder zufrieden sind:
+
Speichern und schließen Sie das Dokument, wenn Sie mit der Abfolge der Bilder zufrieden sind:
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 9.jpg|1110px|Abbildung 9|left]]
+
[[Datei:TYPO3 Slider9.png|links|mini|555x555px]]
 
<br clear=all>
 
<br clear=all>
  
  
In der Ansicht "Liste" werden nun die Seite "slider" und die Dateisammlung "Slider 1" angezeigt. Über "Neuen Datensatz erstellen" können Sie bei Bedarf weitere Slider erstellen, so dass Sie dann zwischen verschiedenen Slidern wählen können.
+
In der Ansicht "Liste" werden nun die '''Seite "Slider"''' und die '''Dateisammlung "Slider"''' angezeigt. Über '''"Neuen Datensatz erstellen"''' können Sie bei Bedarf weitere Slider erstellen, so dass Sie dann zwischen verschiedenen Slidern wählen können.
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 10.jpg|Abbildung 10|left]]
+
[[Datei:TYPO3 Slider10.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
 
+
=== Slider in die Webseite einbinden ===
 
Um den erstellten Slider in die Webseite einzubinden, rufen Sie die Seite - hier "Seite 1 - zur Bearbeitung über "rechte Maustaste / Bearbeiten" auf:
 
Um den erstellten Slider in die Webseite einzubinden, rufen Sie die Seite - hier "Seite 1 - zur Bearbeitung über "rechte Maustaste / Bearbeiten" auf:
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 11.jpg|Abbildung 11|left]]
+
[[Datei:TYPO3 Slider11.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Unter "Erscheinungsbild /Medienelement" wählen Sie als Modus "Slider". Anschließend klicken Sie zur Auswahl des Sliders auf "Dateisammlung" oder auf "Datensätze durchblättern" - das Ergebnis ist das gleiche.
+
Unter "Erscheinungsbild /Medienelement" wählen Sie als '''Modus "Slider"'''. Anschließend klicken Sie zur Auswahl des Sliders auf '''"Dateisammlung"'''.
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 12.jpg|1110px|Abbildung 12|left]]
+
[[Datei:TYPO3 Slider12.png|links|mini|ohne|700px]]
 
<br clear=all>
 
<br clear=all>
  
  
Es öffnet sich ein Fenster mit dem Seitenbaum. Klicken Sie auf das Dreieck rechts neben der Ordner-Seite "slider", damit die Datensätze der Seite angezeigt werden:
+
[[Datei:TYPO3 Slider13.png|links|mini|459x459px]]
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 13.jpg|1110px|Abbildung 13|left]]
+
* Es öffnet sich ein Fenster mit dem Seitenbaum. Klicken Sie auf den gewünschten Ordner.
 +
* Klicken Sie auf den Namen der Dateisammlung, die Sie als Slider nutzen möchten - hier '''"Slider"'''. Klicken Sie anschließend auf das '''+'''.
 
<br clear=all>
 
<br clear=all>
  
 
+
'''"Slider"''' wird nun unter "Slider-Bilder" aufgeführt. Vergessen Sie nicht, das Dokument zu speichern.
Klicken Sie auf den Namen der Dateisammlung, die Sie als Slider nutzen möchten - hier "Slider 1":
+
[[Datei:TYPO3 Slider14.png|links|mini|ohne|700px]]
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 14.jpg|Abbildung 14|1110px|left]]
 
 
<br clear=all>
 
<br clear=all>
  
 
+
=== Webseitenansicht ===
"Slider 1" wird nun unter "Slider-Bilder" aufgeführt. Vergessen Sie nicht, das Dokument zu speichern.
+
Auf der Webseite "Seite 1" werden nunmehr im Header abwechselnd die Bilder angezeigt, die der gewählte Slider enthält. Wenn ein Besucher der Webseite nicht auf den automatischen Bildwechsel warten will, kann er manuell über die Pfeile am linken und rechten Bildrand der Bildfläche zwischen den Bildern wechseln:
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 15.jpg|Abbildung 15|1110px|left]]
+
[[Datei:TYPO3 Slider15.png|links|mini|704x704px]]
<br clear=all>
 
 
 
 
 
Auf der Webseite "Seite 1" werden nunmehr im Header abwechselnd die Bilder angezeigt, die der gewählte Slider enthält. Der Screenshot macht den Wechsel zwischen zwei Bildern sichtbar. Wenn ein Besucher der Webseite nicht auf den automatischen Bildwechsel warten will, kann er manuell über die Pfeile am linken und rechten Bildrand der Bildfläche zwischen den Bildern wechseln:
 
[[Datei:Screenshot Webanwendungen Typo3 Slider erstellen 16.jpg|Abbildung 16|left]]
 
 
<br clear=all>
 
<br clear=all>

Aktuelle Version vom 21. Juli 2021, 15:04 Uhr

Anleitung
Allgemeine Informationen
Informationen
Betriebssystem Alle
Service TYPO3
Interessant für Angestellte, Bereiche und Studierende
HilfeWiki des IMT der Uni Paderborn
no displaytitle found: TYPO3 Slider erstellen

Um in Typo3 einen Slider (Bilderfolge, Slideshow) für den Header einer Seite zu erstellen, müssen Sie zunächst mehrere geeignete Bilder im Format 944 x 295 Pixel hochladen und die Metadaten editieren, 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 Sliderbilder sollte erkennen lassen, was der Ordner enthält, und könnte z. B. einfach "Slider" sein. Falls noch kein eigener Ordner für die Sliderbilder existiert, sollten Sie einen neuen Ordner erstellen, wie in der Anleitung TYPO3 Ordner anlegen beschrieben. Laden Sie anschließend Grafikdateien hoch und editieren Sie die Metadaten, wie in den Anleitungen


beschrieben.

Was ist zu tun?

  • Slider-Ordner anlegen
  • Datensatz erstellen
  • Einstellungen vornehmen
  • Slider in Webseite einbinden


Schritt für Schritt Anleitung

Datensatz "Slider" erstellen

Erstellen Sie nun in der Ansicht "Liste" mit Hilfe eines Rechtsklicks eine neue Seite des Typs "Ordner". Diese Seite soll die Angaben zu den verschiedenen Slidern enthalten und kann deshalb ebenfalls einfach "Slider" genannt werden:

TYPO3 Slider1.png



Erstellen Sie danach auf der Seite "Slider" einen neuen Datensatz, indem Sie auf das Icon klicken. Eventuell ist es dazu erforderlich, noch einmal auf "Liste" zu klicken, damit das Symbol "Neuen Datensatz erstellen" auftaucht:

TYPO3 Slider2.png



Nach dem Klick auf den Button "Neuen Datensatz erstellen" werden Ihnen verschiedene Möglichkeiten zur Auswahl angezeigt. Klicken Sie auf "Dateisammlung" unter "Systemdatensätze":

TYPO3 Slider3.png



Sie werden daraufhin aufgefordert, einen Titel für die neue Dateisammlung auf der Seite "Slider" zu vergeben, und können über "Neue Relation erstellen" die Grafikdateien für den Slider auswählen.

TYPO3 Slider4.png



Geben Sie der Dateisammlung einen Namen, z. B. "Slider ". Nach einem Klick auf den Button "Neue Relation erstellen" öffnet sich ein neues Fenster mit dem Verzeichnisbaum. Klicken Sie auf den Ordner "Slider", um ihn zu öffnen. Markieren Sie im Ordner "Slider" mit einem Häkchen die Grafiken, die Sie für den Slider nutzen möchten, und klicken Sie danach auf das "+"-Icon.

TYPO3 Slider6.png



  • Unterhalb von "Neue Relation erstellen" werden jetzt das ausgewählten Bilder 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.
TYPO3 Slider7.png


Weitere Einstellungen

  • Sie können die Bildauswahl bei Bedarf noch verändern: Sie können einzelne Bilder über die entsprechenden Symbole verbergen (Symbol Schieber) oder löschen (Symbol Abfalleimer) oder über das Symbol "Dieses Objekt verschieben (drei Striche)" verschieben.
    • Um z. B. das zweite Bild in der Bilderfolge zum Eingangsbild des Sliders zu machen, platzieren Sie den Mauszeiger auf dem genannten Symbol, halten die linke Maustaste gedrückt, ziehen das Bild nach oben und legen es oberhalb des vormals ersten Bildes ab.
TYPO3 Slider8.png



Speichern und schließen Sie das Dokument, wenn Sie mit der Abfolge der Bilder zufrieden sind:

TYPO3 Slider9.png



In der Ansicht "Liste" werden nun die Seite "Slider" und die Dateisammlung "Slider" angezeigt. Über "Neuen Datensatz erstellen" können Sie bei Bedarf weitere Slider erstellen, so dass Sie dann zwischen verschiedenen Slidern wählen können.

TYPO3 Slider10.png


Slider in die Webseite einbinden

Um den erstellten Slider in die Webseite einzubinden, rufen Sie die Seite - hier "Seite 1 - zur Bearbeitung über "rechte Maustaste / Bearbeiten" auf:

TYPO3 Slider11.png



Unter "Erscheinungsbild /Medienelement" wählen Sie als Modus "Slider". Anschließend klicken Sie zur Auswahl des Sliders auf "Dateisammlung".

TYPO3 Slider12.png



TYPO3 Slider13.png
  • Es öffnet sich ein Fenster mit dem Seitenbaum. Klicken Sie auf den gewünschten Ordner.
  • Klicken Sie auf den Namen der Dateisammlung, die Sie als Slider nutzen möchten - hier "Slider". Klicken Sie anschließend auf das +.


"Slider" wird nun unter "Slider-Bilder" aufgeführt. Vergessen Sie nicht, das Dokument zu speichern.

TYPO3 Slider14.png


Webseitenansicht

Auf der Webseite "Seite 1" werden nunmehr im Header abwechselnd die Bilder angezeigt, die der gewählte Slider enthält. Wenn ein Besucher der Webseite nicht auf den automatischen Bildwechsel warten will, kann er manuell über die Pfeile am linken und rechten Bildrand der Bildfläche zwischen den Bildern wechseln:

TYPO3 Slider15.png



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: imt@uni-paderborn.de

Der Servicepoint ist aktuell im Notebook-Café zu finden

Das IMT:Notebook-Café (Raum I0.401) bietet derzeit eingeschränkten Support und hat Montags bis Donnerstags von 08:30 - 16:00 Uhr und Freitags 08:30 - 15:00 Uhr geöffnet. Bitte beachten Sie die derzeit geltenden Hygienebestimmungen.

Das IMT:Servicecenter Medien auf H1 hat aktuell Montags bis Donnerstags von 8:00 - 16:00 Uhr und Freitags von 8:00 - 14:00 Uhr geöffnet.