Bootstrap Service

If you are using the Bootstrap framework to create responsive Templates, the Bootstrap Service of the TemplateTools is the icing on the cake for you.

The Bootstrap Service support you with some helpful functions:

• $template['bootstrap']->alert()
• $template['bootstrap']->breadcrumb()
• $template['bootstrap']->locale_navigation()
• $template['bootstrap']->nav()
• $template['bootstrap']->pager()
• $template['bootstrap']->sitelinks_navigation()
• $template['bootstrap']->social_sharing_buttons()

###alert(), bootstrap_alert()

Parameter

• string $message - the message to alert
• array $options - optional, default = array()
• boolean $prompt - optional, default = true (php only)

Usage php

<?php $template['bootstrap']->alert("I'm a alert!"); ?>

Usage twig (as Function)

{{ bootstrap_alert("I'm a alert!") }}

Requirements

• bootstrap.min.css
• jquery.min.js
• bootstrap.min.js

This function create a Bootstrap Alert Component.

You can use the $options array to fit the Alert to your needs:

{{ bootstrap_alert('Hello %guest%', {
	'type' : 'alert-info',
	'parameter' : {
		'%guest%' : CMS_USER_DISPLAYNAME
	},
	'translate' : true,
	'dismissable' : true,
	'template_directory' : '@pattern/bootstrap/function/alert/'
}) }}

By default bootstrap_alert() will try to translate the $message, you can submit 'parameter' for the translation as array. If you set 'translate' to false, the translation service is switched off and 'parameter' will be ignored.

If 'dismissable' is true (default), Alert will be shown as Dismissable Alert.

By default the Alert will load the needed templates from the 'template_directory' => '@pattern/bootstrap/function/alert/' - you can define any other namespace to load the templates from.

###breadcrumb(), bootstrap_breadcrumb()

Parameter

• array $options - optional, default = array()
• boolean $prompt - optional, default = true (php only)

Usage php

<?php $template['bootstrap']->breadcrumb(); ?>

Usage twig (as Function)

{{ bootstrap_breadcrumb() }}

Requirements

• bootstrap.min.css
• jquery.min.js
• bootstrap.min.js

This function create a Breadcrumb Navigation for the current page as Bootstrap Breadcrumb Component.

You can use the $options array to fit the Breadcrumb to your needs:

{{ bootstrap_breadcrumb({
    'link_home' : true,
    'menu_level': 0,
    'template_directory' : '@pattern/bootstrap/function/breadcrumb/'
}) }}

'link_home' is by default true and will show a linked Home Icon at the first position of the Breadcrumb.

By default the Breadcrumb will load the needed templates from the 'template_directory' => '@pattern/bootstrap/function/breadcrumb/' - you can define any other namespace to load the templates from.

###locale_navigation(), bootstrap_locale_navigation()

Parameter

• array $options - optional, default = array()
• boolean $prompt - optional, default = true (php only)

Usage php

<?php $template['bootstrap']->locale_navigation(); ?>

Usage twig (as Function)

{{ bootstrap_locale_navigation() }}

Requirements

• pattern.min.css

This function will create a locale navigation which enable the user to switch between different languages. locale_navigation() will parse the CMS page tree and extract the top level entries to build the locale navigation. The function expect a page structure for multilingual websites as described in the WebsiteBaker documentation.

locale_navigation() expect the language codes in ISO 639-1 and will provide you with the international language name and also with the native language name.

If you have set up your page for German and English languages this will return a navigation with two flags:

which indicate that German is active and English can be selected.

By default the navigation will switch to the first page of the selected locale.

It is more user-friendly to switch from the current page to the fitting page in the selected locale. To realize this, locale_navigation() must know which pages belong together.

You can use the page_option() feature and set the option locale_id with identical values for the fitting pages. For example, you have a page in English language at:

http://domain.tld/page/en/about-us.php

and a page with the same content but in German language at:

http://domain.tld/page/de/ueber-uns.php

Now you can set the option locale_id in keyword field of the page settings of both pages to the value about:

[locale_id:about], Keyword 1, Keyword 2

Repeat this for all fitting pages in all languages. locale_navigation() will use this information to build fitting links in the language selection.

If you are using LEPTON CMS or BlackCat CMS you can also set the URL of the pages, which belong together, to the same name (see: Mehrsprachige Webseiten mit LEPTON CMS), locale_navigation() will detect the fitting pages and create the correct links.

Use the $options array to fit locale_navigation() to your needs, twig example with the default values:

{{ bootstrap_locale_navigation({
    'locales' : null,
    'menu' : 1,
    'visibility' : [
        'public'
    ],
    'template_directory' : '@pattern/bootstrap/function/locale/'
}) }}

With locales you can manually define the languages to use as array ['de','en','fr'], select another menu as the default, change the visibility or the template_directory.

###nav(), bootstrap_nav()

Parameter

• string $class - the classes you want to use for the Bootstrap Nav Component
• array $options - optional, default = array()
• boolean $prompt - optional, default = true (php only)

Usage php

<?php $template['bootstrap']->nav('nav nav-pills'); ?>

Usage twig (as Function)

{{ bootstrap_nav('nav nav-pills') }}

Requirements

• bootstrap.min.css
• pattern.min.css
• jquery.min.js
• bootstrap.min.js

This function generate the page navigation links from the Content Management System and return it as unsorted <ul> list, which can be used within the Bootstrap Nav Components:

• Nav Pills - parameter $class => nav nav-pills
• Nav Tabs - parameter $class => nav nav-tabs
• Navbar - parameter $class => nav navbar-nav

You can append additional classes to the parameter $class, in example nav-justified or nav-stacked.

Use the $options array to fit the output of the function to your needs, twig example with the default values:

{{ bootstrap_nav('nav nav-pills', {
    'menu_id' : 0,
    'menu_level' : 0,
    'menu_level_max' : -1,
    'indicate_parent' : true,
    'dropdown_link' : {
        'add' : true,
        'divider' : true
    },
    'icons' : {
       'page_id' : {},
        'height' : 15
    },
    'visibility' : [
        'public'
    ],
    'template_directory' : '@pattern/bootstrap/function/nav/'
}) }}

You can set any option you need in any order:

• integer 'menu_id' - default = 0, usage like in show_menu2(), 0 will show all menus, 1 will show only the menu with the ID 1 ...
• integer 'menu_level' - the menu level at which the list will start: 0 = top level, 1 = second level ...
• integer 'menu_level_max' - the maximum level to which up the list will be generated, -1 will show all levels, 2 will show up to the third level ...
• boolen 'indicate_parent' - set the class active if a page child is active. Useful if you have limited the levels with 'menu_level_max', is set to true by default.
• array 'dropdown_link' - because the Nav and Navbar Components are responsive and open the drop down menu links at click on the top menu item, they will not open the associated content. Therefore all top menu items of a drop down menu should be created as Menu Link to make Nav and Navbar working as expected.
• boolean 'dropdown_link' => 'add' - default true. To avoid problems with the linking of the top menu item of a drop down link, nav() will add an extra drop down link, which is needed for WYSIWYG pages. Switch the option add to false if you are using Menu Links at the top level.
• boolean 'dropdown_link' => 'divider' - default true. Add a divider below the extra drop down link to distinguish it.

You can add icons or images to the menu links, just insert an array as parameter and specify the PAGE_ID and the icon or image to use:

{{ bootstrap_nav('nav navbar-nav', {
    'icons' : {
        'page_id' : {
		    118 : 'glyphicon-lock',
	        120 : 'fa-bookmark-o',
		     79 : '/media/example.jpg',
			115 : '/public/example.png'
		},
        'height' => 20		
    })
}}

This will associate:

• the Glyphicon glyphicon-lock to the link for the PAGE_ID 118 and insert the additional HTML code <i class="glyphicon glyphicon-lock"></i>. You can use any glyphicon- you want.
• the Font Awesome icon fa-bookmark-o to the link for the PAGE_ID 120 and insert the additional HTML code <i class="fa fa-bookmark-o"></i>. You can use any fa- icon you want, but you must enable Font Awesome in your template, i.e. with: <link href="<?php echo LIBRARY_URL; ?>/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet" />
• the image /media/example.jpg from the /media directory of your CMS to the link for the PAGE_ID 79 and insert the additional HTML code <img src="http://yourdomain.tld/media/example.jpg" height="20" alt="Page title" />. You can also use subdirectories. By default nav() will use a height of 15 pixel, add height to the icons options array to specify another height (see example above)
• the image /public/example.png from the public media directory of the kitFramework in /kit2/media/public to the link for the PAGE_ID 115 and insert the additional HTML code <img src="http://yourdomain.tld/kit2/media/public/example.jpg" height="20" alt="Page title" />. You can also use subdirectories. By default nav() will use a height of 15 pixel, add height to the icons options array to specify another height (see example above).

By default nav() or bootstrap_nav() will show all menu items with the visibility public, you can also specify another visibility like hidden, private or none.

By default nav() or bootstrap_nav() will load the needed twig templates from the @pattern Namespace: 'template_directory' => '@pattern/bootstrap/function/nav/', you also use any other namespace.

###pager(), bootstrap_pager()

Parameter

• array $options - optional, default = array()
• boolean $prompt - optional, default = true (php only)

Usage php

<?php $template['bootstrap']->pager(); ?>

Usage twig (as Function)

{{ bootstrap_pager() }}

Requirements

• bootstrap.min.css

This function create a Pager (Previous / Next Pagination) for the current page as Bootstrap Breadcrumb Component.

By default the Pager will center the both buttons.

Use the $options array to fit the output of the function to your needs, twig example with the default values:

{{ bootstrap_pager({
    'previous' : true,
    'next' : true,
    'center' : true,
    'visibility' : [
        'public'
    ],
    'template_directory' : '@pattern/bootstrap/function/pager/'
}) }}

Set 'previous' or 'next' to false to hide one of these buttons. If you set 'center' to false the buttons will be aligned to the left and right side of the parent container. By default the 'visibility' is set to 'public' only, you can add other states, i.e. 'hidden'.

By default the function will load the needed twig templates from the @pattern Namespace: 'template_directory' => '@pattern/bootstrap/function/pager/', you also use any other namespace.

###sitelinks_navigation(), bootstrap_sitelinks_navigation()

Parameter

• integer|string $menu - the menu to use
• array $options - optional, default = array()
• boolean $prompt - optional, default = true (php only)

Usage php

<?php $template['bootstrap']->sitelinks_navigation('Teaser'); ?>

Usage twig (as Function)

{{ bootstrap_sitelinks_navigation('Teaser') }}

Requirements

• bootstrap.min.css

This function will return a responsive navigation divided in multiple columns (3, 4 or 6). The menu tree should be build like this schema:

'Sitelinks' (as Menulink)
  ↳'Column 1' (as Menulink)
    ↳'Link 1' (any content)
    ↳'Link 2' (any content)
  ↳'Column 2' (as Menulink)
    ↳'Link 1' (any content)
    ↳'Link 2' (any content)
...

Use the $options array to fit the output of the function to your needs, twig example with the default values:

{{ bootstrap_sitelinks_navigation('Teaser', {
    'level': 0,
    'strict': true,
    'visibility': [
        'public'
    ],
    'template_directory': '@pattern/bootstrap/function/sitelinks/'
}) }}

Use level to change the menu level. By default strict mode is enabled, the function will only return menu items of type $menu - otherwise also return other menu types.

###social_sharing_buttons()

Parameter

• array $buttons - the buttons to use
• array $options - optional, default = array()
• boolean $prompt - optional, default = true (php only)

Usage php

<?php $template['bootstrap']->social_sharing_buttons(
	array(
    	'email' => array(
    		'to' => '[email protected]',
    		'subject' => 'Any subject'
    		'body' => 'Any email body content',
    		'cc' => '[email protected],second@foobar,tld'
    	),
    	'facebook' => array(
    		'url' => PAGE_URL    		
    	),
    	'tumblr' => array(
    		'url' => PAGE_URL,
    		'title' => PAGE_TITLE
    	),
    	'linkedin' => array(
    		'url' => PAGE_URL,
    		'title' => PAGE_TITLE,
    		'description' => PAGE_DESCRIPTION
    	),
    	'twitter' =>array(
    		'url' => PAGE_URL,
    		'title' => PAGE_TITLE
    	),
    	'reddit' => array(
    		'url' => PAGE_URL
        ),
        'google' =>array(
        	'url' => PAGE_URL
        ),
        'pinterest' => array(
        	'url' => PAGE_URL,
        	'media' => ''
        ),
        'github' => array(
        	'url' => 'https =>//github.com/owner/repository'
        )
    ),
    array(
    	'template_directory' => '@pattern/classic/function/socialsharingbuttons/'
    ),
    true
); ?>

Usage twig

• see @pattern/bootstrap/social.sharing.buttons.twig

Requirements

• rrssb.min.css
• jquery.min.js
• rrssb.min.js

The example above is showing all available buttons with their individual parameters. Add only the buttons you need. There are only two buttons where the parameters must be set:

• email - you must set the parameter to and subject all other parameters are optional
• github - you must set the parameter url which is linking to the desired repository

All other buttons are using default parameters, so you can be lazy and set null or an empty array() as parameter, i.e.:

<?php $template['bootstrap']->social_sharing_buttons(
	array(
    	'facebook' => null,
    	'twitter' => null,
    	'google' => null	        
    )	    
); ?>

will be working fine and showing the buttons for Facebook, Twitter and Google+.

⇐ Constants | Classic Service ⇒