VL-Widgets zur Darstellung und Navigation von redaktionell ausgewählten Inhalten

Beispiele

Hierbei können Bildausschnitte aus Images des Portalbestands ausgewählt und mit Text annotiert werden. Der Link auf dem Bildausschnitt zeigt entweder direkt auf die Seite oder eine alternativ bestimmbare VLID, etwa den das Bild enthaltenden Titel.

Slider-Widget:

Das Widget erzeugt einen Slider, bekannt von mobilen Geräten oder neueren Websites. Das Weiterscrollen erfolgt automatisch oder per Klick. Den Sliderelementen können Bildunterschriften beigefügt werden.


Beispiel visuallibrary.net

Das Carousel-Widget ist eine Variante des Slider-Widget; es enthält nicht eines, sondern mehrere Bilder über die Breite des Widgets.


Beispiel visuallibrary.net

Im Stil des Carousel-Widgets können auch die Thumbnails der Neuzugänge dargestellt werden. Die Wahl der Bildausschnitte entfällt. Bildunterschrift ist das Datum. Erzeugt wird das Element per:

  
  {releaseHistory|thumbsOnly=true}

Teaser Widget:

Das Widget zeigt beim Aufruf der Seite per Zufallsauswahl eines der enthaltenen Bilder. Teaserelementen kann eine Überschrift und eine Bildunterschrift beigefügt werden.


Beispiel www.e-manuscripta.ch

Showcase-Widget

Das Widget erzeugt eine Reihe von Vorschaubildern. Beigefügt werden kann eine Bildunterschrift. Die Anordnung der Elemente kann als Raster, als vertikale oder horizontale Leiste per CSS bestimmt werden.


Beispiel

Vorgehen

Voraussetzungen

Widgets anlegen und pflegen können User mit den Rechten 'wiki'

Pages auswählen

Surfen Sie zu den Seiten ihrer Wahl und kopieren Sie die VLID's der Pages aus dem URL


Beispiel

Datenpool anlegen

  • Erstellen Sie ein Wiki und benennen Sie es entsprechend, zB. slider-daten
  • Kopieren Sie die VLID's in das Wiki und verpacken Sie die ID's nach folgendem Muster, nach jedem Element soll ein Zeilenumbruch stehen:
  
  {slider|1234}

  {slider|2235}

  {slider|3236}
  • notieren Sie Bildunterschriften in der dem Element folgenden Zeile:
  {slider|1234}
  A revision of the treaty, Titelblatt
  {slider|2235}
  nächster Text
  • [nur Teaser-Widget:] notieren Sie Bildüberschriften in der dem Element vorangehenden Zeile:
  ##Überschrift
  {teaser|1234}
  A revision of the treaty, Titelblatt
  • wenn das Element nicht direkt auf die Bild-Seite linken soll, notieren sie die alternative VLID (nach Längsstrich) dahinter
  {slider|1234|5678}
  • schließlich stellen sie dem vorbereiteten Datenpool den Aufruf für ihr Widget voran:
  {widget|format=slider|pool=slider-daten|width=700|height=300}

... {slider|2235} ...

Bildausschnitte wählen

  • Speichern sie ihr Wiki, hierbei wird die Editoransicht aktualisiert

  • Die Editor-Toolbar enthält jetzt ganz rechts ein Icon mit Bildsymbol und dem Tooltip "Bildausschnitte wählen"

Nach Klick auf "Bildausschnitte wählen" erhalten sie eine Ansicht auf das Set ihrer Elementauswahl:


Beispiel

Nach Klick auf den blauen Platzhalter erhalten Sie einen Dialog mit einem zoom- und verschiebbaren Image.


Beispiel

Bestätigen Sie ihre Auswahl des Bildauschnitts mit OK. Der gewählte Ausschnitt wird platziert.


Beispiel

Widget an der gewünschten Stelle im Portal einbinden und Widget erneut editieren

Das Widget kann nun in auf einer beliebigen Wikipage im Portal (zB. Home) augefrufen werden. Dazu kopieren Sie den im Datenpool-Wiki enthaltenen Aufruf

{widget|format=slider|pool=slider-daten|width=700|height=300}

an die gewünschte Stelle des Wikis, speichern, und wechseln zur Portalansicht. Das Widget wird angezeigt.

Ist man mit entspr. Userrechten eingelogged, enthält das Widget am oberen rechten Rand ein Icon, das zur Wahl der Bildausschnitte verlinkt.


Beispiel

Von dort aus kann auch wieder das den Datenpool enthaltende Wiki aufgerufen werden


Beispiel

Widget-Formate

Zusammenfassung

Ein Widget besteht aus einer Wikipage zur Pflege der Daten und Bildausschnitte. Sie enthält den Datenpool samt vorangestelltem Aufruf. Der Aufruf wird an die Stelle einer anderen Wikipage kopiert, wo das Widget zu sehen sein soll.

Im folgenden nochmals die Aufrufe für die bestehenden Widget-Formate. Der pool-Parameter enthält den Identifier (VLM: Identifier > wiki) des datentragenden Wiki. Der format-Parameter enthält den Widget-Namen in Kleinschreibung. Die width- und height-Parameter in den folgenden Beispielen beschreiben die konfigurierten Defaults und könnten damit auch weggelassen werden.

Slider

{widget|format=slider|pool=slider-daten|width=700|height=300}

{slider|1234|5678}

Bildunterschrift

Im Unterschied zum Slider werden hier die Dimensionen der Einzelbilder per itemWidth und itemHeight angegeben. Der width-Parameter bestimmt die maximale Gesamtbreite des Widgets und bleibt erhalten, der height-Parameter entfällt.

{widget|format=slider|pool=slider-daten|itemWidth=180|itemHeight=180|width=700}

Teaser

{widget|format=teaser|pool=teaser-daten|width=700|height=250}

##Überschrift

{teaser|1234}

Bildunterschrift

Showcase

{widget|format=showcase|pool=showcase-daten|width=130|height=170}

{showcase|1234|5678}

Bildunterschrift

XML-Style Widget-Deklaration

Manchmal kann es nötig sein, einen Widget-Aufruf innerhalb von HTML-Markup zu notieren, um das Widget zu platzieren - innerhalb eines Tabellenlayouts oder einer Box mit Abstandsangaben oder Informationen zur Ausrichtung.

Die bis hierhin vorgestellte Notationsform für die Widget-Daten und Aufrufe folgt der VL-Extension Syntax, die wie auch Markdown, nicht innerhalb von Html-Markup verwendet werden kann, das oder dessen übergeordnete Elemente HTML-Block-Level Elemente (zB. div, table) sind. Innerhalb von HTML-Inline-Elementen (zB. span) kann Markdown und VL-Extension Syntax verwendet werden.

Grundsätzlich und zur Verwendung innerhalb von HTML-Block-Level Elementen kann der Widget-Aufruf per XML notiert werden:

<part name="widget" format="slider" pool="slider-daten" width="700" height="300"/>