Creating a Field in order to add Icons to content's Title [closed]

Question

we want to add Icons before the Content's title just like the picture below (icon before Glory of the Hero):

but the problem about the stuff already existing in prior asked questions is that we're gonna work with that a lot in our site , so if we're gonna code it for EACH title, it wouldn't be useful for us >>>>> so we wan to add a field in our content types for example called title's image , and so each time we upload a file there, we'll have an icon before that content's title.

I've already read:

• Icon images with node title
• https://www.drupal.org/node/140517
• https://stackoverflow.com/questions/8976315/drupal-7-display-images-instead-of-nodes-titles
• https://stackoverflow.com/questions/10665893/how-to-add-image-with-title-of-an-html-page
• Optionally add image/icon after node title based on boolean content type field?
• https://www.drupal.org/node/270332

and they didn't help at all... is there any way to do that?

Answer 1

You can do this by creating node.tpl file.

    <?php print render($title_prefix); ?>
      <?php if (!$page): ?>
     //"print image here"  
 <h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
      <?php endif; ?>
      <?php print render($title_suffix); ?>

You can get all the field value here and just print the image before the title.

Answer 2

I think I have a solution for you, a bit tricky though. Do the following

1. Install/enable "devel" module
2. Override page.tpl.php to page--node--%.tpl.php (or you could use the page.tpl.php)
3. Find the title element in the page.tpl.php , looks like following

4. Make sure that you have a field called icon (note the machine name i.e. field_icon) in your content type
5. Create a sample of your content type
6. Click on "Devel" tab and try to find the field_icon or whatever you named the field, as shown in the following screenshots

and clicking on the field_icon, you will see a structure similiar to this

Just before the h1 tag, in the screenshot of page.tpl.php shown in #3 add a code that looks like the following:

<img src="<?php
        $var = $page['content']['system_main']['nodes'];
        $element; 
        foreach($var as $k => $v) {
        $element = $v ;
        #obtain the node id, usually first.
        break; 
        }
        #$exist = $element[$element['field_icon']['#object']->field_icon['und'][0]['uri'];
        if(isset($element['field_icon'])) {
        print $element['field_icon']['#object']->field_icon['und'][0]['uri']; 
        } else {
        #does not exist
        }
    ?> " />

The code above creates an image tag, and its src value would be the value of the URI of the icon. Use Devel (or kpr($page['content']['system_main']['nodes']); inside page.tpl.php) tab to figure out what to replace with $page['content']['system_main']['nodes'], probably it might remain the same for you as well.

Once you got the content of the $page['content']['system_main']['nodes'] or similar then loop through it to find the node-id (which can be anything). The reason I have a break in loop is because, I am interested in first element which is node-id, see below

And finally access the URI as shown in the following Devel Screenshot

Nothing will be printed in pages where there is no field_icon (i.e. icon machine name), and the icon should be printed in pages that have that field in its $page variable. Good luck.

Here is the result: