JGU Imagescroller

Mit dem Shortcode: [imagescroller] realisieren Sie eine Bilderfolge wie von der Startseite der Universität bekannt.

Kurzanleitung für Eilige

1. Dashboard → JGU Tools Plugin einschalten
2. Laden Sie die Bilder in die Imagescroller-Seite mit Dateien hinzufügen.
3. Stellen Sie unten rechts bei ANZEIGE-EINSTELLUNGEN FÜR ANHÄNGE ein:
   1. Link: kein (diese Einstellung ist wichtig für einen übersichtlichen Code)
   2. Größe: z.B. Mittel (wichtig, hier müssen alle Bilder die GLEICHE Größe haben)
4. Die Bilder sollten Sie jetzt direkt in der Seite sehen.
5. Wechseln Sie oben rechts in den Textmodus
6. Kürzen Sie den HTML-Code so, daß nur noch die Bildurls, eine Bild-URL pro Zeile, im Editor steht.
7. Kopieren Sie aus dieser Anleitung den Beispielcode zum Kopieren
8. Probieren Sie den Imagescroller (noch mit den Beispielbildern aus), um sicherzugehen, daß Sie beim Kopieren keinen Fehler gemacht haben und das Plugin wirklich eingeschaltet ist.
9. Ersetzen Sie die Beispielbilder durch den Pfad und Dateinamen IHRER Bilder
10. Entfernen Sie den Code der Bilder direkt in der Seite

Video-Tutorial

Es folgt der Kurzanleitung für Eilige: Imagescroller-Video-Tutorial

Was ist ein Imagescroller?

Wie das aussieht, sehen Sie hier: → Beispiel - Imagescroller mit drei Bildern

Mit dem Shortcode: [imagescroller] realisieren Sie eine Bilderfolge wie von der Startseite der Universität bekannt.

Der Imagescroller (auch Diashow, Carousel oder Slider genannt) zeigen eine Folge von Bildern/Slides, die automatisch nacheinander eingeblendet werden. Sie können diese Slides/Bilder beschriften und Inhalte verlinken.

Wo kann ich den Imagescroller einblenden?

Der Imagescroller kann an fast jeder Stelle auf Ihrer Seite verwendet werden. Sie können die folgenden Arten auswählen:

• in der mittleren Spalte
• auf der Startseite (ganzseitig) (siehe JGU Imagescroller: ganzseitig mit Suchbox, Top- und Kalenderlinks)
• Offene Universität (pro Slide werden 6. Bilder nebeneinander angezeigt)
• in der rechten Spalte

JGU Imagescroller Plugin aktivieren

---

Plugin einschalten

Manche besondere Eigenschaften werden nur in einigen WordPress-Projekten benötigt. Da jede neue Eigenschaft Ihre Seite ein wenig langsamer macht, sind diese Erweiterungen standardmäßig deaktiviert. Die  Erweiterungen heißen in WordPress Plugins. Zuerst müssen Sie ein Plugin (einmalig) aktivieren. Sie steuern die Plugins durch  sogenannte Shortcodes. Shortcodes sind Kommandos  auf Ihrer Webseite, mit dem Sie dem Plugin sagen, was genau es tun soll. Sie erkennen Shortcode-Kommandos daran, daß sie in der Webseite in eckigen Klammern stehen.

Bevor Sie das Plugin verwenden können, müssen Sie es zuerst einschalten!
Ansonsten werden Ihre Shortcodes nur auf der Seite angezeigt anstatt ausgeführt zu werden.
Gehen Sie zu Dashboard -> JGU Tools -> Plugins und aktivieren Sie das Plugin. Ausführliche Anleitung zum Plugin aus- und einschalten

Achtung : ❗ Wechseln Sie auf der Seite, an der Sie das Plugin durch den Shortcode verwenden wollen, in den Modus Text (Kartenreiter oben rechts), bevor Sie etwas an den Shortcodes ändern!

---

Bilder vorbereiten

Zuerst müssen Sie die Bilder, die im Imagescroller zu sehen sein sollen, auswählen und in die Mediathek hochladen. Bevor Sie das tun, lohnt sich ein Blick auf die Bildgröße (Pixel).

Der Imagescroller hat voreingestellte Standardbreiten, abhängig vom verwendeten Typ:

• Mittlere Spalte und "Offene Universität": 625 Pixel
• Startseite: 836 Pixel
• Rechte Spalte: 300 Pixel

Größere Bilder werden automatisch an diese Standardbreiten angepasst, das Seitenverhältnis bleibt dabei gewahrt.

Beispielcode zum Kopieren

Kopieren sie den gesamten Code in Ihre Seite (auf der sich idealerweise alle Bilder ihres künftigen Imagescrollers bereits befinden, speichern Sie und schauen sie es sich an.

Danach tauschen Sie die Bilder durch Ihre eigenen aus.

[imagescroller autoplay="off"]
[imagelink imageurl="//www.blogs.uni-mainz.de/wp-content/uploads/2013/01/P1050050.jpg" url="https://www.blogs.uni-mainz.de" subtitle="Imagescroller - Testbild #1"]
[imagelink imageurl="//www.blogs.uni-mainz.de/wp-content/uploads/2013/05/P1050049.jpg" url="https://www.blogs.uni-mainz.de" subtitle="Imagescroller - Testbild #2"]
[imagelink imageurl="//www.blogs.uni-mainz.de/wp-content/uploads/2013/02/P1050048.jpg" url="https://www.blogs.uni-mainz.de" subtitle="Imagescroller - Testbild #3"]
[/imagescroller]

Wie das aussieht, sehen Sie hier: → Beispiel - Imagescroller mit drei Bildern

Einstellungen im Imagescroller (Parameter)

[imagescroller][/imagescroller] :
Funktion:
Innerhalb dieser Klammern tragen Sie die relevanten Parameter für den Imagescroller ein.

1. typ:
   Funktion:

  Festlegen, wo auf Ihrer Seite der Imagescroller erscheinen soll.

• • Voreingestellt ist der Imagescroller in der mittleren Spalte. Dafür müssen Sie also nichts ändern.
  • Um den Imagescroller ganzseitig auf der Startseite anzuzeigen, tragen Sie den Wert startseite ein.
  • Um 6 kleine Bilder nebeneinander anzuzeigen, tragen Sie den Wert offene_universitaet ein
  • Für einen Imagescroller in der rechten Spalte geben Sie dem Parameter den Wert rechte_spalte.

1. • Beispiel:
     [imagescroller typ="offene_universitaet"] : Die folgenden 6 Bilder werden alle leicht ausgegraut dargestellt, bei Klick oder Mausüberstreichen werden sie farbig.
2. autoplay:
Funktion:
   Die Bilder laufen automatisch hintereinander ab. Standardmäßig ist autoplay eingeschaltet.

   💡: Aus Gründen der Zugänglichkeit (Barrierefreiheit) empfehlen wir, das autoplay standardmäßig auszuschalten. Interessierte Benutzer können sich selbst per Klick durch die Bilderliste bewegen.
   Mehr zur Barrierefreiheit auf Webseiten

   Beispiel:
   So schalten Sie den automatische Bildlauf  aus.

3. [imagescroller autoplay="off"] 
4. loop:
   Funktion:
   In diesem Modus laufen alle Bilder in einer Dauerschleife. Standardmäßig ist der loop eingeschaltet.

   💡:Aus Gründen der Zugänglichkeit (Barrierefreiheit) empfehlen wir, die loop standardmäßig auszuschalten.

   Beispiel:
   So schalten Sie die Dauerschleife aus.
   [imagescroller loop="off"] 

5. duration:
   Funktion:
   Legt die Darstellungsdauer eines Bildes im autoplay Modus in Sekunden fest. Voreingestellt sind 10 Sekunden. Wenn Sie die Zeit zu kurz einstellen und der Text bei Headline zu lang ist, kann der Benutzer ihn nicht mehr erfassen.
   Beispiel:
   [imagescroller duration="5"] 
6. max_width:
   Funktion:
   Legen die maximale Breite in Pixeln für Ihren Imagescroller fest. Orientieren Sie sich am schmalsten Bild. Maximaler Wert:
   • Mittlere Spalte und "Offene Universität": 625 Pixel
   • Startseite: 836 Pixel
   • Rechte Spalte: 300 Pixel

   Beispiel:
   [imagescroller max_width="450"] 

7. controls="Off":
   Funktion:
   Blendet die hellgraue Kontrollleiste unten aus. Die Punkte, die jeweils für die einzelnen Bilder stehen und die Pfeile, mit denen man sich in der Bilderabfolge bewegen kann, sind dann weg. Es bleiben die Bilder und die Unterschriften, der graue Kasten entfällt.Beispiel:
   [imagescroller controls="Off" ] 
8. Sonderfall imagescroller typ="offene_universitaet":
   Bei diesem Imagescroller können Sie die standardmäßige Überschrift "Offene Universität" ausblenden oder ändern:
   • ausblenden: no_headline="Yes"
   • ändern: ueberschrift="hier individuelle Überschrift eintragen"
9. [imagelink] :
   Funktion:
   Das ist die Klammer, die alle relevanten Informationen (ebenfalls Parameter, s.u.) für das einzelne Bild enthält. Sie müssen also für jedes Bild, das angezeigt werden soll, einen imagelink anlegen.

Beispiel Imagescroller: Mehrere Parameter gemeinsam verwenden

[imagescroller duration="7" controls="Off"]
[imagelink imageurl="//www.blogs.uni-mainz.de/wp-content/uploads/2013/01/P1050050.jpg" ]
[imagelink imageurl="//www.blogs.uni-mainz.de/wp-content/uploads/2013/05/P1050049.jpg"]
[/imagescroller]

Wie das aussieht, sehen Sie hier: → Beispiel - Imagescroller mit mehreren Parametern eingeschaltet

Parameter für einzelne Bilder

Der Shortcode imagescroller ist die äußere Klammer. Für jedes einzelne Bild benötigen Sie einmal den Shortcode imagelink Folgende Parameter können Sie im imagelink benutzen:

• • imageurl :
    Funktion:
    Das ist der Link, den die Seite lädt, um Ihr Bild aus der Medienbibliothek abzurufen. Um die Bildadresse zu erhalten, klicken Sie in der Medienübersicht auf das Bild, kopieren die Adresse aus dem Feld “URL” und fügen sie als Wert von imageurl ein.
  • Beispiel:
    [imageurl imageurl="http://webadresse-zu-ihrem-bild"] : 
  • url (optional):
    Funktion:
    Hier können Sie den Link zu einer beliebigen Seite eintragen, die aufgerufen wird, wenn das Bild angeklickt wird.
  • Beispiel:
    [imageurl url="http://webadresse"] : 
  • subtitle (optional):
    Funktion:
    Hier können Sie den Titel des Bilds eintragen. Wir empfehlen, den subtitle zu setzen, weil jedweder Bildinhalt durch einen alternativen Text ergänzt werden soll. Die Länge der Untertitel ist beliebig und darf zwischen den einzelnen Bildern stark variieren. Die Höhe des Laufbands wird automatisch auf den maximal benötigten Wert gesetzt.
  • Beispiel:
    [imageurl subtitle="Das ist der Untertitel"] : 
  • target (optional):
    Funktion:
    Mit diesem Parameter können Sie steuern, ob ein Toplink in einem neuen Fenster/Tab im Browser geöffnet werden soll. Dafür muss der Wert _blank gesetzt werden.
    Beispiel:
    target="_blank"

Beispiel für vollständig ausgefüllte imageurl

[imagelink 
imageurl="//www.blogs.uni-mainz.de/wp-content/uploads/2013/01/P1050050.jpg" 
url="https://www.blogs.uni-mainz.de" 
subtitle="Imagescroller - Testbild #1"]

Sie können beliebig viele Imagelinks einsetzen. Wir empfehlen jedoch aufgrund der Ladezeiten von Bilddateien, besonders in langsamen Netzen, ein Maximum von 10 Bildlinks nicht zu überschreiten. (Ein Bild dieser Größe kann 400KB groß sein, mit 384 kbit/s dauert es mehrere Sekunden, bis das Bild übertragen ist.)

Darstellungsprobleme (Bilder sind unterschiedlich groß) beheben

Wenn Ihre Bilder unterschiedlich groß sind, kann es passieren, dass der Imagescroller beim Durchlauf Ihrer Bilder seine Höhe von einem Bild zum nächsten verändert. Am besten bearbeiten Sie Ihre Bilder vor dem Hochladen so, dass sie alle die gleiche Größe oder das gleiche Größenverhältnis haben.

Sonst sieht es so aus: → Beispiel zur Abschreckung -  Bilder sind verschieden hoch

Bilder schmaler als Standardbreite des Imagescrollers

Wenn Ihre Bilder schmaler sind als die Standardbreite des gewählen Imagescrollers, legen Sie mit dem Parameter  max_width die Maximalbreite für Ihren Imagescroller pixelgenau fest. Setzen sie den Wert auf die Breite des schmalsten Bildes, das Sie verwenden möchten, denn sonst bleibt der Rest des Feldes leer.

Wie das aussieht, sehen Sie hier: → Beispiel zur Abschreckung - Bilder sind verschieden breit

Ihre Bilder auf eine einheitliche Größe bringen

Rechtliche Hinweise für die Nutzung von Bildern