Using HTML Tags as “Glue”


Published on October 3, 2004 at 12:38 PM EST
In the Tutorials category.

In creating templates for your Movable Type installation, you’ll find that the <MTEntryCategories>, <MTCategories>, and <MTParentCategories> container tags have a “glue” attribute. The glue attribute is used to separate items with a string. For example, joining category/subcategory names together with a comma or slash to create breadcrumbs (a path tracing your entry’s hierarchy). A simple example of breadcrumbs might look like this:

Category \ Subcategory \ Entry

Often it is desirable to use an HTML tag as the “glue,” though quickly trying it you’ll find it doesn’t work. The extra greater-than and less-than signs cause it to not work, as in <MTEntryCategories glue="<br />">.... With a little use of PHP, though, this problem can be overcome, allowing you to use the <br />, <img />, or any other HTML tag as your glue!

First, an example of creating breadcrumbs with a simple (non-HTML) string as the glue. A comma is the glue for the <MTEntryCategories> tag and a greater-than sign is the glue for the <MTParentCategories> tag.

<MTEntryCategories glue=", ">
<MTParentCategories glue=" &#62; ">
<a href="<MTCategoryArchiveLink>"><MTCategoryLabel></a>
</MTParentCategories>&br /> </MTEntryCategories> &#62;
<b><MTEntryTitle></b>

Which creates breadcrumbs that look like this:

Category 1 > Subcategory A, Category 2 > Subcategory B > Entry Title

But you probably already knew how to do that, and want to use an HTML entity as the glue. Keep reading.

PHP, HTML and Glue

With some PHP code, HTML tags can be substituted as the glue for the simple comma and greater-than sign strings, as in the breadcrumb example below. A comma and a <br /> tag was used with <MTEntryCategories> (in the $MTEntryCategoriesGlue variable) and a greater-than sign was used with <MTParentCategories> (in the $MTParentCategoriesGlue variable).

<?php

  $MTEntryCategoriesGlue = ',<br />';
  $MTParentCategoriesGlue = ' &#62; ';

  echo '<MTEntryCategories glue=",' . $MTEntryCategoriesGlue . '">
<MTParentCategories glue="' . $MTParentCategoriesGlue . '">
<a href="<MTCategoryArchiveLink>"><MTCategoryLabel></a>
</MTParentCategories>
</MTEntryCategories>' . $MTParentCategoriesGlue . '<b><MTEntryTitle></b>';

?>

Which results in the following breadcrumbs:

Category 1 > Subcategory A,
Category 2 > Subcategory B > Entry Title

By changing the $MTEntryCategoriesGlue and $MTParentCategoriesGlue variables you can change the glue attribute:

Category 1 divider Subcategory A divider
Category 2 divider Subcategory B divider Entry Title

Site-Wide Glue Variables

Putting these two variables into a generic PHP Include’d template can allow you to make a site-wide glue change by only changing the variable in one place. For example, create a new index template named “phpitems.inc” and include the below code. Don’t forget to rebuild.

<?php

  $MTEntryCategoriesGlue = ',<br />';
  $MTParentCategoriesGlue = ' &#62; ';

?>

Then, in each template where you want to make use of either variable, add this code, being sure the path to your phpitems.inc file is correct:

<?php

  include('/home/user/domain/html/phpitems.inc');

  echo '<MTEntryCategories glue=",' . $MTEntryCategoriesGlue . '">
<MTParentCategories glue="' . $MTParentCategoriesGlue . '">
<a href="<MTCategoryArchiveLink>"><MTCategoryLabel></a>
</MTParentCategories>
</MTEntryCategories>' . $MTParentCategoriesGlue . '<b><MTEntryTitle></b>';

?>

And there you have it, using HTML tags as “glue” for Movable Type tags!