Properly Working Teaser Links in Drupal 7

While working on the development site for Holistic Pet Help (www.holisticpethelp.com), a company that seeks to improve the life of companion animals, I noticed that the teaser link wasn't displaying properly:

Intrigued, I copied and pasted the link into Notepad in an effort to see what was in there:

Now, what was being displayed in Notepad wasn't what was being displayed on the browser, so I had a look at the source code of the page.  Here's what I found:

<nav class="clearfix"><ul class="links"><li class="node-readmore first"><a href="/?q=node/2" rel="tag" title="Massage Your Pet?   Why Not!">Read more<span class="element-invisible"> about Massage Your Pet?   Why Not!</span></a></li><li class="comment_forbidden last"><span><a href="/?q=user/login&amp;destination=node/2%23comment-form">Log in</a> or <a href="/?q=user/register&amp;destination=node/2%23comment-form">register</a> to post comments</span></li></ul></nav>

Here's the interesting bit:

Read more<span class="element-invisible"> about Massage Your Pet?   Why Not!</span>

What's with the <span class="element-invisible"> stuff?  I actually wanted the name of the page in question to be shown in the teaser, otherwise the teaser ends up looking weird, and I don't think it makes much sense either:

It's very clear that there's an extra space between Read More and Log In.

How to fix this?  Well, I found an interesting posting on Drupal.org (www.drupal.org) that led the way.  If you want to read the entire thread, be my guest

The upshot is that this stuff is hard-coded into a core Drupal 7 module called node.module,  and fixing it means potentially altering some of the Core Drupal 7 PHP code.  This is usually a big no-no in the Drupal world, because upgrades to Drupal core can then potentially over-write any customization or modification you may have made.  If you choose to continue past this point in the article, and perform the modifications I suggest, consider yourself warned.

Here's what Drupal has to say about it:

WARNING:  Updating core will discard any modifications made to Drupal core files, most noteworthy among these are .htaccess and robots.txt.  If you have made any modifications to these files, please back them up before updating so that you can re-create your modifications in the updated version of the file.

Note: Updating core can potentially break your site. It is NOT recommended to update production sites without prior testing.

Looking around, I found node.module in the DRUPAL_ROOT/modules/node directory, which is a subdirectory of the main site.  Please note, this is not the same place you normally go to play with module source code, which is usually the DRUPAL_ROOT/sites/all/modules/ directory.

Opening up node.module, I started looking around for the Read More string.  I finally found it at line 1428 (depending on what version of Drupal you are working with, you may find it at a slightly different point in the file).  

Here's what the code looked like when I found it:

    $links['node-readmore'] = array(

      'title' => t('Read more<span class="element-invisible"> about @title</span>', array('@title' => $node_title_stripped)),

      'href' => 'node/' . $node->nid,

      'html' => TRUE,

      'attributes' => array('rel' => 'tag', 'title' => $node_title_stripped),

    );

Here's what the code looked like once I was finished altering it:

    $links['node-readmore'] = array(

      'title' => t('Read more about <b>@title</b>', array('@title' => $node_title_stripped)),

      'href' => 'node/' . $node->nid,

      'html' => TRUE,

      'attributes' => array('rel' => 'tag', 'title' => $node_title_stripped),

    );

Voila!  The link started to display properly.

UPDATE:  MARCH 02 2017

In an attempt to make the display even more attractive on narrow mobile devices, I made the following small change to the code:

    $links['node-readmore'] = array(
      'title' => t('Continue reading <b>@title</b><br />', array('@title' => $node_title_stripped)),
      'href' => 'node/' . $node->nid,
      'html' => TRUE,
      'attributes' => array('rel' => 'tag', 'title' => $node_title_stripped),
    );

Which resulted in a cleaner looking teaser on both my desktop...

...and my legacy mobile device (Samsung Galaxy II)...

So that's it (for now) with respect to this particular issue.