Wednesday, July 27, 2016

Sitecore WaterMark Image Generator Module




Adding Watermark or Copyright Info in Sitecore Image? , Yes this module will help you to generate the watermark text on the image.

Prevention is better than cure!

Image is the big asset of any website but on the webpage/website anyone one can download and use your valuable images, do you want to protect your image? The question is how? There are a couple of techniques we can adopt to safeguard our copyrighted content and prevent people from doing so.

One of them is watermarking our images with our logo or watermarking the website name on the images. Yes, this module will help you to generate your company logo or any text on the image so the image would generate as the watermarked image on the fly. 

If you are selling the images on your website or image is the key component on your website then this module is the best fit for you.

In this module, I proposed a watermarking the image using some predefined configuration in sitecore. I have extended the existing JPEG and Image template to support the watermark image generator.

This module has below features

  • Generate on the fly text on image called watermark image
  • Preview the watermark image using preview and edit mode.
  • We can change the property of watermarked text like font, style, color, position, opacity etc.
  • Reflecting on web database and preview/edit mode only
  • Base image will not impacting which is in master database.


Using this module you can customize the watermark text on image as below
  • Font size
  • Font position
  • Font color
  • Font opacity
  • Font style
  • Font family


·     Below are some screen shot of this module:

WaterMark Template:


Water mark image with Live mode




Water mark image with preview mode





How to use this module:

  1. Install this module
  2. Follow the post installation steps
  3. Fill the entire configuration fields in image template
  4. Checked the ApplyWaterMark checkbox
  5. Delete the media server cache from /Website/App_Data/MediaCache
  6. Clear your browser cache and do hard refresh the page (Ctrl and press F5)
  7. If still not reflecting check the color code and provide some other color code.


Post Installation Step for this module:

Add the new WaterMarkImage template ({06B6240C-7E77-4F78-B584-123D5C364D42}) in below exiting template in base template field as a base template.
  •          /sitecore/templates/System/Media/Unversioned/Image : {F1828A2C-7E5D-4BBD-98CA-320474871548}
  •          /sitecore/templates/System/Media/Unversioned/Jpeg : {DAF085E8-602E-43A6-8299-038FF171349F}

Steps to add the new template called WaterMarkImage
  •         Go to the template /sitecore/templates/System/Media/Unversioned/Image : {F1828A2C-7E5D-4BBD-98CA-320474871548}
  •         Go to the base template field and select one more template called WaterMarkImage (/sitecore/templates/Common/WatermarkModule/WaterMarkImage : {06B6240C-7E77-4F78-B584-123D5C364D42}
  •         Same as with /sitecore/templates/System/Media/Unversioned/Jpeg : {DAF085E8-602E-43A6-8299-038FF171349F} template



Publish the below Items with sub-item:

  •         /sitecore/templates/System/Media/Unversioned/Image : {F1828A2C-7E5D-4BBD-98CA-320474871548} 
  •          /sitecore/templates/System/Media/Unversioned/Jpeg : {DAF085E8-602E-43A6-8299-038FF171349F}
  •          /sitecore/templates/Common/WatermarkModule: {9842A1CB-549F-4FC7-BB33-64589DD02D3F}
  •          /sitecore/system/Modules/WaterMarkImage : {B50992CA-51AD-4002-92A5-464E132412AC}


Note: If your web database name is different from “web” then override in below item:

/sitecore/system/Modules/WaterMarkImage/WebDatabaseName: {7DACF478-EDBB-4504-9152-8F691E610821}

Important: if changes are not reflecting (bookmark image) you can try the below:
  •          Clear the media cache from server (/Website/App_Data/MediaCache)
  •          Clear the browser cache
  •          Check the color code in the template, sometime we are using black color in dark image, try to change the color code.
  •          Refresh the page using CTRL+f5