Einen Bild-Slider im Portal-Kopf integrieren

Ordnerbasiert:
Wenn Sie in einem Ihrer Ordner eine Datei namens "bild-slider.html" hinterlegen (mit untenstehendem Beispiel-Code), so wird diese als Slideshow im Kopf aller Seiten des Ordners angezeigt.

Portalbasiert:
Wenn Sie in einem Ihrer Ordner eine Datei namens "bild-slider-portal.html" hinterlegen, so wird diese im Kopf aller Seiten des gesamten Portals angezeigt.

Achtung:
Für die Bild-Slider-Datei dürfen Sie in den Metadaten kein Template auswählen!

Reihenfolge der Kopfbild-Abfrage

  • Existiert eine "bild-slider.html" in diesem Ordner?
    Ja: Sie wird verwendet. (Abfrage beendet)
    Nein: Weiter zur nächsten Frage.
  • Existiert ein "kopfbild.jpg" im images-Ordner?
    Ja: Sie wird verwendet. (Abfrage beendet)
    Nein: Weiter zur nächsten Frage.
  • Existiert eine "bild-slider-portal.html" auf der Portal-Ebene?
    Ja: Sie wird verwendet. (Abfrage beendet)
    Nein: Weiter zur nächsten Frage.
  • Existiert ein "kopfbild.jpg" im images-Ordner der Portal-Ebene?
    Ja: Sie wird verwendet. (Abfrage beendet)
    Nein: Das Hauptbild der Universität wird verwendet.

Nachfolgende Code-Schnipsel sind (bis auf die Änderung der Slider-Pagination) immer in die bild-slider.html oder bild-slider-portal.html einzufügen.

Normaler Kopfbild-Slider

<ul id="portal-slider">

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/home_halle1.jpg" /></li>

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Imagebroschuere_0009_neu.jpg" /></li>

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Cafete_0003_neu.jpg" /></li>

</ul>

Weitere Funktionalitäten

Kopfbild-Slider mit zufälligem Startbild

<ul id="portal-slider-random">

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/home_halle1.jpg" /></li>

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Imagebroschuere_0009_neu.jpg" /></li>

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Cafete_0003_neu.jpg" /></li>

</ul>
Zufälliges Kopfbild (ohne sliden)

Dieser Slider ist im Grunde gar kein Slider, denn es wird weder automatisch geslided noch wird die Pagination angezeigt. Es wird lediglich ein zufälliges Bild aus der Slider-Liste angezeigt.

Version 1 - normal

<ul id="portal-kopfbild-random">

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/home_halle1.jpg" /></li>

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Imagebroschuere_0009_neu.jpg" /></li>

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Cafete_0003_neu.jpg" /></li>

</ul>

Version 2 - automatische Ordnerwiedergabe

Sie legen einen Ordner fest (bspw. "/ihr-portal/images/kopfbilder/") und ausnahmslos alle jpg-Bilder dieses Ordners werden für die zufällige Kopfbild-Wiedergabe verwendet, aber es wird immer nur maximal 1 Bild pro PageLoad angezeigt. Sie müssen nicht darauf achten wie die Bilder benannt sind.

Wenn Sie über das Metadaten-Attribut "Titel", dem Bild ein Copyright hinzugefügt haben, wird dieses automatisch im Kopf angezeigt (Siehe Blog-Beitrag).

<!-- Hier bitte nur den Pfad zum Bild-Ordner anpassen - Alles andere unverändert lassen -->
<ul id="bildslider-emitdata">
  <emit source='dir' path="/images/template_2017/kopfbilder/" glob="*.JPG,*.jpg" notitle="">
    <set variable='var.foo' value='& _.title;' />
    <li><span class="emit-path">& _.path;</span> <span class="emit-title">& _.title;</span>
  </emit>
</ul>

<!-- Hier wird das zufällige Bild automatisch eingeladen - Bitte nicht verändern -->
<ul id="portal-kopfbild-random"></ul>

  Aus Darstellungsgründen sind hier Leerzeichen eingefügt (Roxen interpretiert diese Entities sonst). Vergessen Sie nicht diese zu entfernen, sonst funktioniert der Quellcode nicht.

Verlinkung von Bildern

Sie können innerhalb der li-Tags das jeweilige Bild verlinken und so auf weitere Inhalte Ihres Portals verweisen.

<ul id="portal-slider">

  <li><a href="#"><img alt="" class="foto" src="/images/homepage_2012/kopffotos/home_halle1.jpg" /></a></li>

  <li><a href="#"><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Imagebroschuere_0009_neu.jpg" /></a></li>

  <li><a href="#"><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Cafete_0003_neu.jpg" /></a></li>

</ul>
Ein Bild-Copyright hinzufügen

Sie können jedem Bild ein Copyright hinzufügen, welches in der rechten unteren Ecke des Kopfbildes angezeigt wird.

<ul id="portal-slider">

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/home_halle1.jpg" /><div class="copyright">&copy; Foto-Copyright</div></li>

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Imagebroschuere_0009_neu.jpg" /><div class="copyright">&copy; Foto-Copyright</div></li>

  <li><img alt="" class="foto" src="/images/homepage_2012/kopffotos/Cafete_0003_neu.jpg" /><div class="copyright">&copy; Foto-Copyright</div></li>

</ul>
Kopfbild-Slider mit Text (aktuell nur für Fakultäten)

Dieser Kopfbild-Slider ist momentan nur für das Kopfdesign Nr.1 angepasst (Fakultäten).

Hier finden Sie eine Vorschau:
Fakultät für Biologie

<ul id="portal-slider" class="mit-text">

  <li>
    <img alt="" class="foto" src="/images/homepage_2012/kopffotos/home_halle1.jpg" />
    <div class="slider-text">"Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen."<br /> <b>Blindtext</b></div>
  </li>

  <li>
    <img alt="" class="foto" src="/images/homepage_2012/kopffotos/Imagebroschuere_0009_neu.jpg" />
    <div class="slider-text">"Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen."<br /> <b>Blindtext</b></div>
  </li>

  <li>
    <img alt="" class="foto" src="/images/homepage_2012/kopffotos/Cafete_0003_neu.jpg" />
    <div class="slider-text">"Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«."<br /> <b>Blindtext</b></div>
  </li>

</ul>

Kopfbild-Auswahl

Eine stetig wachsende Auswahl an Kopfbildern finden Sie in unserer
Kopfbild-Übersicht