Skjer-i socialplugins

Skjer-i på din nettside

Kom i gang

For å legge til boksen på din nettside, må du legge til følgende HTML-kode der du ønsker å vise boksen på siden:

<div id="din-id-for-skjer-i-boksen" class="skjeri_eventlisting"
data-plugintype="eventlisting"
data-param-placeslug="din-kommune"
style="width: bredde; height: høyde;"></div>

Du må også legge til følgende i slutten av BODY:

<script src="http://skjer-i.no/skjeri_socialplugins/latest/social.js"></script>
<script>
    skjeri_socialplugins.create(document.getElementById("din-id-for-skjer-i-boksen")).load();
</script>

Parametere

Parametere defineres gjennom data- attributter i div-taggen for boksen.

Parameter Beskrivelse Påkrevd?
plugintype Definerer hvilken type plugin du legger til. Må være eventlisting, men det kommer flere typer etterhvert. Foreslå gjerne andre typer bokser/widgets. Ja
placeslug

Definerer navnet på stedet some skal vises. Dette er teksten etter hvis du besøker skjer-i.no og velger en kommune, vil du finne placeslug helt i slutten av URLen etter http://skjer-i.no/.

Du kan også vise arrangementer fra flere steder. Da legger du inn stedene med , (comma) mellom.
Eksempel: marker-kommune,aremark-kommune,romskog-kommune.

Ja
limit Maksimalt antall hendelser som lastes i boksen. Hvis ikke dette settes, brukes verdien 8. Nei
include_old_hours Antall timer bakover i tid som vises. Hvis ikke dette settes, brukes verdien 3. Nei
size Størrelsen på bildene. Må være enten small eller medium. Hvis ikke dette settes, brukes verdien small. Hvis størrelsen er small brukes bilder som har 120px bredde. Hvis størrelsen er medium, brukes bilder som har 320px bredde. Nei
items_per_row Antall arrangementer som vises per rad. Må være enten 2 eller 3. Hvis ikke dette settes, brukes verdien 2. Nei
hide_footer Footer vises ikke hvis dette er satt til true. Nei

Styles

Du må gi boksen en høyde og en bredde. Boksen må ikke være mindre enn enn 230px bred. Hvis boksen er mer enn 255px bred, bør size settes til medium.

Debugging

For mer informasjon i utviklerkonsollen i nettleseren, legg til følgede linje før skjeri_socialplugins.create(...):

skjeri_socialplugins.logger.setLevel('DEBUG') /* NOTE: For debugging - the default is ERROR */

Kildekode

Det er ofte ønskelig å gå over kode før man bruker den på sin egen side. Du kan lese JavaScript koden (social.js), og CoffeeScript koden som Javascript koden kompileres fra (social.coffee). Kode har ingen eksterne avhengigheter, og den fungerer i alle moderne nettlesere, inkludert IE8. Det eneste koden legger til i det globale namespacet er variablen window.skjeri_socialplugins. At den ligger i window, betyr at variablen også er tilgjengelig som bare skjeri_socialplugins.

Hjelp/kontakt

Kontakt oss på webcontact@skjer-i.no

Eksempler/forhåndvising

Nedenfor finner du noen eksempler. Du kan foråndsvise med en annen kommune enn marker-kommune. Bare skriv inn navnet på kommunen i feltet nedenfor og klikk Vis.

Se dokumentasjonen for parameteret placeslug for mer informasjon om hva du skal skrive i feltet.

Se eksempel for for parameteret organizerslug for mer informasjon om hva du skal skrive i feltet. Dette kan også stå tomt.

Eksempel 1 Minimalistisk

Et relativt minimalistisk eksempel. I tillegg til de påkrevde stilene for bredde og høyde, setter vi en 3px bred ramme.

<div id="skjeri_box1" class="skjeri_eventlisting"
data-plugintype="eventlisting"
data-param-placeslug="marker-kommune"
style="width: 255px; height: 400px;"></div>

Eksempel 2 Ekstra parametere

I dette eksemplet setter lager vi en smal og lang boks. Ettersom boksen er lang, må vi sette limit til et høyere tall, slik at vi er sikker på å fylle boksen. Ettersom vi har litt mer plass, tar vi også med litt flere utgåtte events via parameteret. Vi legger også på en ramme på boksen, for å demonstrere at du kan legge til det du ønsker av styles rundt boksen. include_old_hours.

<div id="skjeri_box2" class="skjeri_eventlisting"
data-plugintype="eventlisting"
data-param-placeslug="marker-kommune"
data-param-limit="20"
data-param-include_old_hours="6"
style="width: 230px; height: 600px; border: 3px solid rgb(200, 200, 200);"></div>

Eksempel 3 Medium bildestørrelse

I dette eksemplet setter vi bredden slik at den vanlige bildestørrelsen vil bli for liten. Derfor setter vi size-parameteret til medium

<div id="skjeri_box3" class="skjeri_eventlisting"
data-plugintype="eventlisting"
data-param-placeslug="marker-kommune"
data-param-size="medium"
style="width: 500px; height: 600px; "></div>

Eksempel 4 Bred boks med kun de neste 3

I dette eksemplet viser vi en 900px bred boks som kun viser de neste 3 arrangementene. Mer også at footeren er helt fjernet. Dette gjør det mulig å få en veldig ren visning hvis dette er ønsket. For å vise en slik boks, sett limit-parameteret til 3, items_per_row-parameteret til 3, og hide_footer til true.

<div id="skjeri_box3" class="skjeri_eventlisting"
data-plugintype="eventlisting"
data-param-placeslug="marker-kommune"
data-param-size="medium"
data-param-limit="3"
data-param-items_per_row="3"
data-param-hide_footer="true"
style="padding-top: 10px; width: 900px; height: 170px; background: none; border: 1px solid purple"> </div>

Eksempel 5 Hent kun for én arrangør

I dette eksemplet vises samme layout og design som over, men her vises kun arrangementer fra én arrangør. Hvis du har en egen nettside for f.eks fotball-laget og ønsker å vise arrangementer for laget her, så kan du bruke data-param-organizerslug i tillegg til data-param-placeslug.

<div id="skjeri_box3" class="skjeri_eventlisting"
data-plugintype="eventlisting"
data-param-placeslug="marker-kommune"
data-param-organizerslug="organizerslug"
data-param-size="medium"
data-param-limit="3"
data-param-items_per_row="3"
data-param-hide_footer="true"
style="padding-top: 10px; width: 900px; height: 170px; background: none; border: 1px solid purple"> </div>

Hent for flere gitte arrangører

Du kan også vise arrangementer for flere arrangører innenfor de kommunene du har angitt, ved å liste organizer slugs separert med komma.