Moving "Read More" Link Inline in Teaser

Related topics:

A common requirement for many of my recent clients has been to move the "Read More" link at the end of a teaser inline to the end of the teaser's last paragraph. Like this:

read more link example

This need usually occurs in a listing, and listings are almost always built with the fantastic Views module. Often on a page showing excerpts of content, sometimes called teasers in Drupal, the displayed data is a small portion of the entire piece and is followed by a link to the full piece of content. This link is often called the "read more" link, for obvious reasons.

When using the Views 2 module there are a few ways to add a "read more" link to listing showing a preview of an article or other piece of content. In the past I used a trimmed version of the body text that was set to a specific number of characters or words and was followed by a "read more" link to the full view of the content. The are more options available now with the second version of Views.  I am going to outline my newest and currently prefefrred hack/technique.

I no longer use a portion of the larger piece of content for my "teaser" rather I use an entirely different field to hold the text to display on my listings page. I know this can create a bit more work with a content type that is a bit larger than it could be and requires the content creator to do a bit more work, but I find the editorial control to be vastly superior. So, typically in my content piece I create a little sentence or two in a field, and that field's only use is to be used as a preview or teaser on my listing page.

 teaser field

Let's look at am example. I begin by creating my view and setting basic settings like "Published" and "Type". I am using a Row Style of Fields. I add a Title Field.  The next thing that is different about this approach is that when I add my other fields to my view I am selecting the option to "Exclude from display" on each of them.

exclude from display

In this case the fields I am adding are (each of these has the "Exclude from Display" boxed ticked):

    * the field for the "preview" text
    * a Node: Link field - with "read more" in the "Text to display" box
    * another Node: Link - this time with the "Rewrite the output of this field" box also ticked and in the text area I am adding some markup as seen in the image below

node link rewrite

That little bit in the rewriting text area is the cool bit and is a big part of the final field I am adding to this view.  This trick is a nifty little solution to this problem that worked well for me to solve this problem, but the neat part is the technique.  The way I like to think of it is that I am gathering a variety of information in my view and not displaying it and then I am going to use a field with the "Rewrite the output of this field" box ticked to gather all that information I got back from my Views query and display it using the tokens(aka "Replacement patterns").  This is AWESOME!  I can use bits of HTML in the rewrite box if I need to.  I can also "build up" items in the query to get the token to hold exactly what I want to by rewriting those fileds and adding that to the final rewritten field.  This is one big gotchas to be aware of when using this technique: Beware of the Field Order. If you would like to use the output of one field in the field you are rewriting the one you would like to use must be above the one you are rewriting in the fields sort as seen below:

 sorted fields


This brings us to the final step in building up our fields, adding the last field that will hold the rewritten output of all the fields.  For this I chose the "Node: Body" field.  You can see from the image below that I have chosen to  rewrite the output of this fields and I am using the tokens listed under "Replacement patterns" to make the output of the field exactly as I want it.

 rewritten body


This is a huge win for me as a front end developer.  Now I have the pieces of my View wrapped in the elements I want them in so that I can easily use a little CSS to get things to display just how I want them.

In the time I have been using Drupal I have learned that there are many different ways you can solve the same problem. One of the reasons I find this technique useful is that it makes sense to me as a front end developer and gives me the flexibilty I need in a way I understand. 

If you find this helpful or have different way you approach a preoblem like this please leave a comment.