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!