Creating Teaser Boxes That Use Wiki Content

THL Toolbox > Developers' Zone > Web Development > Creating Teaser Boxes that Use Wiki Content

Creating Teaser Boxes that Use Wiki Content

Wiki content (primarily from the About THL wiki) can be sucked into the teaser boxes or paragraphs of any THL page. There are four types of such includes into <div> elements with the class of "tzr-1", "tzr-intro-1", or "tzr-box1", or into paragraph (&lt;p&gt;) elements. In all cases the procedure is approximately the same. The general procedures will be described first followed by any variations for the different types of includes.

For a discussion of how wiki pages need to be formatted specifically for inclusion within THL pages, see Formatting for Wiki Pages used as THL Content.

General Procedure

The general procedure for including wiki content into a teaser box requires these steps:

  1. add the class "wikitext" to the element in which the content is to go. The element may already have a class such as "tzr-box1", etc. This should be followed by a space and the string "wikitext". For example, &lt;div class="tzr-box1 wikitext"&gt; … &lt;/div&gt;.
  2. add an &lt;a&gt; link with its href set to the wiki URL starting with the "/access" part and its class set to "wiki".

An example from the external link: Encyclopedias Home Page is the "Featured Project" box code:

&lt;div class="tzr-box1 wikitext"&gt;
   &lt;a href&#61;"/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/featured%20project%20in%20encyclopedias.html" 


To achieve the blue header background, to alternate it with the gold, use the following:


…instead of just tzr-box1.

For teaser-boxes (tzr-box1) that have images, the image URL may be included at the bottom of the wiki page in the format described below. It will be grabbed and converted into an image tag in the resulting HTML code.

For teaser-boxes (tzr-box1) and the longer teaser boxes (tzr-1) that link to a particular resource other than the wiki page with the text, the link can be included on its own line after the paragraph of text.

HTML Mark-up for Wiki Include Options

Various options for displaying the wiki text in the teaser box can be toggled by using an "o" class attribute on the &lt; a &gt; element that contains the wiki link. This class name always begins with the letter "o" and is followed by one or more of the single-character options:

Option ValueResult
1toggle "read more" link
2toggle drop-cap of first letter of wiki text
3exclude wiki headers (deprecated)
4open link in new window

Drop Caps and Read More/Explore! Options

Drop caps are automatically formatted for the intro teaser boxes (tzr-intro-1). For the other boxes and paragraphs, they have to be turned on. To toggle the drop caps, either turn them off for tzr-intro-1 boxes or turn them on for the other boxes, an options class must be set on the &lt; a &gt; element in the PHP page. This is "o2".

Similarly, the "Read More" link is turned on for tzr-intro-1 and paragraphs but turned off for tzr-box1 spotlight boxes. For tzr-1 boxes, the read more links directly to the resource that is the link included in the wiki. To toggle the Read more link for all but the tzr-1, another option is used "o1".

These two options (and others when they are created) can be combined using a single prefix "o" letter, thus &lt; a href="…" class="wiki o12" &gt; would toggle both the drop cap and the read more link.

Read More and Explore!

See the wiki Formatting for Wiki Pages used as THL Content. The content below needs to go in that page. When it is there, delete from below.

Read More When the text in the teazer box is the beginning of the resource that the box links to, we want a Read More link. The code for this is:

Explore When the text in the teazer box is about the resource that it links to (rather than being the beginning of the actual text of the resource), use an Explore! link. The code for this is:


If the page to be explored is another wiki page, the following code is used:

To link to a specific Place Dictionary entry:



Amount of Text Drawn in from Wiki

In all cases, there is a default amount of text "sucked in" from the wiki. The following table lists the amount of text sucked in from each wiki page along with each type of box's "read more" and "drop cap" defaults:

Type of BoxNumber of CharactersRead more Added?Drop Cap Formatted
tzr-intro-1400Automatically (unless turned off)Automatically
225Automatically (unless turned off)Automatically
tzr-1All of 1st ParagraphAutomatically links to Resource in wiki linkNo (unless turned on)
tzr-box1All of 1st ParagraphNo (unless turned on)No (unless turned on)
p400Automatically (unless turned off)No (unless turned on)
bottom-line wikitextThan needs to add values for this  

The number of characters added can be overriden by setting a "c" option and appending it to the class of the &lt; a &gt; link in the PHP page. Thus, we could have &lt; a href="…" class="wiki o2 c670" &gt;, which if it were within a &lt;p class="wikitext"&gt; would turn on drop-caps ("o2") and suck in 670 characters. The "Read More" is added automatically.

Images in Teaser Boxes

Certain teaser boxes, especially tzr-box1, will have images embedded in them. These images should be sized appropriately and stored on the THL site until the Media Management System has been integrated. The wiki page for the teaser box will then include a link to that image via its URL. For a more detailed discussion, see Formatting for Wiki Pages used as THL Content.


Here are examples of the different kinds of wiki includes.

Teaser Intro Box (tzr-intro-1)

This is the intro box that contains the introductory text for a particular site. The example is taken from the Literary Encyclopedia (external link: Here the image is hard-coded into the PHP page as it is part of the layout and will not be changed through the wikis. The drop-cap and the read more link are added automatically.

&lt;div class="tzr-intro-1 wikitext"&gt;
     &lt;div class="img-left-shadow"&gt;
          &lt;div&gt;&lt;img src="/encyclopedias/literary/images/printing-texts.jpg" width="180" height="180" alt="Dege Publishing House"/&gt;&lt;/div &gt;
          &lt;h6&gt;Deg&eacute; Publishing House&lt;/h6&gt;
     &lt;a href&#61;"/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/introduction%20to%20literary.html" class="wiki"&gt;&lt;/a&gt;

Note: If the image caption is particularly long it may fail to word-wrap properly causing the div that the picture was in to expand so that the intro blurp is pushed over to the right and there is a large white-space gap between the image and the intro text. In such cases, the width of the image div needs to be set manually using an inline style, &lt;div class="img-left-shadow" style="width: 225px;"&gt;

To have two introductory "boxes" at the top of the page use the additional classes of "tzr-stacked-1" and "tzr-stacked-2". The class attributes for the two "boxes" would thus be set to "tzr-intro-1 wikitext tzr-stacked-1" and "tzr-intro-1 wikitext tzr-stacked-2" respectively.

For a page with a thin double-blue line beneath the single Intro box but no thin double-blue line above the Intro box (such as the THL homepage), set the class attribute for the box to &lt;div class="tzr-intro-1 wikitext dbl-bottom-border"&gt; and set the class attribute for the About Us link to class="link-about-2". Delete the code that limits the number of characters (class="c###") since it creates unwanted white space. The code looks like this:

&lt;!-- begin content --&gt;
&lt;div id="content"&gt;
&lt;div class="shell-1"&gt;

&lt;h1&gt;A Library for Tibet and the Himalayas!&lt;/h1&gt;

&lt;div class="container-wrapper"&gt;
&lt;div class="container-left-6040"&gt;

&lt;div class="img-left-shadow" style="width: 150px;"&gt;
&lt;div&gt;&lt;img src="/global/images/portrait-child.jpg" width="130" height="153" alt="Tibetan Child from Nomadic Family" /&gt;&lt;/div&gt;
&lt;h6&gt;Tibetan Child in Kham&lt;/h6&gt;
&lt;td valign="top"&gt;
&lt;div class="tzr-intro-1 wikitext dbl-bottom-border"&gt;

&lt;a href&#61;"/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/thdl%20home%20overview.html"


&lt;!-- link to about us page --&gt;
&lt;h6 class="link-about-2"&gt;&lt;a href="#wiki=/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/sera%20monastery%20about%20us.html" title="Link to About Us page"&gt;About Us&lt;/a&gt;&lt;/h6&gt;


Spotlight and Feature Boxes (tzr-box1)

These are the boxes that contain the spotlights and featured projects with a picture and a gray backgrounds such as the "Spotlight on Literature" box on the external link: external link: Here, the image is sucked in from the wiki. There is no drop-cap or read-more link unless the class is added to the link. The full text of the one paragraph on the wiki page will be inserted into the box.

&lt;div class="tzr-box1-alt wikitext"&gt;
	&lt;a href&#61;"/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/tibetan%20literary%20encyclopedia%20home%20-%20left1.html" class="wiki" &gt;&lt;/a&gt;

Wide Teaser Boxes (tzr-1)

These boxes are for instance the "Featured Essay" and "Learn What's New …" boxes in the center bottom of the external link: Encyclopedias page . They are wider with a white background and blue-background header. They are coded as in the following example. Note here that the alternate text to "Read More", "Read Full Text", is put inside the &lt;a&gt; element:

&lt;div class="tzr-1 wikitext"&gt;
	&lt;a href&#61;"/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/featured%20essay%20in%20encyclopedias.html" class="wiki"&gt;Read Full Text&lt;/a&gt;

Rotating Teaser Box Content (Bellezza)

An example of rotating teaser box content daily from a json data table is top left teaser box on Bellezza homepage ( To manually change the content in the teaser box (when there is an error), see instruction on rotating teaser box for bellezza.


Some pages have introductory paragraphs that are not in intro teaser boxes. These are in plain paragraphs, as in the first paragraph in the external link: Encyclopedias page . In this example, the paragraph has another class giving it a bottom line. This is not part of the wiki include code. The &lt;a&gt; has an option class of "o2", meaning to turn on the drop cap. If we did not want the "Read More" link, this option class would become "o12".

&lt;p class="bottom-line wikitext"&gt;
    &lt;a href&#61;"/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/introduction%20to%20encyclopedias.html" class="wiki o2"&gt;&lt;/a&gt;

Provided for unrestricted use by the external link: Tibetan and Himalayan Library