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 ...

Articles

Comments

Visitor (not verified)

Thu, 2007/01/18 - 09:22

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

Visitor (not verified)

Mon, 2008/01/14 - 05:34

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

Visitor (not verified)

Fri, 2008/09/19 - 20:12

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

Visitor (not verified)

Tue, 2007/01/23 - 04:44

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 ?

Visitor (not verified)

Wed, 2007/02/07 - 16:37

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.

Visitor (not verified)

Wed, 2007/07/11 - 21:23

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

Visitor (not verified)

Mon, 2007/10/29 - 21:25

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

Visitor (not verified)

Tue, 2008/01/08 - 07:03

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.

Visitor (not verified)

Fri, 2008/03/07 - 03:45

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!

Pages

Is your Drupal or Backdrop CMS site slow?
Is it suffering from server resources shortages?
Is it experiencing outages?
Contact us for Drupal or Backdrop CMS Performance Optimization and Tuning Consulting