Speakers and event pages

The Fest theme contains a custom post type – Speakers. As you can see in the back-end, there is a special tab in the sidebar:

Using this tab you can add new speakers. Please remember few important facts:

1) The speakers category layout:

is strictly connected with the category view override based on the following syntax:

[code style=”1″]category-CATEGORY-SLUG.php[/code]

in our demo we have created category Speakers with slug speakers, so we have used the following filename:

[code style=”1″]category-speakers.php[/code]

Event pages

Some pages like Sponsors or Schedule are based on the custom page template – Event page. It is a normal page but with the special header:

The title of this type is created automatically using the Event page layout.

Sponsors logotypes

The Fest theme contains a special structure for the sponsors logotypes.

First special place is located in the sponsors widget area. There you can place a following structure:

<div class="gk-sponsors">
<h2>Sponsors</h2>
<div>
<a href="#"><img src="images/demo/sponsor1.png" alt="Sponsor #1"></a>
<a href="#"><img src="images/demo/sponsor2.png" alt="Sponsor #2"></a>
...
<a href="#"><img src="images/demo/sponsor1.png" alt="Sponsor #N"></a>
</div>
</div>

The logotypes will be animated on scroll:

The second place for the sponsors is the Sponsors post – you have to create a page using the “event page” layout and then publish it. The structure for the animated sponsors is easier:

<div class="gk-sponsors-wrap">
<a href="#"><img src="images/demo/sponsor1.png" alt="Sponsor #1"></a>
<a href="#"><img src="images/demo/sponsor2.png" alt="Sponsor #2"></a>
...
<a href="#"><img src="images/demo/sponsor1.png" alt="Sponsor #N"></a>
</div>

The logotypes will be animated on the page load:

The CSS code responsible for the animation is placed in the css/extensions.css file.

Header animation

The header animation is based on our simple CSS animation engine, which uses a simple JavaScript code

Our simple animation engine is based on the data-* attributes.

For creating animation please creata a container with class gk-animation and put elements inside it. We recommend to style these elements in the css/extensions.css file.

You have to specify for every element at least two attributes: data-start and data-end. The first attribute contains starting properties for the element and these properties should be written with units. The second attribute specify which properties will be animated and what will be their final value (without units).

There are also two additional attributes: data-time and data-delay. The data-time attribute specify the time of the animation in miliseconds. The second attribute specify the time of delay for animation of the specific element (of course in the miliseconds).

The very important is fact that the content of the data-start attribute specify the start position of the animated element and all elements should be hidden at start using in example {‘opacity’: 0} at the data-start attribute.

[warning]Please remember to use the apostrophes around the property name – without it the animation won’t work![/warning]

Let’s analyze a simple example:
[code]<div class=”gk-animation” data-height=”530″>
<div class=”gk-animation-wrap”>
<h2 class=”gk-scale-up” data-start=”{‘opacity’:0}” data-end=”{‘opacity’:1}” data-delay=”200″ data-time=”500″>Friday June 27th. & Saturday June 28th. 2014</h2>
<h1 class=”gk-scale-up” data-start=”{‘opacity’:0}” data-end=”{‘opacity’:1}” data-delay=”600″ data-time=”500″>Festival Musico</h1>
<div class=”gk-stars” data-start=”{‘opacity’:0}” data-end=”{‘opacity’:1}” data-delay=”1000″ data-time=”500″>* * * * * *</div>
</div>
</div>[/code]

As you can see the animation engine needs two basic wrappers – gk-animation and gk-animation-wrap. The animation will start with using opacity for animation after 200ms and with duration 500ms for the h2 element. Then (after 400ms – it is a difference between date-delay for both elements) animation will start for the h1 element also with duration 500ms. At the end the .gk-stars element will be animated.

We have also included additional class gk-scale-up which can be used for elements which will be scaled from 0 to 100% of their original size using the CSS3 transform property. We have to move this animation to the CSS code due problems with prefixed properties in the jQuery code.

It is worth to mention that some elements can be also animated in two other states of the animation – the gk-animation container changes his CSS classes – after loading the page the “loaded” class is added and after displaying the whole container the “displayed” class is added. We have used this mechanism for animating the .gka-background element in our header animation.

Responsive layout

Please remember that you have to scale down all your header elements for the tablet and mobile devices – please use for it the css/tablet.css and css/mobile.css files.

Countdown

We have implemented our own implementation of the countdown. It is very simple to implement:

[code]<div
class=”gk-jscounter gk-scale-up”
data-dateend=”2-6-2013″
data-timeend=”19:42″
data-timezone=”+2″
data-start=”{opacity:0}”
data-end=”{opacity:1}”
data-delay=”900″
data-time=”500″
>
Counting finished!
</div>[/code]

Te idea of the counter is simple – the content of the gk-jscounter element will be displayed when the counting will be finished. To specify the time for countdown you have to specify it in the two attributes – data-dateend and data-timeend. The first attribute is used to specify the end date (in format D-M-Y) and the second attribute is used to specify the end time (in format h:m).

n[warning]Very important fact – if you’re using not the UTC time, please specify the data-timezone attribute – it will guarantee that the time will be calculated correctly for all users.[/warning]

The rest of the data-* attributes was described in the previous paragraphs as a part of the animation engine.