JGU Imagescroller: ganzseitig mit Suchbox, Top- und Kalenderlinks

Erstellen sie eine ganzseitige Startseite mit Slider, Suche und Links Mit dem Shortcode: [imagescroller_spaltenlos]

Wollen Sie Ihre Startseite ähnlich wie die  Startseite der Universität aussehen lassen?

Dazu steht Ihnen die Erweiterung JGU Imagescroller zur Verfügung. Damit werden Bilder im Seitenverhältnis 5:2 angezeigt. Auf Desktop-Bildschirmen nehmen sie die linken 2/3 der Seite ein. Suchbox, Top- und Kalenderlinks stehen im rechten Drittel. (Auf schmaleren Ausgabegeräten rücken die beiden Bereiche untereinander).imagescroller_eightcol

JGU Imagescroller einschalten

Aktivieren Sie das Plugin JGU Imagescroller.

Dieses Plugin (aus der Liste aller Plugins) schalten Sie als Redakteur Ihres Blogs selbstständig aus und ein. Sie brauchen uns dazu nicht 🙂

Dies funktioniert im Dashboard unter JGU Tools.

Ausführliche Anleitung zum Plugin aus- und einschalten


 

Template: Spaltenlos

Schalten Sie das Template der Seite, auf der Sie diese Module verwenden möchten, auf 'Spaltenlos' um:

template_spaltenlos_auswaehlen

 

Bilder und Inhalte vorbereiten

Der JGU Imagescroller besteht aus Bildern im Seitenverhältnis 5:2 (ideale Pixelmaße: 836x334 Pixel), die Titel (Erläuterungstexte) haben und verlinkt sein können.

Sie können den JGU Imagescroller auf zwei verschiedene Arten betreiben:

  1. Sie erstellen für jedes Bild einen Beitrag oder eine Seite. Das zugehörige Bild wird dort im Feld "Beitragsbild" angegeben. Der Bilder des JGU Imagescrollers zeigen dann jeweils auf den Beitrag, dem sie als Beitragsbild zugeordnet sind.
  2. Die Bilder liegen in Ihrem Blog, verweisen aber auf Seiten im Internet.

JGU Imagescroller mit Links auf Beiträge oder Seiten Ihres Blogs

Wenn Sie die Beiträge (oder Seiten) vorbereitet haben, schreiben Sie in Ihre Seite mit dem Template "Spaltenlos":


[imagescroller_spaltenlos]

Link auf die erste Seite/Beitrag, dieser Text ist freigestellt
Link auf die zweite Seite/Beitrag, dieser Text ist freigestellt

[/imagescroller_spaltenlos]

  1. Wie erzeuge ich die Bildbeschriftung?
    Das sind die Linktexte innerhalb des Shortcodes, sie zeigen auf einen Beitrag des Blogs. Verlinkt wird im Texteditor (Modus: Visuell). Die Linktexte werden in den meisten Browsern jeweils im Laufband unten im Bild als Erläuterungstexte angezeigt.  Die Länge der Linktexte ist beliebig und darf zwischen den einzelnen Bildern stark variieren. Die Höhe des Laufbands wird automatisch auf den maximal benötigten Wert gesetzt.
    Die Anzahl der Bilder im JGU Imagescroller ist beliebig.
  2. Welches Bild wird angezeigt?
    In jedem verlinkten Beitrag/Seite belegen Sie das Beitragsbild (engl: 'Featured Image') mit demjenigen Bild, welches im JGU Imagescroller angezeigt werden soll.
    Das Plugin 'holt' das Beitragsbild aus der verlinkten Zielseite und zeigt es im JGU Imagescroller an.
    Das Beitragsbild ist im Dashboard bei der Artikelbearbeitung ganz rechts unten zu sehen, wenn nicht: bei den “Optionen” “Beitragsbild/Featured Image” anhaken.
    Ideal sind Beitragsbilder im Seitenverhältnis 5:2 (Pixelmaße: 836x334 Pixel).

JGU Imagescroller mit Links auf beliebige Internetadressen (oder ohne Links)

Wenn die Bildlinks Ihres JGU Imagescrollers auf Ziele außerhalb Ihres Blogs zeigen sollen, verwenden Sie den  Shortcode 'imagelink'. Bitte beachten: ein JGU Imagescroller kann nur entweder die oben beschriebenen Links auf Beiträge/Seiten enthalten, oder die hier beschriebenen Imagelinks.

Laden Sie die Bilder (Seitenverhältnis 5:2, Pixelmaße: 836x334) in den Medien-Bereich Ihres Blogs. Um die Bildadresse (imageurl) zu erhalten, klicken Sie in der Medienübersicht auf das Bild und kopieren die Adresse aus dem Feld "URL".

[imagescroller_spaltenlos]
[imagelink imageurl="http://www.wordpress.zdv.uni-mainz.de/mbehrens/files/2014/01/startseite_studium_tag_der_offenen_tuer_836x334.jpg" url="http://www.blogs.uni-mainz.de" subtitle="Dies ist nur ein Test"]
[/imagescroller_spaltenlos]

Das Attribut imageurl enthält die vollständige URL des zu verwendenden Bildes.
Das Attribut url enthält die URL der verlinkten Zielseite, auf die ein Benutzer bei Klick auf das Bild gelangen soll. Fehlt das Attribut url, ist das Bild nicht anklickbar.
Das Attribut subtitle enthält den Text, der als Untertitel im JGU Imagescroller eingeblendet werden soll. Dieses Attribut kann weggelassen werden. Wir empfehlen jedoch, zur Verbesserung der Barrierefreiheit, dieses Attribut zu belegen. NEU ab Februar 2015: 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.

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.)

Suchbox, Top- und Kalenderlinks

Das rechte Seitendrittel neben dem JGU Imagescroller enthält eine Suchbox, sowie die sog. 'Top-' und 'Kalenderlinks'.

Suchbox

Der Shortcode [quicksearch] erzeugt eine Suchbox für die Suche auf den Internetseiten der Universität mit der Suchmaschine MetaGer.

Optional können die Suchergebnisse über das Attribut sitesearch="Hier kommt die URL Ihrer Uni-Website (ohne http://)" auf eine bestimme Uni-Adresse eingeschränkt werden.

Beispiel: [quicksearch sitesearch="www.blogs.uni-mainz.de"]

Zusätzlich können über [searchlink] Links auf weitere Suchmöglichkeiten unterhalb der Suchbox angegeben werden:

quicksearch

Der Shortcode zur Umsetzung der obigen Suchbox wäre also:

[quicksearch]
[searchlink title="JOGU-StINe" url="https://jogustine.uni-mainz.de/"]
[searchlink title="Personensuche" url="http://univis.uni-mainz.de/form?dsc=go&to=tel"]
[/quicksearch]

Toplinks

Der Shortcode [toplinks] enthält Links zu beliebigen URLs.

Sie benötigen eine andere Überschrift als TOPLINKS und TERMINKALENDER?
Durch das Attribut ueberschrift setzen Sie eine beliebige Überschrift. Wird das Attribut nicht angegeben, so erscheint automatisch 'Toplinks'. Bsp: [toplinks ueberschrift="Was anderes"]
Die Anzahl der anzeigbaren Toplinks ist auf maximal 3 begrenzt. Mit Rückfragen diesbezüglich wenden Sie sich bitte an: online-redaktion@uni-mainz.de .

Zur Illustration kann den einzelnen Toplinks (optional) auch ein Bild (image) angegeben werden:

toplinks

Kalenderlinks

Der optionale Shortcode [terminkalender] kann  auch anders benannt werden: Bsp: [terminkalender ueberschrift="Was anderes"].
Zusätzlich benötigt er ein Attribut title für den Linktitel und natürlich url für die Zielseite, auf die hier verlinkt wird:

terminkalender
Abschließend als Beispiel Shortcode, der den Inhalt der oben gezeigten rechten Spalte des JGU Imagescrollers der Startseite der Universität (2014) realisiert:

[imagescroller_spaltenlos]
[imagelink imageurl="http://www.wordpress.zdv.uni-mainz.de/mbehrens/files/2014/01/startseite_studium_tag_der_offenen_tuer_836x334.jpg" url="http://www.blogs.uni-mainz.de" subtitle="Test"]
[/imagescroller_spaltenlos]
[imagescroller_rechtespalte]
[quicksearch] [searchlink title="JOGU-StINe" url="https://jogustine.uni-mainz.de"] [searchlink title="Personen" url="http://univis.uni-mainz.de"] [/quicksearch]
[toplinks] [toplink title="Studium" subtitle="Kreative Köpfe" url="http://www.uni-mainz.de/universitaet/Dateien/JGU_studium_und_lehre.pdf" image="http://www.wordpress.zdv.uni-mainz.de/mbehrens/files/2014/01/banner_studium_und_lehre_broschuere.jpg"] [toplink title="JGU INTERNATIONAL" subtitle="Global vernetzt" url="http://www.international.uni-mainz.de/"] [toplink title="Video" subtitle="The Gutenberg Spirit" url="http://www.youtube.com/universitaetmainz"] [/toplinks]
[terminkalender title="Alle Veranstaltungen auf einen Blick" url="http://www.uni-mainz.de/veranstaltungskalender"]
[/imagescroller_rechtespalte]

Kopieren Sie die Beispiele immer als Text, sonst ist die Formatierung fehlerhaft!

Vollständiges Beispiel zum Kopieren (mit externen Links)



[imagescroller_spaltenlos]

[imagelink imageurl="http://www.wordpress.zdv.uni-mainz.de/mbehrens/files/2014/01/startseite_studium_tag_der_offenen_tuer_836x334.jpg" url="http://www.blogs.uni-mainz.de" subtitle="Dies ist nur ein Test"]
[/imagescroller_spaltenlos]

[imagescroller_rechtespalte]

[quicksearch] [searchlink title="JOGU-StINe" url="https://jogustine.uni-mainz.de/"] [searchlink title="Personensuche" url="http://univis.uni-mainz.de/form?dsc=go&to=tel"] [/quicksearch]

[toplinks] [toplink title="Studium und Lehre" subtitle='Kreative Köpfe prägen die Wissenskultur unserer Universität und Universitätsmedizin. Erfahren Sie mehr über Studium und Lehre an der JGU gemäß unseres Mottos "The Gutenberg Spirit: Moving Minds – Crossing Boundaries".' url="http://www.uni-mainz.de/universitaet/Dateien/JGU_studium_und_lehre.pdf" image="http://www.wordpress.zdv.uni-mainz.de/mbehrens/files/2014/01/banner_studium_und_lehre_broschuere.jpg"] [toplink title="JGU INTERNATIONAL" subtitle='Global vernetzt in Wissenschaft und Forschung, Studium und Lehre' url="http://www.international.uni-mainz.de/"] [toplink title="Video" subtitle='The Gutenberg Spirit: Moving Minds - Crossing Boundaries' url="http://www.youtube.com/universitaetmainz"] [/toplinks]

[terminkalender title="Alle Veranstaltungen auf einen Blick" url="http://www.uni-mainz.de/veranstaltungskalender"]

[/imagescroller_rechtespalte]

Ganz kurzes Beispiel zum Kopieren



[imagescroller_spaltenlos]

[imagelink imageurl="http://www.wordpress.zdv.uni-mainz.de/mbehrens/files/2014/01/startseite_studium_tag_der_offenen_tuer_836x334.jpg" ]

[/imagescroller_spaltenlos]

[imagescroller_rechtespalte]

[quicksearch]

[toplinks] [toplink title="Titel" subtitle='Lintext' url=http://www.blogs.uni-mainz.de ] [/toplinks]

[terminkalender title="Alle Veranstaltungen auf einen Blick" url="http://www.uni-mainz.de/veranstaltungskalender"]

[/imagescroller_rechtespalte]

Rechtliche Hinweise für die Nutzung von Bildern

Bitte beachten: Für den Upload oder die Wiedergabe fremder Inhalte (z.B. fremder Bilder, PDF-Dateien) auf den Internetseiten Ihres Projektes muss in der Regel die Zustimmung des Urhebers eingeholt werden.