Drupal: Using imagecache with Views and CCK imagefields

A while ago, Angela Byron of Lullabot wrote an article comparing Image and Image Exact Sizes with CCK Imagefield and Imagcache.

The examples given in the article are clear, but if you are using views, you will need to do some more stuff to get what you want.

What my client wanted was the ability to upload a picture of any size, and have a preset size of it appear in one place, and another in another place.

These business requirements translate to two different views that end up as blocks on the front page, using the same content type.

Here are the steps necessary to do this:

First, create the views with the CCK imagefield field in it. For this particular case, we needed the title, author, timestamp, text and tags.

Follow the instructions in Angela's article on how to create presets. In my case, I needed two of them, both of type scale, one for 122 pixel width, and the other for 68 pixel width. By the way, imagecache refuses to work if you give it only a width, so enter something in the height as well.

Then use the views theme wizard, select the view, and click Generate Theme. This will give you two snippets per view. One goes in the template.php for the theme, the other goes in a file called views-list-something.tpl.php.

Now, you need to change the image field in the view from something like:

<div class="view-field view-data-field_image_fid">
<?php print $field_image_fid?>
</div>

To this:

<div class="view-field view-data-field_image_fid">
<?php $file = _imagefield_file_load($node->node_data_field_image_field_image_fid); ?>
<?php $img = theme('imagecache', 'width122', $file['filepath']); ?>
<?php print l($img, "node/$node->nid", null, null, null, false, true); ?>
</div>

The key here is the obscure field $node->node_data_field_image_field_image_fid which was impossible to guess, but with some print_r()s it was revealed to be the one to use. This field holds the file ID of the image, and can be used for the imagecache retrieval.

Now, for the other view, repeat the steps above, with a different preset to get a different image size for the other view.

When the views are placed in blocks, they will show different sized scaled image, and the original remains the same.

Enjoy ...

Contents: 

Comments

thanx

that article just saved me from doing 21321 searches + smashing my head into the screen, while crying "why dosnt it work" - you just made my day :)

/mdk

Hi, Thanks for very

Hi, Thanks for very interesting article. I really enjoyed reading all of your articles.

Thanks!

I used

<?php
 $file
= _imagefield_file_load($node->node_data_field_asociado_imagen_field_asociado_imagen_fid);
?>
<?php
 $img
= theme('imagecache', 'ancho100', $file['filepath']);
?>
<?php
 
print l($img, "node/$node->nid", null, null, null, true, true); 
?>

where field name was

asociado_imagen

Thanks!

Adam

Problem with the path of the image

HI !
Thank you for this snippet but I have a problem with the path. The image is not displayed for me.

My image field is called field_pochette_du_disque and I want to display the 'samll' imagecache preset so that's how I've edited the code

$file =_imagefield_file_load($node->node_data_field_pochette_du_disque_fid);

$img = theme('imagecache', 'small', $file['filepath']);

print l($img, "node/$node->nid", null, null, null, false, true);

And that's the path printed for each image :

http://mydomain.tld/files/imagecache/small

Do you know what's wrong ?

Thank you very much.

PS /// Another question: Would it be possible to print another field as the title for the image ?

I just figured out how to find the FID name

Go into the .tpl.php file and at the bottom put the following code:


<?php print_r($node) ?>

Now display your view. Mine was a block. It ended up like this:


stdClass Object ( [nid] => 4
[node_data_field_start_time_field_start_time_value] => 2007-02-11T19:00:00
[node_title] => Herman's Hermits
[node_changed] => 1170851050
[node_data_field_byline_field_byline_value] => starring Peter Noone
[node_data_field_start_time_field_start_time_value2] => 2007-02-11T19:00:00
[node_data_field_band_image_field_band_image_fid] => 3
[node_data_field_band_image_field_band_image_title] => Peter Noone
[node_data_field_band_image_field_band_image_alt] => Herman's Hermits starring Peter Noone )

Because I'm working on a site for my workplace, and right now I'm messing with the entertainment functionality, you can see some silly data in there. Ignore it please thank you :) But anyway, [node_data_field_band_image_field_band_image_fid] => 3 is the relevant line here. Of course, now that you know this (and now that I am telling you that my image's internal name is band_image) you should be able to figure it out. But if you are having problems finding an appropriate data structure to examine, this will solve the problem nicely. Don't forget to remove your print_r statement from your .tpl.php file when you are done.

Can anyone expand on this to

Can anyone expand on this to figure out how to print the first three pictures of a node. Kindof like a teaser view????

Thanks for putting this up,

Thanks for putting this up, I was going insane trying to work out how to do this!

Thanks sooo much

Your code worked perfectly except when you make the image as a link (through Views) in Internet Explorer it shows 2 broken image boxes above and below the imagecache image. This can be fixed by replacing the second last "false" with "true" eg...

nid", null, null, null, false, true); ?>
to
nid", null, null, null, true, true); ?>

I actually fluked this because I have no idea what the null's, true's and false's mean!

Thanks again.

Am i missing somthing?

Hi i used lullabot's ImageCache method for my user avatars, used the views theme wizard and got the following code

<div class="view-field view-data-uid">
<?php print $uid?>
</div>

i think i followed the example and got...

<div class="view-field view-data-uid">
  <?php $file = _imagefield_file_load($node->node_data-uid); ?>
  <?php $img = theme('imagecache', 'small50', $file['filepath']); ?>
  <?php print l($img, "node/$node->nid", null, null, null, true, true); ?>
</div>

can anyone tell me where i goofed?
have a look at http://afterthemouse.com/gallery
many thanks and great little site!

Thanks!

Awesome. Exactly what I was looking for. Saved a lot of time trying to figure this one out. It would be convenient if Views could recognize thumbnails associated with CCK image field types so that this kind of code-foolery could be avoided.

Does this work on field.tpl in D6 / Views2?

I am having issues getting this to work.

SETUP:
Drupal 6.14
Views 6.x-2.6
CCK 6.x-2.5
FileField 6.x-3.1
ImageField 6.x-3.1
ImageCache 6.x-2.0-beta10

SCENARIO:
I want to print an imagecached preset image to a field.tpl file:
Theming a 'page-display' 'grid-view' field.

I am theming a views field tpl called:
views-view-field-myfieldname-fid.tpl.php

I can print a bunch of other fields on the tpl without issues but images don't work for some reason (?)

When I try the above code (modified with my field names and imagecache preset names), I get an error message saying:

"Fatal error: Call to undefined function _imagefield_file_load() in /home/users/..... on line 10"

which coresponds to the first line of:

<?php
 $file
= _imagefield_file_load($node->node_data_field_image_field_image_fid);
?>
<?php
 $img
= theme('imagecache', 'width122', $file['filepath']);
?>
<?php
 
print l($img, "node/$node->nid", null, null, null, false, true);
?>

Is there something I need to put in template.php for this to work?
Does this code work for views2?
Is something escaping me?

Any help much appreciated.

Thanks!

Solved

solved:
In Drupal 6 this:

_imagefield_file_load

should be changed to:

field_file_load

My final output (slightly modified) is

<?php
$file
= field_file_load($row->node_data_field_image_field_image_fid);
$img = theme('imagecache', 'width122', $file['filepath']);
print
$img;
?>

big thx to gogasan for the enlightenment!

This solution didn't worked

This solution didn't worked for my view. I came up with this solution for Drupal 6:

<?php
$img
= theme('imagecache', 'imagecahe-preset-name', $field_filefield-name[0]['filepath']);
print
$img;
?>

It's working for me.

This article hepled me a lot. Thanks.

http://daipratt.co.uk/drupal-getting-the-image-path-of-a-cck-field/

Works!!

Works for me!

<?php
$file
= field_file_load($row->node_data_field_img_field_img_fid);
$img = theme('imagecache', 'thumb', $file['filepath']);
print
$img;
?>

Thanks so much.

Images and Sizes

Finally thank you so much for posting this I have been searching high and low for this information. I wish there was a way to get the exact search you want on google, sorry off topic. The code up there is perfect. Thank you Angela Byron of Lullabot and 2bits