Skip to content

Classic Pattern

Jump to bottom Edit New page
hertsch edited this page May 23, 2014 · 9 revisions

Classic Pattern can be used with every Template and does dot depend on a specific CSS Framework like Bootstrap.

For the usage with the Bootstrap CSS Framework there exists special Bootstrap Pattern.

A Pattern is a Twig Template you can include or extend within your Template php or twig file, the Classic Pattern complete the Classic Service.

Classic Pattern Templates

###@pattern/bootstrap/browser.check.twig

Usage php

<?php $template['twig']->display('@pattern/classic/browser.check.twig'); ?>

Usage twig, including the pattern

{% include '@pattern/classic/browser.check.twig' %}

Require

  • pattern.min.css
  • /image/warning.gif

This pattern is using the Browser Service to detect browsers which are out of date and to show a small warning in the style of Browser-Update.org. In different to the origin Browser-Update.org script this pattern does not need any JavaScript and can be easy adapted and changed by you.

If the pattern detect an outdated browser it will show a small hint which can be placed at the top of the website and link to the update page of Browser-Update.org, you can change this too.

###@pattern/classic/head.open.graph.twig

Usage php

<?php $template['twig']->display('@pattern/classic/head.open.graph.twig'); ?>

Usage twig, including the pattern

{% include '@pattern/classic/head.open.graph.twig' %}

This <meta> segment provide you with the Facebook Open Graph Meta Tags:

<meta property="og:title" content="{{ page_title() }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ PAGE_URL }}">
{% set image = page_image() %}
{% if image|length > 0 %}
  <meta property="og:image" content="{{ page_image() }}" />
{% endif %}
<meta property="og:description" content="{{ page_description() }}" />

these tags grant, that the page will be linked correct and use the in og:image specified image.

The function page_image() will grab the first image from a WYSIWYG, NEWS, TOPICS or flexContent article and can also fallback to an default image.

###@pattern/classic/head.simple.twig

Usage php

<?php $template['twig']->display('@pattern/classic/head.simple.twig'); ?>

Usage twig, including the pattern

{% include '@pattern/classic/head.simple.twig' %}

Usage twig, extending the pattern

{% extends '@pattern/classic/head.simple.twig' %}

The head.simple.twig return a complete <head> ... </head> section with all needed <meta> tags, setting page title, description and keywords and loading standard css files (also a /css/screen.css if it exists in your template directory) and jQuery files for the installed add-ons.

You can display the pattern using php or include it with twig without any changes.

You can also use the pattern as base and extend it within your template, keeping the original code.

The pattern head.simple.twig enable you to extend the following blocks:

  • meta - block for the <meta> tags
  • css - block for the css files
  • jquery - block for the jQuery files

use the function parent() to keep the original block content and then to add your own content.

Example:

{% extends '@pattern/classic/head.simple.twig' %}
{% block css %}
	{{ parent() }}
	<link href="{{ TEMPLATE_URL }}/css/print.css" rel="stylesheet" />
{% endblock css %}

will keep the pattern intact and load /css/print.css below all other css files.

###@pattern/classic/html.simple.twig

Usage twig, extending the pattern

{% extends '@pattern/classic/html.simple.twig' %}

This pattern contain a <html> skeleton, a complete <head> section (see also head.simple.twig) and a empty block body to enable you to fill in your own body content.

{% extends '@pattern/classic/html.simple.twig' %}
{% block body %}
	<div class="navigation">
		{{ show_menu2() }}
	</div>
	<div class="content">
		{{ page_content() }}
	</div>
{% endblock %}

will generate a complete template for a simple website.

###@pattern/classic/login.twig

Usage php

<?php $template['twig']->display('@pattern/classic/login.twig'); ?>

Usage twig, including the pattern

{% include '@pattern/classic/login.twig' %}

This pattern will return a ready to use login dialog with all checks and features you normally will need.

Have look into the source, you will see that it is easy to format and adapt the dialog(s) to your needs.

###@pattern/classic/maintenance.twig

Usage php

<?php $template['twig']->display('@pattern/classic/maintenance.twig'); ?>

Usage twig, include the pattern

{% include '@pattern/classic/maintenance.twig' %}

This pattern will show a simple hint that the website is currently offline due service operations.

The robots meta tag is set to noindex,nofollow.

###@pattern/classic/search.div.twig

Usage php

<?php $template['twig']->display('@pattern/classic/search.div.twig'); ?>

Usage twig, including the pattern

{% include '@pattern/classic/search.div.twig' %}

This pattern will return a complete search dialog embedded within a <div> container you can use everywhere within your template.

Have look into the source, you will see that it is easy to format and adapt the dialog(s) to your needs.

###@pattern/classic/search.form.twig

Usage php

<?php $template['twig']->display('@pattern/classic/search.form.twig'); ?>

Usage twig, including the pattern

{% include '@pattern/classic/search.form.twig' %}

This pattern will return only the naked search form without any formatting container around, you can use this pattern to create your own search dialog.

###@pattern/classic/social.sharing.buttons.twig

Usage php

<?php $template['twig']->display('@pattern/classic/social.sharing.buttons.twig'); ?>

Usage twig, including the pattern

{% include '@pattern/classic/social.sharing.buttons.twig with { 'buttons': {
	'email': {
		'to': '[email protected]',
		'subject': 'Any subject'
		'body': 'Any email body content',
		'cc': '[email protected],second@foobar,tld'
	},
	'facebook': {
		'url': PAGE_URL    		
	},
	'tumblr': {
		'url': PAGE_URL,
		'title': PAGE_TITLE
	},
	'linkedin': {
		'url': PAGE_URL,
		'title': PAGE_TITLE,
		'description': PAGE_DESCRIPTION
	},
	'twitter': {
		'url': PAGE_URL,
		'title': PAGE_TITLE
	},
	'reddit': {
		'url': PAGE_URL
    },
    'google': {
    	'url': PAGE_URL
    },
    'pinterest': {
    	'url': PAGE_URL,
    	'media': ''
    },
    'github': {
    	'url': 'https://github.com/owner/repository'
    }
}}' %}

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 an empty array as parameter, i.e.:

{% include '@pattern/classic/social.sharing.buttons.twig with { 'buttons': {
	'facebook': {},
	'twitter': {},
	'google': {}
}}' %}

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

⇐ Bootstrap Pattern | kitCommands ⇒

Contribution to the Wiki

  • If you spot a typo or want to contribute an article, a how-to or a tip, feel free to edit the Wiki directly
  • If you you have any questions, please visit the phpManufaktur Support Forum

TemplateTools This Documentation is part of the kitFramework Project

© 2014 by phpManufaktur, kitFramework and TemplateTools are published under MIT license.

TemplateTools

Services

Pattern

kitCommands

Examples

Cookbook

Links

Clone this wiki locally