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.

ParameterDescription
overlaySrcPath to the overlay/watermark image.
methodCan be left out since "position" is the default.
gravityAlignment for the overlay image: Center, North, NorthWest, West, SouthWest, South, SouthEast, East, NorthEast (parameter is not case-sensitive)
composeCompose 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)
geometryPixel shift for the overlay image, eg. +5+5.

Second image

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

ParameterDescription
overlaySrc2See above...
gravity2See above...
compose2See above...
geometry2See 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

ParameterDescription
methodSet to "scale".
overlaySrcPath to the overlay/watermark image.
fetchUrlIf 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>

Result

default

Example 1

compose: multiply, geometry:+20+20, gravity:NorthEast

Example 2

compose: screen, geometry:+0+0, gravity:SouthEast

Example 3

compose: difference, geometry:+30+30, gravity:NorthWest

Example 4

two overlay images

Example 5

Scaled Watermark

Example 6