Slimlines pages support embedded references, which can be used to provide easy and consistent links to other pages, or to embed media images in a page. They can also be used to add footnotes of help text (See Embedded References). Pages also support more generically, "related pages", categories, hashtags, keywords and automatic hyperlinking of URLs. Pages also support embedding virtually any HTML tag, as well as PHP and JavaScript code.

Hashtags

Hashtags and are automatically recognized and linked when the # symbol is found followed by text. The minimum embedded hashtag size can be set using the <MinTagSize> option. Spaces can be included in embedded hashtags by added a dash (-) to the tag. The dash will be stripped out when displayed. By way of example, #Hash Tag was created using #Hash-Tag. External hashtags are also supported and can be added using the <HashTags> property. External hashtags are used for tagging pages that do not otherwise include an embedded hashtag. This page sets the #Sample Hashtag hashtag externally. All hashtags can be viewed at the bottom of this page.

Internationalization

Slimlines supports translating generated text into almost any language using the <Translations> option. In order to do so, Slimlines supports all common, as well as many uncommon, character sets, a few of which are shown below.

Embedded HTML

You can embed HTML into any page. For instance, this paragraph is created using the <p> tag so that the first line is indented. Other common paragraph elements are <em> (italics), <b> (bold), <u> (underline) and <strike> (strikethrough). You can also create your own HTML extensions. For instance, <capt> was defined using the <Placeholders> option so that captions can be easily centered. You can also view additional supported HTML Extensions.

You can also use the HTML <blockquote> tag to quote text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa.

What I've shown here is just a small sample of some of the more common usages of HTML in pages. You can of course expand this sample by including any of the other HTML tags you need to accomplish your intended task.

Tooltips

Two types of tooltips are supported.

Popovers are a fixed width, and are light colored. The preceding popover was set using

<a name="" data-toggle="popover" title="I'm a popover<hr/><a href=&quot;%AppURL%&quot;>%AppName% Home Page</a>">Popovers</a>

Tooltips can vary in width, and are dark colored. Both permit embedding HTML and hyperlinks. Tooltips are used in the next section in the table titles. The preceding tooltip was set using

<a name="" data-toggle="tooltip" title="I'm a tooltip<hr/><a href=&quot;%AppURL%&quot;>%AppName% Home Page</a>">Tooltips</a>

Toggles

Toggles can be used to provide additional content when clicked. They display a help cursor when hovered over, and expand when clicked. They can be set to initialize in the open state using a class of "collapse in" or closed using a class of "collapse". They are good for providing help in headings or for compressing text. For instance to view the code used to generate the responsive table used in the next section, see Fig. 1

<div class="gt-scroll-box">
<table class="table-hover table-condensed tablesorter">
  <thead>
    <tr>
      <th>Line</th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Occupation</th>
      <th class="gt-nowrap"><a name="" data-toggle="tooltip" title="Real Estate Value">REV</a>>/th>
      <th class="gt-nowrap"><a name="" data-toggle="tooltip" title="Property Value">PV</a>>/th>
      <th class="gt-nowrap"><a name="" data-toggle="tooltip" title="Place of Birth">POB</a>>/th>
      <th>Attended School>/th>
      <th class="gt-nowrap"><a name="" data-toggle="tooltip" title="Cannot Read or Write">Illiterate</a></th>
      <th>Citizen 21+</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9</td>
      <td>Hugh Humphrey</td>
      <td>51</td>
      <td>Male</td>
      <td>Farmer</td>
      <td>150</td>
      <td>300</td>
      <td>Massachusetts</td>
      <td></td>
      <td></td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Elizabeth</td>
      <td>44</td>
      <td>Female</td>
      <td>Keeps House</td>
      <td></td>
      <td></td>
      <td>Ohio</td>
      <td></td>
      <td>Yes</td>
      <td></td>
    </tr>
    <tr>
      <td>11</td>
      <td>David</td>
      <td>14</td>
      <td>Male</td>
      <td>At Home</td>
      <td></td>
      <td></td>
      <td>Illinois</td>
      <td>Yes</td>
      <td></td>
      <td></td>
    </tr>	
  </tbody>
</table>
</div>
<capt>Dwelling: 24, Family: 24</capt>

The preceding toggle was set using

<span class="rlink"><a role="button" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1"><span id="1" style="cursor: help;">Fig. 1</span></a></span>
<div id="collapse1" class="collapse">
 ...
</div>

Tables

Tables ( <table> ) can be used to display tabular data. The following table of sample census data enables scrolling on small screens, hovering to highlight lines, and sorting by clicking on any of the headings. It also uses tooltips for some of the headings. Expand the toggle in the next section See the previous section for the code.

Preformatted text

Preformatted text ( <pre> ) can be used to display wide tables in a fixed-width font without wrapping the internal elements. Preformatted text will show a horizontal scroll bar on small screens:

Line:                  9              10           11
Name:                  Hugh Humphrey  Elizabeth    David
Age:                   51             44           14
Gender:                Male           Female       Male
Race:                  White          White        White
Occupation:            Farmer         Keeps house  At Home
Real Estate Value:     150
Property Value:        300
POB (Place of Birth):  Massachusetts  Ohio         Illinois
Foreign Father:
Foreign Mother:
Month Born:
Month Married:
Attended School:                                   Yes
Cannot Read:
Cannot Write:                         Yes
Blind, etc.:
Citzen over 20:        Yes
Denied Vote:

Embedded Code

In addition to HTML, you can also embed PHP and JavaScript code. For these charts I loaded the Chart.js JavaScript library and built a simple bar chart and pie chart to demonstrate its use. You can load virtually any well behaved JavaScript (or JQuery) library to include additional content on your pages. You can also move the JavaScript library to your <Plugins> to make them more convienient to load.

Embedded References

Slimlines supports adding embedded references to pages. Embedded references are an easy method for creating reliable and persistent links to pages and for embedding media images.

Syntax:

{ref:[id][#item][@description]}

To demonstrate referencing another page, consider Embedded References ( {ref:refereces} ). When referencing another page, its title is used as the default description. If we wanted to use a different description such as References ( {ref:refereces@References} ), all we need do is provide the alternate description as shown. We can also provide a link to an anchor on the page by including it in the embedded reference's item field as I have done here: Footnotes ( {ref:refereces#footnotes@Footnotes} ). In this case, the anchor links to the footnotes located at the bottom of the page. Clicking on the link takes you to the correct section on the page.

When referencing one page from another page (as shown above), the referenced page is linked by their thumbnail under the Related Pages section at the bottom of referencing page.

Footnotes

A common use for footnotes is to provide commentary. You can add these by providing the commentary in the alternate description for the reference as in, {ref:@description}. The footnote will be added to the Footnotes section at the bottom of the page, but will also be shown when hovering over or clicking on the footnote number. Let's try a couple [ 1 ] of footnotes [ 2 ]. This is the last footnote [ 3 ] repeated. This is a new one [ 4 ].

Media

To demonstrate referencing media images, we can embed a few on this page. Media images have a number of possible properties that can be named in the item field of the embedded reference. These include the title, caption, date and credit or attribution line. Multiple items can be specified by separating them by periods as in #title.caption.date.credit Additional properties can be appended to the item field as well and will be shown in the following examples.

By default, the medium-sized image will be displayed. if not defined, the largest defined image will be displayed. You can specify an alternate image size using large, medium, small or thumb in the item field. You can also specify an alternate width for the image being displayed using wNNN, where NNN is the image container's width in pixels. Also by default, the image is left-aligned. You can use the item field to specify an alternate alignment using center, floatleft or floatright. Lastly, by default, the image is hyperlinked to the largest image size defined. You can use the nolink option to prevent this behavior. The following examples demonstrate various ways in which media images can be embedded. The images shown here were added using the <Media> option.

Show the large image left-aligned, and show the image title as the caption: {ref:M1#large.title}

Show the medium image left-aligned, and show the image caption as the caption: {ref:M2#caption}

Show the small image left-aligned, and show the image credit line as the caption: {ref:M3#small.credit}

Show the small image centered and show the image title, caption and credit line as the caption. When including mutiple display items, built-in punctuation is used as shown: {ref:M1#small.center.title.caption.credit}

Do the same, but wrap the photo and the caption to 200px: {ref:M2#small.center.title.caption.credit.w200}

Center the medium image and override the width and the caption: {ref:M3#center.w300@Medium image (300px)}

Show several small images left aligned: {ref:Mn#small@Small image}

Show several small images centered aligned and no captions: {ref:Mn#small}

Show the small image on the left of a paragraph with caption and wrapped text: {ref:M1#small.floatleft.w200@This is a new caption, that is wider then the image.}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa.

Show the small image on the right without a caption: {ref:M2#small.floatright}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat commodo felis, id molestie tellus dictum eu. Nunc et sem non libero pharetra ornare non a sapien. Donec id ultrices nunc. Sed nec odio vel tortor mattis cursus. Vivamus egestas, mauris a ultrices tempus, metus eros porttitor sapien, vel posuere risus metus eget diam. Nulla volutpat hendrerit faucibus. Vestibulum et dui sit amet lorem venenatis venenatis dignissim vitae dui. Nunc odio felis, faucibus id iaculis sit amet, iaculis vel lorem. Nam suscipit convallis fermentum. Proin euismod libero et eros suscipit ullamcorper. Vestibulum ac ipsum massa.

Show the image without being hyperlinked: {ref:M3#small.center.nolink.title@Small image}. Note that the "title" item is ignored because an alternate description was provided.

Page Metadata

Syntax:

{get:id[#item][@description]}. In all cases, the "id" refers to the page id (media ids are not supported).

Pages:

Similar to embedding references (as described above), execpt that this option returns text strings only — no links or structures are provided. The purpose of the get reference option is to build more complex links to other pages. The "description" can be used to provide an alternate title, and the "item" can be used to specify the metadata to collect. When getting a reference from another page and no "description" is specified, the other page's title will be displayed by default. The following items are supported: title, date, modified, abstract, filename, author, category, media, large, medium, small, thumb. The last five of which get the specified media URL for the page's <MediaId>, and media in particular get's the largest image available. As can be seen in the examples below, you cannot mix items and alternate descriptions.

Example:

Linkbox

Syntax:

{linkbox:id[@description]}. In all cases, the "id" refers to the page id (media ids are not supported).

Pages:

Slimlines includes built-in support for Link Boxes, which are formatted links to other pages. Unlike the link and get references described above, "items" are not supported. When no "description" is specified, the other page's title will be displayed by default. The description field can be used to modify the title. In the first example, a link box is shown without an alternate description: {linkbox:demo}.

Example:

Demonstration

---

A demonstration of a few of Slimlines's built-in features.

---

Read More

In the next example, a link box is shown with an alternate description: {linkbox:demo@Hello}.

Example:

Hello

---

A demonstration of a few of Slimlines's built-in features.

---

Read More

Styling:

When link boxes are insufficient, you may need to create your own. In the following example, the modified date was added.

<div class="linkbox">
 <div class="well">
  <h1>{get:demo#title}</h1>
  <hr>
  <div class="linkboxcontent">
    <div class="row">                  
     <div class="col-xs-4"><span class="linkboxmedia"><img src="{get:demo#thumb}" /></span></div>		
     <div class="col-xs-8"><span class="linkboxabstract">{get:demo#abstract}</span></div> 
    </div>
  </div>
  <hr>
  <div class="linkboxbutton">
    <div class="row">                  
     <div class="col-xs-7 col-sm-8 text-left">Updated: {get:demo#modified}</div>		
     <div class="col-xs-5 col-sm-4" style="padding-left:0;"><button>{ref:demo@Read More}</button></div> 
    </div>
  </div>
 </div>
</div>

Example:

Demonstration

---

A demonstration of a few of Slimlines's built-in features.

---

Updated: August 15, 2024

Read More