Template API, the fire line between Designers and Developers

Design & Theming
Experience Level: 

Issue: Themers and Designers find it difficult to convert their designs into Drupal Themes

Solution: Template API - an agreement between Drupal back end developers and themers(designers) on data

We would start with general philosophies and fundamental principles about Templates API approach that is taken at DesignsSquare.com. Some of them are that its bad practice to combine two responsibilities - layout logic(html tags) into application logic(or code). As result, we use templates whenever we its possible. Another, that we should favor conventions over configurations for passing data from back end to the front end.

For front developers, all they need to know is the Template API(TAPI). We look at some examples of Template API such as Contact TAPI, Search TAPI, Comment TAPI, etc developed and used at DesignsSquare.com. To better demonstrate, a random html layout for contact form is taken and convert it into Drupal contact form by overriding Drupal template file and using Contact TAPI.

For back end developers all they need to know is the Template API. We look at creating Template API from scratch and making it available for front end. To better demonstrate, we will create Contact Template API used by front developers earlier

With Template API, It is easy to customize or swap designs by reusing the logic. A site with different designs is going to share common functionalities (i.e. contact form, representing teaser, search form, etc), so the back end logic, the data provided via Template API is reused. To better demonstrate, three themes from DesignsSquare.com are randomly selected to see how the same Template API such as Header Template API is reused for all of deferent designs.

With Template API, its easy introduce changes to back end without ever altering templates. Let say there is requirement that date has to be represented in different format. Or, instead the data is coming from back end and database, it is feeded from remote RESTFULL service. Anything. While the change is made in the back end, the templates for different designs stay unchanged because the Template API has already defined interface for front end. To better demonstrate, a widget from DesignsSquare.com is selected and some back end data is altered while all templates with different layouts that comes with widget stay the same

Each Template API has an “alter” hook in place for easy alteration of Template API. The ‘alter’ hook is called just before data is passed to the template. This provides a way for any one else to easy alter the Template API.

To summarize, Template API is convention as much as agreement between back end developer and front end themers that provides simplicity and ease for themers to theme Drupal sites while it provides flexibility for developers to reuse logic and introduce the changes.

Learning Objectives & Outcomes: 

Rise awareness about Template API approach for theming Drupal Themes that we find useful at DesignsSquare.com

Platinum Sponsors

Gold Sponsors