Putting a watermark on image using Imagecache Actions

Question

I would like to put a watermark on the images I'm uploading, but a bit differently than how imagecache does it. Since if a use imagecache for this task, the watermark is always on the image, I would like to put it below the image (t.i. if the height of the img is 500px, then the imagecache would keep it 500 + 40px for the watermark). Is there a way to do it?

Real life example: http://www.bildites.lv/images/5wbdmy4t3ezmtq3as8m.png right now it's like the image on the left, I would want it to be like the image on the right. Is there a way to do it? Keeping in mind I'm also scaling those images.

Answer 1

You can use Imagecache Actions module.

Effects provided

• Watermarking - a much requested addition that enables you to place any image anywhere over a source picture, with alpha transparency
• Overlays - Add photo-corners etc to the image
• Text overlay - add a short copyright notice to your image, using available system fonts
• Color-shifting - Colorize images. Also invert.
• Brighten/Darken
• Alpha blending - turn an image into a transparent mask, and back into a flat image against another color
• Canvas manipulation - add padding, either onto color or transparent backgrounds
• Background - Place your image onto another source background
• File Format switcher - If you need tranparency in JPGs : make them PNG. If your PNG thumbnails are 30K each, save them as JPGs. (This is distributed as part of the color-actions submodule)
• Rounded corners (transparent). With input from canaryMason, we can even set different radius for different corners, and round just one corner etc.
• Aspect Switcher new 2009-08 - lets you perform different actions or use different dimensions based on whether the image is 'landscape' or 'portrait'
• Custom Actions - Execute your own PHP/GD code in the middle of an imagecache generation process. Requires some familiarity with imageAPI internals.

I have bolded the ones that would interest you.

Answer 2

As mentioned, use ImageCache Actions to generate your actual image. You could also assign some CSS to the generated image to position your "overlay" below the image. Just give it a CSS position of absolute and a bottom of negative the height of the image overlay.

For example, if your image is 40px tall, you could assign the wrapping class:

position: absolute;
bottom: -40px;

This'll position the generated image below your primary image with some simple CSS. You'll need to identify the selector / element which ImageCache Actions generates in order to assign the CSS to the wrapper. You'll also need to assign the wrapping element of both your generated ImageCache element and the original image position (position: relative;) so that the absolute positioning will work properly, relative to the container.