By funkylaundry on

Since I cannot use img:after css pseudo class with most browsers, I need to add a span or div around images uploaded as part of an article or blog-post.

I've tried to track down in which template I should do this, but I am fairly new to Drupal and have now given up.

⋅ Categories: Drupal 7.x

Comments

konordo’s picture

konordo commented

The file you are looking to override is node-.tpl.php. (So for example node-articles.tpl.php or node-blog-posts.tpl.php). Depending on the theme you are using, this might work out of the box, or not. If not, you will need to edit the template.php file (or create one if it is not there), and add some code in preprocess_node function. Check this for more details: http://drupal.org/node/524480

Then, output the image programmatically in your tpl. First, hide the image from content-type > display fields by selecting the option both for teaser and page (or whatever you need), otherwise your image will be displayed twice. Then, here is an example of outputting the image using imagefield and imagecache in your node tpl:

<div class="content">
         <?php
                                // if image exists
				if ($node->field_<your-imagefield-name>[0]['filepath'] != '') {
				 print '<div class="your-class">';	
				 print theme('imagecache', '<imagecache-preset-name>', $node->field_<your-imagefield-name>[0]['filepath'], '', ''); 
				 print '</div>';					 
			print $content;
        ?>
  </div>

You could output different presets for teaser or full page using the $teaser and $page flags.

Don't forget to clear caches after your changes.

--------------------------------------------
Konordo Ltd
http://www.konordo.com

funkylaundry’s picture

funkylaundry commented

Thanks for your reply - I have now attempted to follow your instructions, but have a some issues... forgive me for being a total noob ;-)

I am using Zen as the base theme for my subtheme, by the way.

First issue: I copied the node.tpl.php from the Zen-folder to my subtheme folder. To try it out I entered some simple html, which was printed to the screen. Then I tried renaming the file to node-article.tpl.php and the text dissapeared again - even though the content type was an article (default content-type which came with drupal 7 - no mods for now).

To test it out I renamed the file back to node.tpl.php and tried entering the supplied code snippet within the content div already present. However my current implementation doesn't work and results in all dynamic content on the page not being rendered. I suspect that I entered the wrong values or did not replace som enecessary values in the code-snippet. I found the image-field name by reviewing the edit fields page under the article content type and used file directory path field/image found under settings for the image-field (is this right?). I entered a suitable div class (.article-image) and created a custom image style called article-image as well (I suppose this is the ?)

Also I was not able to find the option to hide the image through content-type > display fields - maybe this option has changed in drupal 7?

In the end my node.tpl.php looks like this, but Dreamweaver warns me that it will not evaluate (indicated with comments below):

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
	
  <?php print $user_picture; ?>

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

  <?php if ($unpublished): ?>
    <div class="unpublished"><?php print t('Unpublished'); ?></div>
  <?php endif; ?>

  <?php if ($display_submitted): ?>
    <div class="submitted">
      <?php print $submitted; ?>
    </div>
  <?php endif; ?>

  <div class="content"<?php print $content_attributes; ?>>
    <?php
      // We hide the comments and links now so that we can render them later.
      hide($content['comments']);
      hide($content['links']);
      print render($content);
	
					// if image exists
	if ($node->field_<field_image>[0]['field/image'] != '') {   //Dreamweaver indicates an error around here
	 print '<div class="article-image">';    
	 print theme('imagecache', '<article-image>', $node->field_<field_image>[0]['field/image'], '', ''); //Dreamweaver indicates an error around here
	 print '</div>';                     
	print $content;
        ?>
  </div>

  <?php print render($content['links']); ?>

  <?php print render($content['comments']); ?>
   //Dreamweaver indicates an error around here                                   
</div><!-- /.node -->
RobW’s picture

RobW commented

Here's some info to get you going in the right direction.

Arguments in template overrides are separated by two hyphens in D7. Where in D6 you would have node-article.tpl.php, in D7 you want node--article.tpl.php. http://drupal.org/node/1089656

In D7 there is no longer an Imagecache module, so theme('imagecache'... doesn't work. The D7 equivalent is Image Styles, which you can set up in Admin->Configuration->Image Styles, and then use with a field in Admin->Structure->Content Types->[Your Content Type]->Display Fields.

I wouldn't bother with Dreamweaver error messages. It probably doesn't understand Drupal 7 code.

By using theme overrides and image styles you can solve your problem easily without hook_preprocess'es. A good D7 theming introduction video will have plenty of examples and make the theming process a lot clearer. Try http://sf2010.drupal.org/conference/sessions/grok-drupal-7-theming