Windmill Web Work

If you read a blog, a lot of times you’ll see the introduction of a blog entry on the front page of the blog, followed by a ‘Read more’ link. That link will take you to the full text on the entry.

In a PivotX template, you can place that ‘Read more’ link in a template with the [[ more ]] template tag. You can even control what the link looks like with the parameter ‘text’, like so: [[more text="Continue reading..." ]]. There is a problem with this template tag though…

Let me explain what the issue is before we look at solving it:

The automagically generated link will contain ‘#bodyanchor’ at the end of the link url, so you can actually let the reader jump to the body text. I don’t like that, because in a lot of layouts it’s confusing, and the user ends up scrolling up, to then realize he’s already read that part, and he was redirected to the actual body. Also, there is no way of giving the link a separate class.

The solution is simple: just make a link to the blog entry (the ‘permalink’):

<a class="more-link" href="[[ link hrefonly=1 ]]">Read More »</a>

This will display something like ‘Read more »’, and now the link has a class called ‘more-link’ that you can use to style it.

However, sometimes you write blog posts that are not very long, and those entries might not have more text to display than just the introduction. Normally, the [[ more ]] tag would not output anything in that case. The above code will, and this can be quite dissapointing for visitors to your blog, and confusing too. After clicking the ‘read more’ link, it turns out there’s nothing more to read!

Thanks to the power of Smarty, there’s always a solution. Just program some intelligence in your template, and you can make the ‘read more’ link disappear when there is nothing after the introduction.

The solution is to use an [[ if ]] statement that looks if there’s more to read first:

    [[ if $entry.body != "" ]]
         <a class="more-link" href="[[ link hrefonly=1 ]]">Read More »</a>
    [[ /if ]]

If you wrap your link like this, it will only show up if the body of the entry actually contains any text.

Note: I edited this post after publishing. I’ve been using the permalink for so long, I didn’t realize the [[ more ]] tag actually doesn’t display when there is no text in the body. Still I like to use the ‘permalink’ method for the ‘Read more’ link, and then you need the [[ if ]] statement…