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 (<p>) 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.
The general procedure for including wiki content into a teaser box requires these steps:
An example from the Encyclopedias Home Page is the "Featured Project" box code:
<div class="tzr-box1 wikitext"> <a href="/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/featured%20project%20in%20encyclopedias.html" class="wiki"></a> </div>
Note:
To achieve the blue header background, to alternate it with the gold, use the following:
tzr-box1-alt
…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.
Various options for displaying the wiki text in the teaser box can be toggled by using an "o" class attribute on the < a > 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 Value | Result |
---|---|
1 | toggle "read more" link |
2 | toggle drop-cap of first letter of wiki text |
3 | exclude wiki headers (deprecated) |
4 | open link in new window |
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 < a > 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 < a href="…" class="wiki o12" > would toggle both the drop cap and the read more link.
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:
{block:resource-link}
http://www.thlib.org/places/monasteries/sera/hermitages/#essay=/cabezon/sera/herm/intro/s/c1
{block}
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:
{block:resource-link} {link:/places/monasteries/sera/hermitages/map/} {block}
If the page to be explored is another wiki page, the following code is used:
{block:resource-link}
http://WIKI/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/thdl%20community%20events.html
{block}
To link to a specific Place Dictionary entry:
{block:resource-link} http://DOMAIN/places/polities/#iframe=http://places.thlib.org/features/15483 {block} {link:image|/places/polities/images/A2189.jpg}
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 Box | Number of Characters | Read more Added? | Drop Cap Formatted |
---|---|---|---|
tzr-intro-1 | 400 | Automatically (unless turned off) | Automatically |
tzr-stacked-1 tzr-stacked-2 | 225 | Automatically (unless turned off) | Automatically |
tzr-1 | All of 1st Paragraph | Automatically links to Resource in wiki link | No (unless turned on) |
tzr-box1 | All of 1st Paragraph | No (unless turned on) | No (unless turned on) |
p | 400 | Automatically (unless turned off) | No (unless turned on) |
bottom-line wikitext | Than 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 < a > link in the PHP page. Thus, we could have < a href="…" class="wiki o2 c670" >, which if it were within a <p class="wikitext"> would turn on drop-caps ("o2") and suck in 670 characters. The "Read More" is added automatically.
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.
This is the intro box that contains the introductory text for a particular site. The example is taken from the Literary Encyclopedia (http://staging.thdl.org/encyclopedias/literary/). 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.
<div class="tzr-intro-1 wikitext"> <div class="img-left-shadow"> <div><img src="/encyclopedias/literary/images/printing-texts.jpg" width="180" height="180" alt="Dege Publishing House"/></div > <h6>Degé Publishing House</h6> </div> <h5>Overview</h5> <a href="/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/introduction%20to%20literary.html" class="wiki"></a> </div>
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, <div class="img-left-shadow" style="width: 225px;">
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 <div class="tzr-intro-1 wikitext dbl-bottom-border"> 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:
<!-- begin content --> <div id="content"> <div class="shell-1"> <h1>A Library for Tibet and the Himalayas!</h1> <div class="container-wrapper"> <div class="container-left-6040"> <table> <tr> <td> <div class="img-left-shadow" style="width: 150px;"> <div><img src="/global/images/portrait-child.jpg" width="130" height="153" alt="Tibetan Child from Nomadic Family" /></div> <h6>Tibetan Child in Kham</h6> </div> </td> <td valign="top"> <div class="tzr-intro-1 wikitext dbl-bottom-border"> <a href="/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/thdl%20home%20overview.html" class="wiki"></a> </div> <!-- link to about us page --> <h6 class="link-about-2"><a href="#wiki=/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/sera%20monastery%20about%20us.html" title="Link to About Us page">About Us</a></h6> </td> </tr> </table>
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 http://staging.thdl.org/encyclopedias/literary/. 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.
<div class="tzr-box1-alt wikitext"> <a href="/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/tibetan%20literary%20encyclopedia%20home%20-%20left1.html" class="wiki" ></a> </div>
These boxes are for instance the "Featured Essay" and "Learn What's New …" boxes in the center bottom of the 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 <a> element:
<div class="tzr-1 wikitext"> <a href="/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/featured%20essay%20in%20encyclopedias.html" class="wiki">Read Full Text</a> </div>
An example of rotating teaser box content daily from a json data table is top left teaser box on Bellezza homepage (www.thlib.org/bellezza). 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 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 <a> 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".
<p class="bottom-line wikitext"> <a href="/access/wiki/site/0b308aa3-d044-469b-009a-d34c7841413d/introduction%20to%20encyclopedias.html" class="wiki o2"></a> </p>