HOWTO: enable thumbnail on teaser, larger image on page using cck imagefield, imagecache and upload

I don't really know if this a problem that others were experiencing of if it is desired behavior. After installing imagefield.module and imagecache.module I wanted my image field images to stop showing inside my nodes because i was going to use image cache to make them all a uniformed size for some added continuity to my site. But if you have tried to do this you will notice that the image from image field was loaded into content. So one way to accomplish this is to modify your template pages, but why should we do this if we this change for everypage. Instead I recommend overriding theme_imagefield_image() in imagefield.module. This way you could use your default profile you created in imagecache and already have you image included and resized the way you wanted with very little work on every page. And you can also add a rather wide variety of advanced functions using this method as well with very little work.

That sounds confusing now that I read that back to my self and stock full of typographical errors, but I'm on a crunch. If that doesn't make sense leave a message and I will correct.

Peace,
-mpare
www.paretech.com

Did you figure out how to do something? Did you find documentation on Drupal.org inadequate? Well now it's your turn. Document your Success!

IMHO all those approaches are far to complex to get somethig, which should just simply "happen"... large pictures in teasers should never appear, regardless of other circumstances and without hassle.

For me, a recode of the very very old "Teaser Image" does that job:

a) in your modules folder, create a folder called teaser_images

b) in teaser_images create a file teaser_images.info with the following content
; $Id: Exp $
name = "Teaser Images"
description = "Downscale Teaser Images"
version = "5.x-2.0-dev"
project = "teaser_images"

c) in teaser_images create a file teaser_images.module with the following content

// $Id: teaser_images.module,v 2.0 2007/02/28 19:26:22 heimstein Exp $

function teaser_images_help($section) {
  switch ($section) {
    case 'admin/modules#description':
      return t('Converts images in teasers into thumbnails.');
    case 'node/add#teaser_images':
      return t('Converts images in teasers into thumbnails.');
    case 'admin/settings/teaser_images':
      return t('Converts images in teasers into thumbnails.');
  }
}

function teaser_images_nodeapi(&$node, $op, $teaser, $page) {
  switch ($op) {
    case 'alter':
          $find = '/<img(.+?)>/i';
          $teaser = preg_replace_callback($find, "teaser_images_replace", $node->teaser);
    	  $node->teaser = "".$teaser;
    break;
  }
}
 
function teaser_images_replace($image) {
  $image = $image[1];
  $find= '/src="(.+?)"/i';
  preg_match($find, $image, $matches);
  $image_regular = $matches[1];
  $parts = explode(".",$matches[1]);
  $parts[count($parts)-1] = 'teaser.'.$parts[count($parts)-1];
  $image_teaser = implode(".",$parts);
  $image_tag = ''
    .'<a target="_blank" href="'.$image_regular.'" >'
        .'<img src="'.($image_teaser).'" >'
    .'</a>'    
  ;
  if(!file_exists($_SERVER['DOCUMENT_ROOT'].$image_teaser)) {
    image_scale(
        $_SERVER['DOCUMENT_ROOT'].$image_regular, 
        $_SERVER['DOCUMENT_ROOT'].$image_teaser, 
        100, 100 
    );
  } 
  return $image_tag;
}

d) turn it on at admin/build/modules

e) there is NO config. if you want other resolution, change it in source (100,100)

any feedback on this is welcome!

thx

Thanks for this.
I'm still on a learning curve and this gave me a some training.
Everything works fine with Drupal 5.x except Stage 3, steps 1, 7 and 8:
Step 1 you click on "add field" to start creating a new field.
Skip steps 7 and 8 and finish Stage 3 (save the settings).
Select "Display fields" and here you can set teaser and full display to your presets. You can also show or hide the field label in the node.

I also need this as I want to load pictures into nodes (like blogs) without having to use albums to upload (like with image assist and Acidfree).
I got one question: How do I insert (anchor) images into specific positions in my, say, blog? I want to be able to justify it, and also put it in between text.

For some reason imagecache isn't creating a folder within the files folder nor is it creating different versions of the uploaded image. Needless to say I have broken image links. I'm using drupal version 5.3 and imagecache 5.1.3. Any ideas what is going on? Also it may be helpful to note I haven't switched to clean URL's yet either.

image.module can do this too -- if not the latest version, then in one coming soon as I've seen the code in CVS HEAD :)

You can accomplish the same thing just using the image attach module them.

In your theme folder (sites/all/theme/yourThemeName, in the template.php append this code:

function yourThemeName_image_attach_body($node){
  drupal_add_css(drupal_get_path('module', 'image_attach') .'/image_attach.css')
  $image = node_load($node->iid);  
  $info = image_get_info(file_create_path($image->images['preview']));
  $output = '';
  $output .= '<div style="width: '. $info['width'] .'px" class="image-attach-body">';
  $output .= l(image_display($image, 'preview'), "node/$node->nid", array(), NULL, NULL, FALSE, TRUE);
  $output .= '</div>'."\n";
  return $output;
}

and you are finished ....

the above solution fails if you can't have imagenode because your site doesn't allow url names...

I didn't catch how to do that:
>Imagecache Options
>
>7. "Teaser preset" - set this to the imagecache preset (created in Stage 2) that defines your thumbnails e.g. yourcontentnode_thumbnail
>8. "Body preset" - set to the imagecache preset (created in Stage 2) that defines your main image to be displayed in the node page body e.g. yourcontentnode_mainimage

So uploaded images have original size, and I would like to have them resized (and with thumbnails). May be I've done something wrong? HELP!

I followed all the steps above by "scarything". I now can see a thumbnail in the teaser and the original size image in the full node. What I will like to do is to have the thumbnail in the full node and when you click on it, it should show the original size image. Something similar to what lightbox does http://www.huddletogether.com/projects/lightbox2/

Any ideas?

I have multiple images for my nodes? Does anyone have a solution in which I can draw only 1 image? Currently with Views, ImageField/ImageCache, I am able to specify which thumbnail I want to be displayed on a view, but find it limited because if I have more than one image attached, all the images will use the preset, and hence, I would have them all thumbnailed rather than just 1 being displayed.

I have tested many times I do not find the error
THE DISPLAY AND THE THUMBNAILS pictures retain their original size, someone he managed to solve the problem?

http://blip.tv/file/256997

CCK Content Construction Kit (CCK)
http://drupal.org/project/cck
VIEWS
http://drupal.org/project/views
VIEWS BONUS PACK
http://drupal.org/project/views_bonus
CUSTOM PAGES
http://drupal.org/project/custom_pagers
IMAGEFIELD
http://drupal.org/project/imagefield
THICKBOX
http://drupal.org/project/thickbox
IMAGECACHE
http://drupal.org/project/imagecache

DRUPAL 5.7

i can't use "Clean URLs" because i m not admin of the Apache serveur (1and1.com)

other plugins :
TinyMCE, WEBFORM, CAPTCHA, SWF TOOLS, Google MAP

Hi, I followed instructions above and they work a treat except for one thing...
Both the thumbnail image and the post image both have a title above them...

I would like to have no title at all with the image, just the image on it's own as the title is not really needed.
When creating the imagefield, the title attribute is mandatory... I tried putting in which works to some extent, but i am still left with a colon (:) where the title would be.

Us there a way that i can get this title removed completely?

http://www.youthparticipation.ie/testnewsitem
The page listed shows an example, where the colon is left above the image...

Using:
Drupal 5.6

UPDATE: I am a fool - this setting is located in content type / display fields... set label to hidden

Any ideas on how to make the images in a gallery added via imagefield spread across multiple pages?!!
Can't seem to find the configuration option for the same!!

If you want to display a teaser image, witch made with cck-imagefield and resized with imagecache:

Change in the node.tpl.php this:

<div class="content">
<?php print $content; ?>
</div>

to this one:

<div class="content">
<?php if ($teaser == 1) {
    print '<div class="node_teaser">';
if (isset($node->your_imagefield_name[0])) {
    print '<a href="'.$node_url.'" class="node_image" title="'.$description.'">';
    print theme('imagecache', 'your_imagecache_preset', $node ->your_imagefield_name[0]['filepath']);
    print '</a>';
    }   
    print '</div>';
    }
    print $content;
?>
</div>

Add to the style.css:

.node_image {
  float: left;
  margin-top: 4px;
  margin-right: 4px;
  margin-bottom: 4px;
  margin-left: 4px;
}

I have multiple images for my nodes? Does anyone have a solution in which I can draw only 1 image? Currently with Views, ImageField/ImageCache, I am able to specify which thumbnail I want to be displayed on a view, but find it limited because if I have more than one image attached, all the images will use the preset, and hence, I would have them all thumbnailed rather than just 1 being displayed.

I am facing the problem. The default Drupal upload module gives you the option to choose which one to use in the teaser. I couldn't find the same option in image cache.