How to change "Read more" and "Add new comment" link to an image in teaser view? 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:



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:


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

/* Tip 1 =&gt; 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(&amp;$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 =&gt; 'Read more&lt;span class="element-invisible"&gt; about ...&lt;/span&gt;'

    $variables['content']['links']['node']['#links']['node-readmore']['title'] = '&lt;span class="element-invisible"&gt;Read more about ...&lt;/span&gt;';

  // 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 =&gt; 'Add new comment'

    $variables['content']['links']['comment']['#links']['comment-add']['title'] = '&lt;span class="element-invisible"&gt;Add new comment&lt;/span&gt;';
    $variables['content']['links']['comment']['#links']['comment-add']['html'] = TRUE;

  // With css, the link looks better.

  } // end if

}

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(&amp;$variables){

   $variables['content']['links']['node']['#theme'] = 'link_YourContentType_readMore';
   $variables['content']['links']['comment']['#theme'] = 'link_YourContentType_addComment';

 }