Image Watermark

This TYPO3 extension enables you to add watermarks to images using a ViewHelper in fluid. The result is a new image combined from the original (background) image and the watermark image.

The ViewHelper works like the image ViewHelper (in fact it extends it), that means you have the same options, eg. scaling the image. You can use all the parameters known from the f:image ViewHelper (like src, width, ...).

There are two methods to create the watermark:

Positioned watermarks

Allows you to position the watermark on top of an image. Use png images to use transparent areas in the watermark.

Parameter	Description
overlaySrc	Path to the overlay/watermark image.
method	Can be left out since "position" is the default.
gravity	Alignment for the overlay image: Center, North, NorthWest, West, SouthWest, South, SouthEast, East, NorthEast (parameter is not case-sensitive)
compose	Compose method for the overlay image: Copy, Screen, Multiply, Difference, Exclusion, Plus, ModulusAdd, Minus, ModulusSubtra, Lighten, Darken, Divide, LinearDodge, LinearBurn, ColorBurn, ColorDodge, Overlay, SoftLight, PegtopLight, HardLight, PinLight, LinearLight, VividLight (see also http://www.imagemagick.org/Usage/compose/tables/, parameter is not case-sensitive)
geometry	Pixel shift for the overlay image, eg. +5+5.

Second image

You can add a second image using the same parameters with a "2" added.

Parameter	Description
overlaySrc2	See above...
gravity2	See above...
compose2	See above...
geometry2	See above...

Scaled watermarks

Scales the watermark to the size of the background image. For best results use jpg, it seems to produce weird results with png.

This method does not accept other parameters.

Parameters

Parameter	Description
method	Set to "scale".
overlaySrc	Path to the overlay/watermark image.
fetchUrl	If true, the ViewHelper returns the URL of the image only.

Examples

Fluid Code

You can find this example in Resources/Private/Templates/Example.html

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers"
      xmlns:w="http://typo3.org/ns/CodingMs/ImageWatermark/ViewHelpers"
      data-namespace-typo3-fluid="true">

<h1>Watermark Examples</h1>

<h2>Positioned Watermarks</h2>
<h3>default</h3>
<w:watermark
    src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
    overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
    width="600" />

<h3>compose: multiply, geometry:+20+20, gravity:NorthEast</h3>
<w:watermark
    src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
    overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
    gravity="NorthEast"
    compose="multiply"
    geometry="+20+20"
    width="600" />

<h3>compose: screen, geometry:+0+0, gravity:SouthEast</h3>
<w:watermark
    src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
    overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
    gravity="SouthEast"
    compose="screen"
    geometry="+0+0"
    width="600" />

<h3>compose: difference, geometry:+30+30, gravity:NorthWest</h3>
<w:watermark
    src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
    overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
    gravity="NorthWest"
    compose="difference"
    geometry="+30+30"
    width="600" />

<h3>two overlay images</h3>
<w:watermark
    src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
    overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
    gravity="SouthWest"
    compose="difference"
    geometry="+20+120"
    width="600"
    overlaySrc2="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
    gravity2="NorthEast"
    compose2="multiply"
    geometry2="+120+20" />

<h2>Scaled Watermark</h2>
<w:watermark
    src="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
    overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo-big.jpg"
    method="scale"
    width="600" />

<h2>Fetch url</h2>
<f:variable name="watermarkImageUrl">{w:watermark(
    src: 'fileadmin/fluid_form_upload/-form-6-complete-photoRequired.jpg',
    overlaySrc: 'typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo-big.jpg',
    method: 'scale',
    width: 1200,
    fetchUrl: 'true'
    )}</f:variable>
<pre>{watermarkImageUrl}</pre>

</html>