How to Create Your Own Templates

Creating your own templates

Pugpig is designed to allow you to use standard Drupal templating, although there are a few things you need to be aware of:

  • All local URLs (to assets or other pages) need to be generated using the Pugpig helper functions described below to ensure they exist in the manifest
  • A Pugpig setting is provided if you need a Pugpig set of templates to co-exist with a different template, for example your website.

Co-existing with a website / Having more than one theme

By default, the template used for the index.html pages is /node/<node_id>. However, you may already have a website using another theme on your instance. In this case, you can configure the module to render the equivalent of /node/<node_id>?template=<yourtemplate>.

This is configured in Pugpig Settings > Default Template

You need to ensure you are calling the function pugpig_template_preprocess from within your theme. For example, in your template.php:

function mytheme_preprocess_page(&$variables) {

This function does the following:

  • It will redirect the view of an edition page to the Edition Flatplan Administration page
  • It will redirect the home page to the Pugpig Flatplan page if the Redirect home page to Pugpig admin setting is enabled
  • It will redirect the user to the Pugpig Flatplan if viewing a node directly after a save from the flatplan
  • It will set a variable called pugpig_template and add a theme suggestion if a Default Template is supplied in the Pugpig Settings.

Templating Functions

You use standard Drupal templates to create a Pugpig template. However, some additional helper functions exist to help with Pugpig specific items:

Links to internal pages

function pugpig_get_index_relative_page_url($nid);

URLs to theme assets

function pugpig_theme_item_url($file_name); 

URLs to images (including image styles)

function pugpig_get_index_relative_image_path($image_node, $image_field, $index = 0);

For example, to show the third image in the field field_image_gallery:

<img src="<?php print pugpig_get_index_relative_image_path($node, 'field_image_gallery', 2); ?>">


If you wish to enable touch-for-full-screen and galleries, you need to wrap your images in a figure. Pugpig provides a helper function for this.

Note: that this takes the caption from the alt text and the copyright from the title.

function pugpig_print_figure($node, $field_name, $index, $group_name, $figure_class='');

For example:

pugpig_print_figure($node, 'field_image_intro', 0, 'main_gallery', 'my_figure_class');

Index Pages and Table of contents

Pugpig provides some helper functions that makes it easier for you to access the node of child or sibling pages from anywhere as long as you're in the same edition.

For example:

$edition_id = pugpig_get_node_edition_id($node->nid);
$edition = node_load($edition_id);
$sections = pugpig_get_nested_section_array($edition);

Handling Inline Images (for example from IMCE)

If you have inline images inside a rich text field, you need to do two things two ensure they work properly offline in a Pugpig app:

  • Ensure the images are included in the manifest.
  • Ensure the paths to the images are pugpig relative paths, and match the manifests.

For example, to include the images from the body field in the manifest, implement the hook pugpig_get_extra_manifest_attachments as follows:

function mymodule_pugpig_get_extra_manifest_attachments($node) {   
  return pugpig_extract_manifest_from_field($node, 'body');

To ensure you are outputting the correct paths, in your template you need to use pugpig_rewrite_html() :

// Get the text from the field as normal
$fixed_markup = pugpig_rewrite_html($markup);
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk