Teaser Small image & body medium image link to full size with CCK Image and Imagecache
Image Cache and CCK Image have been discussed in detail many times, however I haven't seen this anywhere and found trying to get it working quite frustrating. I thought I would pass it on for anyone else that needs it. It is a small bit of code that simply displays 2 different imagecache profile images which link to displaying the full size image on a new page. If you need something more sophisticated it is a good basis for a starting point.
This guide assumes that either you have or you know how to set up and use node.tpl.php which is the file this code should be added to.
Step One
Set up 2 imagecache presets, one called normal and one called large. Add approprioate filters to the sizes you require.
Step Two
Edit your node.tpl.php file from your template and add the following code where you want the image to display:
<?php
if ($page && $field_image[0]['filepath']){
print "<a title='View Full Size Image' href='/".$field_image[0]['filepath']."'><img src='/files/imagecache/medium/".$field_image[0]['filepath']."'></a></div>";
} elseif ($field_image[0]['filepath']){
print "<a title='View Full Size Image' href='/".$field_image[0]['filepath']."'><img src='/files/imagecache/normal/".$field_image[0]['filepath']."'></a></div>";
}
?>That's it, you may need to change the '$field_image' to whatever your CCK image field is called (You can see this by viewing the content type and clicking manage fields).
One more thing about imagecache which I think is the source of many troubles is to understand that the images do not exist in the imagecache directory until the first time they are used by a displayed node. So if you are having problems with the directories not been created etc... make sure that the /files/imagecache/profile_name/ is correct as this is probably the cause. You can also put:
<?php
print_r($field_image);
?>temporarily into your node.tpl.php to display the contents of the array.
this isn't working
for me. I get a blank page...what do those
</div>tags close?are all ' and " in place? also do we need
<a>and</a>?Doesn't crap out, but code not working for me either.
Hello, I'm using a CSS-modified version of Blue Marine and stuck your code into my node template, thusly:
<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>"><?php if ($picture) {
print $picture;
}?>
<?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?>
<?php
if ($page && $field_photo[0]['filepath']){
print "<a title='View Full Size Image' href='/".$field_photo[0]['filepath']."'><img src='/files/imagecache/productpage240x180/".$field_photo[0]['filepath']."'></a></div>";
} elseif ($field_photo[0]['filepath']){
print "<a title='View Full Size Image' href='/".$field_photo[0]['filepath']."'><img src='/files/imagecache/popup640x480/".$field_photo[0]['filepath']."'></a></div>";
}
?>
<span class="submitted"><?php print $submitted?></span>
<span class="taxonomy"><?php print $terms?></span>
<div class="content"><?php print $content?></div>
<?php if ($links) { ?><div class="links">» <?php print $links?></div><?php }; ?>
</div>
Now, the page still loads normally, but tragically I am not getting the desired effect--a 240x180 image that, when clicked, enlarges to a 640x480 in a separate window. I'm not super at php, so I'd appreciate any help as to what I got wrong...
Thanks in advance.