Using ImageField to add an inline image (save thumbnail, and when clicked open with colorbox)

Question

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.

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'])): ?>
  <?php
  $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.