Custom Template

It's very easy to create and use custom templates in wk-gigatools. Just go to the gigatools plugins folder. There you will see an empty folder called "custom". This is the destination, where all of your customization flows into.

Now let's create a template file called "custom.html" and add the following code to it:

<!-- wraps all events -->
<div class="events-wrapper">
  <!-- iterates all through all events -->
  <div class="filtr-item event-init" data-category="1"> 
        <!-- All you Code flows here -->
  </div>
</div>

This is the basic setup for a custom view. Isn't it easy?

Notice: You need this two div's above to get your template up and running. The nested div will be generated for every single event. It's possible to add custom classes on it.

Now you can write your custom code into <!-- All you Code flows here -->

To recieve data from gigatools, you can use our predefined classes. Here's an example usage:

<div class="events-wrapper">  
  <div class="filtr-item event-init" data-category="1, 5"> 
    <img class="wk-image" alt="event image">
  </div>
</div>

The src="" of the image will automatically be set to the image url of your gigatools events.

That's just one of many predefined classes. See the following list of classes you can use:

class markup result
wk-title <span class="wk-title"></span> Title of your event
wk-info <span class="wk-info"></span> Description of event
data-crop="" (property) <span class="wk-info" data-crop="50"></span> crops the text to the number of characters you pass (only on description)
wk-date <span class="wk-date"></span> 22.10.2016
wk-day <span class="wk-day"></span> 22
wk-month <span class="wk-month"></span> 10
wk-month-short <span class="wk-month-short"></span> Oct
wk-month-long <span class="wk-month-short"></span> October
wk-year <span class="wk-year"></span> 2016
wk-year-short <span class="wk-year"></span> 16
wk-time <span class="wk-time"></span> 22:00
wk-url <a href="" class="wk-url">Event</a> link to event
wk-venue <span class="wk-venue"></span> location name
wk-tickets <a href="" class="wk-tickets">Detail</a> Ticket Url
wk-detail <a href="" class="wk-detail">Detail</a> link to detail page
wk-maps <div id="map"></div> Google Maps
wk-artist <span class="wk-artist"></span> artistname
wk-artist-booking <a href="" class="wk-artist-booking"></a> [email protected]
wk-artist-mixcloud <a href="" class="wk-artist-mixcloud">Custom</a> Custom
wk-artist-soundcloud <a href="" class="wk-artist-soundcloud">Custom</a> Custom
wk-artist-twitter <a href="" class="wk-artist-twitter">Custom</a> Custom
wk-artist-url <span class="wk-artist-url"></span> Custom

Feel free to create awesome stuff!

results matching ""

    No results matching ""