Documentation

Light-weight, fast, simple and powerful!
Translations of this page?:

Teaser with “Read More...”

There are two main ways of displaying a small extract of text with a link to the full article. Both are described below. The first uses multiple page-parts, but the second keeps the whole text together in the default “body” page-part.

Using Multiple Page-Parts

This is the “default” method for constructing the “Read more” link:

Editing content

(1) When editing your page (as a “child” page to “Articles”), above the editing area there is a tab called “Body”, and at the right end of this area, a green “+” icon, and red “–” icon. Click on the green “+” icon.

Screen shot diagram for "read more"

(2) In the pop-up, “Add part”, give the name extended, and click “add”.

Put your small introduction (“teaser”) in the “body” part; put the rest of your article in the “extended” part.

Adding the “Read More” link

On your “Articles” page, you can set the link for “Read more…” or “Continue Reading →” or whatever you like. The code should look like this at the top of the “entry” DIV on the Articles page:

<h3><?php echo $article->link($article->title); ?></h3>
  <?php echo $article->content(); ?>
  <?php if ($article->hasContent('extended')) echo $article->link('Continue Reading&#133;'); ?>

This should automatically make the “read more” link for the full article. You can put whatever like for the link text in here:

<?php if ($article->hasContent('extended')) echo $article->link('PUT YOUR LINK TEXT HERE'); ?>

Using a Single Page-Part

This technique uses the default “body” page-part only.

Editing Content

Although page-parts can be used to generate “Read more…” type links from a teaser to the full article (as described above), sometimes page-parts need to be used for other purposes which make this technique a problem.

Another way to generate the “teaser” + link is to use a “trigger” in the text of the article itself. Here's how:

In your article (blog entry, whatever), you simply put in this “trigger”:

<!--more-->

where you want the break to occur. (The code below assumes this will come mid-paragraph, but that can easily be adjusted.) Write the WHOLE article simply in the default “body” page-part.

Adding the “Read More” link

On your homepage (if you display recent articles there), or especially in the “Articles” page (where your blog entries, news items, etc., are listed), replace this code, usually right below the <h2>...</h2> line:

<?php echo $article->content(); ?>
<?php if ($article->hasContent('extended')) echo $article->link('Continue Reading…'); ?>

with this:

<?php if (($more_pos = strpos($article->content(), '<!--more-->')) === false ) {
  // "more" trigger NOT found, so just echo content
  echo $article->content();
} else {
  // "more" trigger IS found, so echo only teaser and add link to whole article
  echo substr($article->content(), 0, $more_pos);
  echo '</p><p>'. $article->link('Read more...') .'</p>';
} ?>

Note that the </p><p> in the last line of the code is where the assumption comes in that your “more” trigger is mid-paragraph. If your practice is to place the break between paragraphs, then you probably won't need that extra </p> tag.

Variation for TinyMCE Users

Apparently the “single page-part” technique works well with TinyMCE using its pagebreak plugin, and varying the code slightly:

<?php if (($more_pos = strpos($article->content(), '<!-- pagebreak -->')) === false ) {

[HT: drhankes]

Using Truncate plugin for teaser

Third option for displaying “Read more…” is with use of Truncate plugin. It does similar thing as two options above but little more automated.

For this to work, you have to download and enable Truncate plugin and do something like this on your Homepage or articles page:

<?php $last_articles = $this->children(array('limit'=>5, 'order'=>'page.created_on DESC')); ?>
<?php foreach ($last_articles as $article): ?>
<div class="entry">
<h3><?php echo $article->link($article->title); ?></h3>
<?php
$myarticles = truncate($article->content(), 300, "");  
echo "$myarticles";
echo '<p>'.$article->link('Read more...').'</p>';
?>
</div>
<?php endforeach; ?>

This example is for articles page, but it's similar for Homepage too. Also, you can do all of that in your sidebar too.

More info can be found here: http://project79.net/projects/truncate

In addition to this, you can also create automated excerpts with Truncate and Image plugin. For more details, visit http://project79.net/articles/creating-excerpt-with-image

 
howto/display_teaser_with_read-more_link.txt · Last modified: 2012-04-07 16:48 by David
 
Except where otherwise noted, content on this wiki is licensed under the following license:GNU Free Documentation License 1.2
Copyright 2010 wolfcms.org / design by yello studio / Wolf CMS Inside