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>