Mit dem Shortcode: [imagescroller]
realisieren Sie eine Bilderfolge wie von der Startseite der Universität bekannt.
Inhaltsverzeichnis
- Was ist der Imagescroller?
- JGU Imagescroller Plugin aktivieren
- Imagescroller auf der Seite einfügen
- Beispiel Imagescroller
- Einstellungen im Imagescroller (Parameter)
- Beispiel Imagescroller: Mehrere Parameter gemeinsam verwenden
- Parameter für einzelne Bilder
- Beispiel für vollständig ausgefüllte imageurl
- Rechtliche Hinweise für die Nutzung von Bildern
Was ist der Imagescroller?
Mit dem Shortcode: [imagescroller]
realisieren Sie eine Bilderfolge wie von der Startseite der Universität bekannt.
Der Imagescroller (auch Diashow oder Slider genannt) zeigen eine Folge von Bildern/Slides, die automatisch nacheinander eingeblendet werden. Sie können diese Slides/Bilder beschriften und Inhalte verlinken. 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!
Imagescroller auf der Seite einfügen
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. 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
Bilder ohne Bildbearbeitung auf gleiche Größe bringen
Wenn Sie sich mit Bildbearbeitung nicht auskennen, bringen Sie so die Bilder mit WordPress Bordmitteln auf die gleiche Größe:
- Beiarbeiten Sie die Seite, in die der Imagescroller hinein soll.
- Laden Sie die Bilder in die Seite mit
Dateien hinzufügen.
Die Bilder sollten groß sein, z.B. können einfach direkt aus der Kamera kommen. - Stellen Sie unten rechts bei
ANZEIGE-EINSTELLUNGEN FÜR ANHÄNGE
ein:Ausrichtung
: keine, (nicht unbedingt nötig)Link
: kein (diese Einstellung ist am besten für einen übersichtlichen Code)Größe
: z.B. Mittel (wichtig, hier müssen alle Bilder die GLEICHE Größe haben)
- Die Bilder sollten Sie jetzt direkt in der Seite sehen.
- Wechseln Sie oben rechts in den Textmodus
- Kopieren Sie aus dieser Anleitung eines der Beispiele
- Ersetzen Sie die Beispielbilder durch den Pfad und Dateinamen IHRER Bilder
- Entfernen Sie den Code der Bilder direkt in der Seite
Imagescroller einbauen und mit Bildern befüllen
Sie haben bereits
- das Plugin eingeschaltet,
- ausgewählt, an welcher Stelle der Imagescroller erscheinen soll,
- Ihre Bilder auf eine einheitliche Größe gebracht,
- in die Mediathek hochgeladen.
Beispiel Imagescroller
1 2 3 4 5 |
[imagescroller] [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.
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
.
-
- Beispiel:
[imagescroller typ="offene_universitaet"] : Die folgenden 6 Bilder werden alle leicht ausgegraut dargestellt, bei Klick oder Mausüberstreichen werden sie farbig.
- Beispiel:
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 WebseitenBeispiel:
So schalten Sie den automatische Bildlauf aus.- [imagescroller
autoplay="off"
] 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.
[imagescrollerloop="off"
]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"]
max_width:
Funktion:
Legen die maximale Breite in Pixeln für Ihren Imagescroller fest. Orientieren Sie sich am schmalsten Bild.
Beispiel:
[imagescroller max_width="450"]
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:
[imagescrollercontrols="Off"
]- 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"
- ausblenden:
[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
1 2 3 4 |
[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
1 2 3 4 |
[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.)