Watermarking Product Images

The following tutorial will show an example of how to achieve watermarking for Ubercart product images. It could also be used as a general guide to achieve watermarking for other imagecache derived images.

Goals:

  • Apply a watermark to imagecache derived product images.
  • Apply a watermark to thickbox popup images.

Screenshots:

I have attached screenshots to whet your appetite:

Benefits:

  • A single watermark image is required and will be scaled to fit the chosen output dimensions.
  • The imagecache presets remain flexible allowing for image sizes to be changed easily if the need arises.

Requirements:

I’ll assume you have Drupal 5.x, Ubercart and the required modules installed and working.

Instructions:

Install the patch.

Extract the imagecache watermark patch and copy the patched imagecache.module file into the imagecache module directory (overwriting your existing imagecache.module file).

It is probably a good idea to familiarise yourself with the new imagecache actions. Go to Administer > Site configuration > Image cache (admin/settings/imagecache) and click product to expand the options.

If you are at all familiar with imagecache you will notice a lot of new actions:

  • Define canvas: Define the size of the working canvas and background color, this controls the dimensions of the output image.
  • Overlay: source image to canvas: Places the source image onto the canvas for compositing.
  • Overlay: file image to canvas (watermark): Choose the file image you wish to use as an overlay, and position it in a layer on top of the canvas.
  • Overlay: text to canvas: Overlay: text to canvas.
  • Return canvas: Return rezult canvas (by swap source image and canvas).
  • Replace source image by file.

Create the watermark image.

A 24bit PNG image file with alpha transparency is required for the watermark. An example file (watermark.png - 200x200px) has been attached which you may like to use for testing purposes.

Upload the watermark to the files directory of your Drupal installation.

Modify the existing imagecache presets.

These instructions are valid for all existing imagecache presets so repeat the same steps for each imagecache preset you wish to apply the watermark to.

  1. Create blank canvas (Define canvas)
  2. Scale source image (Scale)
  3. Place product image on canvas (Overlay: source image to canvas)
  4. Overlay watermark (Overlay: file image to canvas)
  5. Merge to a single image (Return canvas)
  6. Scale to final size (Scale)

1. Create blank canvas

Expand the options for the chosen imagecache preset and add a new action: Define canvas. Update the preset and enter the settings using the following as a guide:

  • Width: 200
  • Height: 200
  • Red: 255
  • Green: 255
  • Blue: 255
  • Weight: -10

This action defines a blank canvas. Our watermark.png file is 200x200px so we set our canvas to the same dimensions. Red, Green and Blue are set to 255 to give a white background (although this should never be seen due to the outside dimension setting in the following scale action).

2. Scale source image

Add a new action: Scale image. Update the preset and enter the settings using the following as a guide:

  • Width: 200
  • Height: 200
  • Scale to fit: Outside dimensions
  • Weight: -9

This action scales the source (product) image to the same dimensions as our canvas and watermark image ensuring that the watermark covers the whole image. We set outside dimensions so the source image is cropped to a square.

The weight is higher than the previous action since it needs to come later it in the chain.

3. Place product image on canvas

Add a new action: Overlay: source image to canvas. Update the preset and enter the settings using the following as a guide:

  • canvas_index: 1
  • X offset: center
  • Y offset: center
  • transparency: 100
  • Weight: -8

This action places the product image onto our working canvas (canvas_index: 1), sets the alignment and transparency of the image.

4. Overlay watermark

Add a new action: Overlay: file image to canvas. Update the preset and enter the settings using the following as a guide:

  • canvas_index: 1
  • X offset: center
  • Y offset: center
  • transparency: 20
  • filename: watermark.png
  • Weight: -7

This action overlays the watermark image (specified by the filename and relative to the files directory) on top of the product image.

5. Merge to a single image

Add a new action: Return canvas. Update the preset and enter the settings using the following as a guide:

  • canvas_index: 1
  • Weight: -6

This merges the source image with the watermark allowing us to apply further processing to the composite.

6. Scale to final size

Update the preset to finish adding the previous action and the original scale action should be at the very bottom of the actions list with a default weight of 0. Verify that you have entered the correct settings and refresh your browser to see the results.

Hopefully everything is working properly and images derived from this imagecache preset are watermarked.

Repeat this process for each imagecache preset that requires watermarking.

Add watermarking to full-sized images.

Create a new imagecache preset

Created a new preset called ‘watermark’ or choose a name yourself.

The following is a brief overview for the process. Notice we’re not scaling the image this time (but you could if your images are huge).

  1. Create blank canvas (Define canvas)
  2. Place product image on canvas (Overlay: source image to canvas)
  3. Overlay watermark (Overlay: file image to canvas)
  4. Merge to a single image (Return canvas)

1. Create blank canvas (Define canvas)

  • Width: 100%
  • Height: 100%
  • Red: 255
  • Green: 255
  • Blue: 255
  • Weight: -10

2. Place product image on canvas (Overlay: source image to canvas)

  • canvas_index: 1
  • X offset: center
  • Y offset: center
  • transparency: 100
  • Weight: -9

3. Overlay watermark (Overlay: file image to canvas)

  • canvas_index: 1
  • X offset: center
  • Y offset: center
  • transparency: 20
  • filename: watermark.png
  • Weight: -8

4. Merge to a single image (Return canvas)

  • canvas_index: 1
  • Weight: -7

Modify the product image theme function.

Copy the following function into your template.php file. If you don’t have a template.php file in your theme folder, refer to: template.php: Overriding other theme functions.

Don’t forget to rename the function by replacing theme_ with the name of your theme. If you are using Garland theme the function would be garland_uc_product_image(). Also, don't include the <?php ?> tags

<?php
/**
* Format a product's images with imagecache and Thickbox.
*
* @ingroup themeable
*/
function theme_uc_product_image($images){
  static
$rel_count = 0;
 
$thickbox_enabled = module_exists('thickbox');
 
$first = array_shift($images);
 
$output = '<div class="product_image">';
  if (
$thickbox_enabled){
   
$output .= '<a href="'. check_url(file_create_url('imagecache/watermark/'. $first['filepath'])) .'" title="'. $first['title'] .'" class="thickbox" rel="thickbox'. $rel_count .'">';
  }
 
$output .= theme('imagecache', 'product', $first['filepath'], $first['alt'], $first['title']);
 
/* if (count($images)){
    $output .= '<br />'. t('Click for more images.');
  } */
 
if ($thickbox_enabled){
   
$output .= '</a>';
  }
 
$output .= '<br />';
  foreach (
$images as $thumbnail){
    if (
$thickbox_enabled){
     
$output .= '<a href="'. check_url(file_create_url('imagecache/watermark/'. $thumbnail['filepath'])) .'" title="'. $thumbnail['title'] .'" class="thickbox" rel="thickbox'. $rel_count .'">';
    }
   
$output .= theme('imagecache', 'thumbnail', $thumbnail['filepath'], $thumbnail['alt'], $thumbnail['title']);
    if (
$thickbox_enabled){
     
$output .= '</a>';
    }
  }
 
$output .= '</div>';
 
$rel_count++;
  return
$output;
}
?>

Notes:

  • I’m calling my images in a node-product.tpl.php file using the following:
<?php print $node->content['image']['#value'] ?>
  • If you’re using Views to display your products you may need to change the imagecache preset setting in the Fields section of Views’ edit page.

Caveats:

For optimal display using this method, product images should conform to a minimum size. In the above tutorial the watermark image used is 200x200px, this defines the minimum dimensions for product images. If any product images are smaller than the chosen minimum they will appear smaller relative to the watermark. For full-sized images the watermark is displayed at its original dimensions (i.e. since there is no scale action for the full-sized image the watermark will not be resized).

PreviewAttachmentSize
watermark-product-table.pngwatermark-product-table.png40.69 KB
watermark-product-page.pngwatermark-product-page.png72.84 KB
watermark-thickbox.pngwatermark-thickbox.png257.29 KB
imagecache_watermarks_v014.zip294.35 KB
watermark.pngwatermark.png6.13 KB