Here is what I usually do in my websites:

  • Have an option for adding image in the WYSIWYG editor of my choice
  • User can upload the image
  • User can resize the image in the WYSIWYG editor
  • Have the Image Resize Filter enabled for the Input Format
  • When user resizes the image, it automatically saves the thumbnail and adds a lightbox/colorbox related attribute so that the image is opened using one of these libraries.

What the problem is now? I have come across a "not very tech-savvy" customer that is displeased with the way that the images are added right now as he cannot grasp any of the regular concepts for images.

Based on his description I reached to the conclusion that I need to implement the following workflow:

  1. A straightforward filefield (imagefield) where he can press the "Browse" button and then the "Upload" button.
  2. He will then write his text in the "Body" field and that's it.

My Requirements:

  1. I don't mind if he cannot see the image when he is editing the node
  2. Only one image will be allowed per node
  3. I want to pre-edit the image's vspace, hspace and alignment (e.g.5px 5px left)
  4. I would also like if I could use the Image Resize Filter for the uploaded image so that only a thumbnail appears in the actual node (teaser and full view) and the original image appears in a colorbox
  5. I don't mind if I will have to edit the node.tpl.php or any other theme file
  6. It's needed that the image is added with the body of the node (e.g. at the start of the text)

What I've tried so far:

I have watched the MustardSeed video for Image Resize Filter along with ImageField Insert module (now it's called Insert) but there are some complex steps in there that my customer cannot comprehend (e.g. adding Vspace, Hspace, Alignment or even manually resizing the image). I would like to give my customer as few options as possible.

  • Does your workflow contradict Requirement #6? Eg, is it a requirement that the user have control over where the image shows up? Or does it just have to be "with" the body of the node, most simply at the beginning or end of the text?
    – Jimajamma
    Dec 31, 2011 at 16:31
  • You are right, it's not very clear. I want it to appear inline as in: "at the start of the text as a thumbnail". I don't want it to even appear in the WYSIWYG editor. I'll edit the "inline" word and make it: "with" as you suggested.
    – F1234k
    Dec 31, 2011 at 16:49

1 Answer 1


If you enable core File and Image modules you can add image upload fields to different nodes/entities and create image styles (to get thumbnails). The number of allowed image uploads can also be set. The image uri will be available in the node.tpl.php file which means you will have full control over how it appears. Here's example code showing about how it could look like in the node.tpl.php file (with colorbox module 'Colorbox load' enabled - alternatively just use javascript):

<?php if (!empty($node->field_image['und'][0]['uri'])): ?>
  $full_img_url = file_create_url($node->field_image['und'][0]['uri']);
  $thumbnail_url = image_style_url('thumbnail_style', $node->field_image['und'][0]['uri']);
  <a class="colorbox-load" href="<?php print $full_img_url; ?>"><img src="<?php print $thumbnail_url; ?>" alt="Image" /></a>
<?php endif; ?>

The code is not tested so there might be mistakes, but it should still be helpful. You'll have to set the image field hidden via 'manage display' or unset/hide it in the template file otherwise you'll get a duplicate printed with $content.

  • Thanks a lot! I only did some minor modifications to match my custom settings and theme the output, but your code worked like a charm :)
    – F1234k
    Dec 31, 2011 at 21:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.