Creating Teasers and Summary Text

Note: The list of Snipper tag options was adapted from the Snipper documentation and the Snipper tag examples were copied from that documentation. The Snipper addon is the work of Parahead.

Overview

A teaser is a summary or description of a larger work that gives the reader an idea what that work is about. This can be an actual summary that is separate from the item's content or it can be an excerpt of the content itself.

Searching the support forum at the Official Coranto Site for the word snip yields many results. The topic of creating a summary or preview of a news item has been discussed many times. The built-in Coranto method is the snip tag (more on that later).

The Reason for Teasers

Teasers drive readers to your content. You give them a sample and hope that they want to read the entire article.

Teasers also are a way to point your readers to items that are of genuine interest. They read the teaser and skip the articles they don't want to read in favor of the ones they do. Making your visitor's time on your site more useful and efficient will keep them coming back.

Teasers (or a summary) are also a part of an RSS feed. It is bad manners to include all of a longer article in an RSS feed. You should provide a summary or description instead.

The Problems

The method usually employed to create a teaser in Coranto is to chop off content at a specified length and use this 'snipped' version as the teaser. Here are the possible problems with that:

  • Does the first X characters of the item really tell you what it is about?

If you have written a detailed review of a computer game does the first X words of that review really give a potential reader a true feeling of the content?

  • Do you really want to chop off your teaser in the middle of a word?
  • Do you really want to chop off the teaser in the middle of a sentence?

Snipping the article at X number of characters may cause a break in the middle of a word or sentence. Will the meaning be clear to the reader?

  • Creating invalid HTML
  • Running everything together
  • Losing Structure

HTML tags specify the structure of your document. By snipping at X length, either by characters or words, you do not know if you have altered the structure of your document. Is there a list in your document? Did the snip occur right in the middle of that? Are you using a table? Is that structure preserved?

If you strip the HTML from the content before snipping to avoid causing a problem with unclosed tags you lose the structure of the article entirely. If you are providing a longer teaser everything will run together. Your headers, paragraphs, list items, and table contents will just be a long string of characters that could be difficult to read.

↑ Contents

Suggested Practice

As you read this remember this is a suggestion. I feel that this is the best practice because it gives the author complete control of the problems discussed above.

Separate the Teaser and the Content

Use a custom field for the teaser/summary of your articles. Creating a separate text field for the teaser/summary text gives you complete control over the contents. This allows:

  • Creation of a detailed summary for a longer article.
  • Use of more active language than the first section of the article itself
  • Prevents problems with breaking of words or sentences.
  • Prevents HTML problems
  • Easily changing the teaser as time passes (ex: a newer version of a game on a review site)
  • Allow creating or editing of the teaser without changing the actual article.

Implementation and Use

To use this method you create a custom news field. For our examples we will use CustomField_teaser.

You then use this field wherever you want the teaser/summary to appear. Here is an example of a 'Full Story' link using the teaser field. This includes the item subject, the teaser, and a link to the complete item using viewnews.

<p><Field: Subject><br>
<Field: CustomField_teaser>
<a href="url_to/viewnews.cgi?id=<Field: newsid>">Full Story</a></p>

Empty Teaser Field

If the teaser field is left empty you can specify an alternate using Coranto's conditional statements.

<p><Field: Subject><br>
<If: Field: CustomField_teaser><Field: CustomField_teaser>
<If: Else>
<Snip 250: Field: Text>
</If>
<a href="url_to/viewnews.cgi?id=<Field: newsid>">Full Story</a></p>

This example falls back to using Coranto's built-in snip function to create the teaser. You can use whatever alternate you wish. Of course you could simple not use a teaser if the teaser field is empty.

↑ Contents

The Snipper Addon

This is the best choice for creating teasers if you do not want to use a second text field. The Snipper addon gives you many more options and flexibility than Coranto's built-in snipping.

Snip by Characters

Snipping by characters has the following options:

  • Length - The number of characters to snip after.
  • StripHTML - (yes/no) Remove the HTML before stripping. Converts BR and P-tags to spaces.
  • ExactLength - (yes/no) Set to NO to wait for the end of a word.
  • Dots - (yes/no) Should three dots be added to the end of the string if the text is actually snipped.

Snip by Words

  • Length - The number of words to snip after.
  • RespectHTML - Make an effort not to snip the text within HTML tags?
    • soft => Wait until the current HTML tag is closed.
    • medium => Wait until all opened HTML tags are closed with a matched ending one, do not consider P-tags though.
    • strong => Wait until all opened HTML tags are closed, including P-tags.
  • RespectSentance - Make an effort not to snip within a sentence? Note: A sentence is considered finished when a . ! or ? is found.
  • StripHTML - Strip the text for HTML *after* the snip? Converts BR and P-tags to spaces.
  • Dots - (yes/no) Should three dots be added to the end of the string if the text is actually snipped.

Snipper Style Tags

All of the options listed above can be set on the Snipper addons settings page and will be used if you use a simple snipper tag:

<CharSnip: Field: Text>
<WordSnip Field: Text>

Snipper allows to to change these settings by specifying them in the tag:

<CharSnip Field: Text Length: 20 StripHTML: yes ExactLength: yes Dots: no>
<WordSnip Field: Text Length: 20 StripHTML: no RespectHTML: strong RespectSentance: no Dots: no>

By specifying parameters in the tag you can use different settings when you need to without changing the defaults.

↑ Contents

Potential Problems

When you use the protections provided by the snipper addon you get a potential new problem. If you are allowing HTML in your articles and the author places a long table or list near the top of the article and you are preserving the HTML on the strongest setting the entire table or list will be included in the teaser that results.

This could also happen if you are using DIV tags and you include the text of the article in container DIVs for formatting. If possible apply the container DIVs in the style not in the article itself.

↑ Contents

Perl Code Solution

If you want to use an excerpt of the article text and want to have complete control over what part of the text to use you can use perl code in your style to achieve this. The following example is adapted from a discussion thread in the support forum. The code included here is based on the work of Parahead as published in that thread.

At the top of your style insert this code:

<PerlCode>
$SplitText = "";
$TextLeftOver = "";
if (if ($Text =~ m/\[snip\]/) {
($SplitText, $TextLeftOver) = split(/\[snip\]/, $Text, 2);
}
</PerlCode>

This gives you the ability to use a new tag [snip] at the point where you want to split your text.

The code sets two variables to null ("") on each pass and then if the text field contains the [snip] tag sets $SplitText to hold the text before the [snip] tag and $TextLeftOver to hold the remainder.

If you don't test for the [snip] tag in the field first the result is that $SplitText contains all of the text from the text field. This could really mess up your site if a long article is displayed where a short excerpt is expected.

↑ Contents

So your article might look like this:

This is a really great article about something or other.[snip] Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.

The perl creates two new fields that you can use in your style. So where you want to use the teaser to display a 'read more' or 'fullstory' link you could use:

<p><Field: Subject><br>
<If: Field: SplitText><Field: SplitText><br></If>
<a href="h**p://your.site.com/cgi-bin/viewnews.cgi?id=<Field: newsid">&amp;style=fullstory">Read more...</a><br>
Posted by <Field: User> at <Field: Date></p>

Using the article above as an example the teaser is:

 This is a really great article about something or other.

and where you want the entire article to appear you can use:

<p><Field: Subject><br>
<If: Field: SplitText><Field: SplitText><Field: TextLeftover><If: Else><Field: Text></If><br>
Posted by <Field: User> at <Field: Date></p>

If the text has been split you use the two fields instead of <Field: Text> so that your custom tag [snip] is removed. If the text has not been split the text field will be used.

Considerations

If you use this method you are responsible for making sure that the HTML that results is valid.

This technique also allows you to place extra content, such as an image, at the point where you snipped the text.

↑ Contents

Coranto's Built-In Snip Function

Coranto has the built-in ability to snip any field at a sepcified length.

<Snip #: Field: NAME>

You replace the # with the number of characters you want and Name with the field you want to snip.

This strips HTML from the text and waits for the end of a word.

Perl Snip by Characters

If you really need to snip a field to an exact number of characters, you don't care about cutting off the text in the middle of a word, and you don't want any HTML - try this:

<PerlCode>
$StrippedText = HTMLstrip($SomeField);
if (length ($StrippedText) > 25) {
$SnippedText = substr($StrippedText,0,25);
} else {
$SnippedText = $StrippedText;
}
</PerlCode>

Replace $SomeField with the name of the field you want to snip (ex: $Text or $CustomField_AnotherField). Replace the 25 with the length of the number you want in the string.

Where you want to use the snipped text place:

<Field: SnippedText>

This will make sure that the snipped text has no HTML in it and is less than or equal to the length you specify. This should give you a string suitable for use where space is limited, such a menu sidebar or narrow column.

Further Reading

↑ Contents

Categories:




Page last modified on February 02, 2009, at 07:32 PM