DropTours Brücke

Widgets

DropTours bietet die DropNet-Item-Schnittstelle, mit welcher dynamisch auf die Tourendaten und Adressdaten zugegriffen werden kann. Dadurch können die Daten in den unterschiedlichsten Darstellungen sehr einfach in die Homepage integriert werden. Die Integration ist nicht nur mit DropEdit, sondern auf fast jeder anderen Homepage auch möglich. So können zum Beispiel auf der Hauptseite die nächsten 5 Touren aufgelistet werden oder die nächste Tour wird als Slideshow besonders hervorgehoben. Die Darstellung erledigen Widgets. DropNet AG stellt bereits eine Vielzahl an Widgets zu Verfügung. Selbstverständlich sind auch individuelle Widgets möglich.

Der Einbau der Widgets

Die Widgets sind Javascript Schnipsel, welche auf jeder Seite integriert werden können. Dazu braucht es das Javascript und einen IMG-Tag. Das Javascript wird vom DropNet CDN-Server geliefert und am besten im Head eingebaut. Der IMG-Tag kann dann irgendwo auf der Seite integriert werden. Die Widgets sind auf jQuery v1.9.1 und Bootstrap v3.3.4 aufgebaut, was folgende Bibliotheken voraussetzt.

<link href="https://cdn.dropnet.ch/dropnetcss/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<script src="https://cdn.dropnet.ch/dropnetjavascript/jquery.js" type="text/javascript"></script>
<script src="https://cdn.dropnet.ch/dropnetcss/bootstrap/js/bootstrap.js" type="text/javascript"></script>

Dann braucht es die DropNet-Apps.

<link href="https://cdn.dropnet.ch/dropnet.min.css" type="text/css" rel="stylesheet" media="all">
<script src="https://cdn.dropnet.ch/dropnet.min.js" type="text/javascript"></script>

Slideshow

Die Slideshow stellt die Daten in einer automatisch wechselnden Slideshow dar. Das eignet sich vor allem für Touren und Fotoalben. So können zum Beispiel sehr attraktiv die nächsten 3 Touren dargestellt werden.

<img class="dropapp-slider" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="https://ssl.dropnet.ch/droptouren/dropnetapps/tours/api.php?command=getTours" data-max="10" data-language="de" data-link="" alt="" width="16" height="16">

Galerie

Die Galerie stellt die Bilder aus einem Album attraktiv mit Überblenden dar. Damit können zum Beispiel die nächsten 3 Touren oder der letzte Tourenbericht dargestellt werden. Der übersichtliche Bildteppich ist bewusst in einem separaten img-Tag untergebracht, damit er flexibel platziert werden kann. Die Galerie darf auf einer Seite nur einmal eingesetzt werden.

<img alt="" class="dropapp-photo" height="350" src=”/dropnetimages/dropbox/standard/status-wait.gif" data-interface=”https://ssl.dropnet.ch/droptouren/dropnetapps/tours/api.php?command=getTours&limit=10" data-link="http://www.droptouren.ch/touren/" data-language="de" width="600">
<img class="dropapp-photo-carpet" src="">

 

 

Parameter

Die Parameter werden dem img-Tag übergeben. Das obige Beispiel ist die minimalste Version, welches alle zukünftigen Touren darstellt. Mit folgenden Parametern kann die Ausgabe gefiltert werden:

ParameterBeschreibungBeispiel
classÜber diese Klasse wird das Widget aufgebaut.dropapp-photo
srcBis das Javascript fertig geladen ist, wird dieses Bild dargestellt..../status-wait.gif
widthDie Beiden Parameter width und height werden nur für das Verhältnis gebraucht und für die Darstellung des ersten Bildes, bis das Javascript übernimmt.300
heightsiehe width400
data-interfaceDas Interface ist die Item-Schnittstelle an DropTours, DropPhoto, DropNews oder an eine andere App. Hinter dem Fragezeichen können noch weitere Parameter zur Filterung der Daten mitgegeben werden.
https://ssl.dropnet.ch/droptouren/dropnetapps/tours/api.php?command=getTours
data-linkHier kann ein default-Link eingetragen werden.http://www.droptouren.ch/touren
data-languageSprache für die Ausgabe. Je nach App kann es sprachabhängige Daten beinhalten.de, fr, en, it
data-diaspeedSoll eine automatisch laufende Diashow erstellt werden, so kann hier in ms die Zeit zwischen den Wechseln angegeben werden.2000
data-diafadespeedHier kann die Geschwindigkeit für den Überblendeffekt angegeben werden.1000
DropTours-ParameterDiese Parameter werden im data-interface als GET-Parameter mitgegeben.
limitDie Anzahl Datensätze kann hier limitiert werden.5
offsetEs können so zum Beispiel ab dem dritten Datensatz dargestellt werden.3
date_startEs werden alle Touren ab diesem Datum dargestellt.2017-09-01
data_endEs werden alle Touren bis zu diesem Datum dargestellt.2017-12-31
categoryHier kann der Tourtyp übergeben werden.BW
groupGruppeJugend
searchVolltextsuchegipfel
eventtypeDer Veranstaltungstyp kann je nach Sektion sehr unterschiedlich sein.Events

Bildgrösse

Die Höhe und Breite muss immer angegeben werden auch wenn diese später mit CSS oder JavaScript überschrieben wird. Wenn die Grösse des Bildes im CSS angegeben werden soll, dann muss das für die ID #dropapp-photo-web angegeben werden, weil anhand dieser Grösse alle abhängigen Grössen im Javascript berechnet werden.

Tourenliste integrieren (iFrame)

Für die Tourenliste existiert noch kein Widget in Javascript. Dort ist der einfachste und sicherste Weg die iFrame Technik. Mit folgendem Code kann die komplette Tourenapplikation mit Anmeldungen usw. integriert werden.

<iframe style="border: none;" src="https://ssl.dropnet.ch/droptouren/dropbox/touren/" width="711" height="1000" name="DropTours"></iframe>

In diesem Beispiel funktionieren nicht ganz alle Links, weil die Domain droptouren.ch ohne iFrame in Betrieb ist und somit die Links nicht umgeschrieben werden dürfen. Der Begriff droptouren muss durch den Namen der Sektion ersetzt werden (z.B. sac-basel).