Adding custom images to a Calendar view

Question

I am trying to add custom images into Drupal's calendar view by checking 'nid' of a node (or taxonomy term in future). I am writing this custom code in views-view-field--calendar--nid.tpl.

The problem is that, what ever is output by views-view-field--calendar--nid.tpl is also inserted into 'id' attribute of div tag. Please see the second div tag.

254 was the output and it is also inserted into 'id' attribute.

<div class="view-item view-item-calendar"> 
  <div class="calendar monthview" id="calendar:
 254:changed:0:0"> 
              <div id="nid" class="view-field view-data-nid"> 


 254      </div>  
      </div>    

So when views-view-field--calendar--nid.tpl outputs img tag, it also get inserted into 'id' attribute, which breaks the second div tag.

Please, see following output

<div class="view-item view-item-calendar"> 
  <div class="calendar monthview" id="calendar:
 <img src="http://www.programmingnature.com/stackoverflow_32.png"&gt; </img>255:changed:0:1">
              <div id="nid" class="view-field view-data-nid"> 


 <img src="http://www.programmingnature.com/stackoverflow_32.png"&gt; </img>255      </div>  
      </div>    
</div> 

Screenshot:

Please note that Calender view tried to insert the output with img tag inside that 'id' attribute and everything now is messed up...

How can I prevent Calender from inserting output into 'id' attribute? Or is there any alternative way to insert images in Calender view ?

Following is the code of views-view-field--calendar--nid.tpl

<?php

$results = $variables['view']->result;
$nid=$output;

$newOutput="";

foreach ($results as $key => $value) {
//Find the matching nid

 if ($nid==255) {

 $newOutput.= '<img src="http://www.programmingnature.com/stackoverflow_32.png"&gt; </img>';
 }

 $newOutput.=$nid;


    }

 print  $newOutput; 

?>

Answer 1

Calendar's pretty silly. What's occurring is that the calendar view is creating an ID based on all available fields in the view and stringing them together to create a unique ID. Great in theory, but it assumes a lot (like you not doing what you're trying to do here).

You can see what it's attempting to do in template_preprocess_calendar_node() in theme/theme.inc. The solution is to create your own preprocess function, mytheme_preprocess_calendar_node(&$vars), and set $vars['fields']['id'] to something more sane, like perhaps 'calendar-' . $vars['node']->nid.

Answer 2

For the time being, since I just wanted to display a single image for a node, I changed

$newOutput.= '<img src="http://www.programmingnature.com/stackoverflow_32.png"&gt; </img>';

to

$newOutput.= "<img src=http://www.programmingnature.com/stackoverflow_32.png&gt; </img>";

Note, I just removed quotes from the string.

So, following output is generated by Calendar,

<div class="calendar monthview" id="calendar:<img src=http://www.programmingnature.com/stackoverflow_32.png&gt; </img>255:changed:0:1"> 

    <div id="nid" class="view-field view-data-nid"> 

    <img src=http://www.programmingnature.com/stackoverflow_32.png&gt; </img>255  

   </div>  
</div>  

Well, img tag is still inserted into ID attribute, but div tag is not broken, and I get the correct output.

Better permanent solution is to use preprocess function as suggested by Mark and kiamlaluno