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:
- A straightforward filefield (imagefield) where he can press the "Browse" button and then the "Upload" button.
- He will then write his text in the "Body" field and that's it.
My Requirements:
- I don't mind if he cannot see the image when he is editing the node
- Only one image will be allowed per node
- I want to pre-edit the image's vspace, hspace and alignment (e.g.5px 5px left)
- 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
- I don't mind if I will have to edit the node.tpl.php or any other theme file
- 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.