On the project that I'm working on now I need to display the "Read more" and "Add new comment" links in my teaser as images in sepperated divs.

The problems that I have is:

  • I'm using "display suite" to show my content but it only gives me a "Read more" link no "Add new comment" link

  • I need to hide the tekst and display only the image. (see link "read more" part)

Here is a png of what i need to have:

enter image description here

Thx up front for any help you can give me!


You can display both links enabled the "links" field in "manage display" page. The "display suite" module redirect to default content types manager.

Path to this page; Administration » Structure » Content types » Your_content_type » Manage display. Don't forget to select the view mode "teaser" in the upper side of the page to display all the fields associated with this view mode.

If you want to change the output, you will have to code the changes. We have different alternatives to reach to the same place:

  1. Implement in your theme template or in your_module.module the hook hook_preprocess_node . We examinate this function:

    /* Tip 1 => You have to change 'yourmodule' for the real name of your module.
    * For example, when you create a file like apple.module where you will write your code,
    * 'apple' will be the machine name to implement hooks. Following the example,
    * the name of this hook in apple.module should be apple_preprocces_node()
    function yourmodule_preprocess_node(&$variables){
      // Change *your_content_type* for the machine name of your content type
      // In your database, node_type table, you can see the machine name of your content types
      // By default, Drupal comes with 2 content types called Article and Basic Page,
      // but i assumed that you created a new type.
      // The reason of applying a conditional statement is we only want to apply these changes to a specific type,
      // because it's probably that you will use them to build theme like articles to build a blog.
      if ($variables['type'] == 'your_content_type' ){
      // Change the link node read-more
      // I am changing the title of the link. The text stay in the code,  
      // but it's invisible.
      // Default text received in array => 'Read more<span class="element-invisible"> about ...</span>'
        $variables['content']['links']['node']['#links']['node-readmore']['title'] = '<span class="element-invisible">Read more about ...</span>';
      // We only have hidden the text with the span tag.
      // With css you can display the image you want
         $variables['content']['links']['node']['#links']['submitted']['title'] = $variables['submitted'];
         $variables['content']['links']['node']['#links']['submitted']['html'] = TRUE;
         $variables['display_submitted'] = FALSE;
      // -----------------------------------
      // We apply tha same strategy
      // Change the link node add-comment
      // Default text received in array => 'Add new comment'
        $variables['content']['links']['comment']['#links']['comment-add']['title'] = '<span class="element-invisible">Add new comment</span>';
        $variables['content']['links']['comment']['#links']['comment-add']['html'] = TRUE;
      // With css, the link looks better.
      } // end if
  2. You could build your own functions that build the output that you want. This possibility will give you a great power of customization. For example:

     function theme_link_YourContentType_readMore($variables){
       // Build your code and return it
     function theme_link_YourContentType_addComment($variables){
       // Build your code and return it
     // Finally, you need to tell to the system that apply the theme functions that have been built previously
     function yourmodule_preprocess_node(&$variables){
       $variables['content']['links']['node']['#theme'] = 'link_YourContentType_readMore';
       $variables['content']['links']['comment']['#theme'] = 'link_YourContentType_addComment';
  • Hi, thx for trying to anwser my question. I'm still realy new to php code and Drupal in general so I think I'm missing something. I tried your first solution but it gives me 2 errors. The first is for the comment part en the second is where the "end if" is placed. Could you please explain your awnser a bit more :s . For the second solution I dont realy have a clue how to build my own code there... Apr 26 '13 at 21:56
  • Then you should try point 1 if you don't have enough experience. It's easier. Sorry, i forgot to put ';' at the end of statements. I've corrected it in the code. So you copy it again and try it.
    – Rufein
    Apr 27 '13 at 9:55
  • Hi again, I did what you said and tried the first solution and it workt for the "Read more" link, but when i try it on the "Add new comment" link it shows:<span class="element-invisible">Add new comment<\span> . Also with te "Read more" the tekst disepears whats good,but the link function disapears with it... Can you please tell me if I'm misunderstanding something? Thank you for trying to help. Apr 29 '13 at 8:06
  • I've corrected the code. The string output is sanitized by default, so we have to say to the system that we don't need it. I've added a line to acommplish this goal.
    – Rufein
    Apr 29 '13 at 9:28
  • Hey Rufein, thx it works like a charm! I can now hide the "Add ne comment" text but I still loose the link function, is that because I haven't filled it with something else? I tried changing the titel directly to an image but it doesn't seem to accept that. Apr 29 '13 at 9:35

Kinda hack,definitely there will be better answer you can pick the class on the div on add more link and then, let say class is xyz .xyz { text-indent:99999999px; }

Not the answer you're looking for? Browse other questions tagged or ask your own question.