Custom theme blocks
This advanced feature lets you write a function to generate the HTML for special theme blocks. To understand why this is needed we'll take, again, the Ocean theme as example.
Ocean has a block type called "sidebar-quote". Its mission is to display a random quote each time a page is loaded. Block type definiton:
{
"id": "sidebar-quote",
"code": "sidebar-quote",
"title": "@ocean_sidebar_quote",
"type": "theme",
"width": "220",
"order": "random"
}
Why do we need to set "type": "theme"? Our objective is to display that random quote between... well... quotes ;)
We could have achieved that by three different methods:
a using the :before and :after selectors in the theme stylesheet
b forcing the user to include both images when creating a quote in Navigate CMS
c theme appends an image tag on both sides of text automatically
Each method has its benefits and downsides, but we are not discussing this topic here. Ocean uses the last method and its a perfect example to understand the custom theme blocks.
In our templates we request a quote through a nv tag call:
<nv object="nvweb" name="blocks" type="sidebar-quote" number="1" />
Nothing weird here. We want only one item of the type "sidebar-quote". Navigate CMS parses this tag and selects a random quote following the rules given in the definition. It also checks that this is a custom block template thanks to the type: "theme" property we had given before. At this point the parser makes a request to the theme webget asking to generate the HTML for that selected block.
What actually happens is that the parser calls a function named: nvweb_ocean_blocks_render. Change "ocean" for your theme codename. The function source code is:
function nvweb_ocean_blocks_render($block, $vars)
{
global $current;
global $theme;
global $website;
$out = array();
switch($block->type)
{
case 'sidebar-quote':
$out[] = '<div class="block-quote-right">';
$out[] = '<span>';
$out[] = '<img src="img/quotes1.png" align="bottom"/>';
$out[] = strip_tags($block->trigger['trigger-content'][$current['lang']]);
$out[] = '<img src="img/quotes2.png" align="top"/>';
$out[] = '</span>';
$out[] = '</div>';
break;
}
return implode("", $out);
}
This function receives every custom theme block to be generated. Two parameters are sent: block object and the array of attributes of the nvtag who generated this call.
We could receive another types of blocks, so we need to have a switch/case based on that variable. Once "sidebar-quote" is detected we start generating the HTML code in the $out variable. We add a div wrapper, the two quote images and finally the text quote extracted from the $block object which is located in the trigger property.
Explaining each $block object property falls outside this section of the manual. If you need more support leave a message in the forums or open a support ticket in the Naviwebs website.
0 Comments