Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.
Examples
You can find this example in Resources/Private/Templates/Example.html
default
<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="{f:uri.resource(path: 'Images/moon.jpg', extensionName: 'ImageWatermark')}"
overlaySrc="{f:uri.resource(path: 'Images/coding-ms-logo.png', extensionName: 'ImageWatermark')}"
width="600" />
</html>
compose: multiply, geometry:+20+20, gravity:NorthEast
<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">
<w:watermark
src="{f:uri.resource(path: 'Images/moon.jpg', extensionName: 'ImageWatermark')}"
overlaySrc="{f:uri.resource(path: 'Images/coding-ms-logo.png', extensionName: 'ImageWatermark')}"
gravity="NorthEast"
compose="multiply"
geometry="+20+20"
width="600" />
</html>
compose: screen, geometry:+0+0, gravity:SouthEast
<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">
<w:watermark
src="{f:uri.resource(path: 'Images/moon.jpg', extensionName: 'ImageWatermark')}"
overlaySrc="{f:uri.resource(path: 'Images/coding-ms-logo.png', extensionName: 'ImageWatermark')}"
gravity="SouthEast"
compose="screen"
geometry="+0+0"
width="600" />
</html>
compose: difference, geometry:+30+30, gravity:NorthWest
<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">
<w:watermark
src="{f:uri.resource(path: 'Images/moon.jpg', extensionName: 'ImageWatermark')}"
overlaySrc="{f:uri.resource(path: 'Images/coding-ms-logo.png', extensionName: 'ImageWatermark')}"
gravity="NorthWest"
compose="difference"
geometry="+30+30"
width="600" />
</html>
two overlay images
<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">
<w:watermark
src="{f:uri.resource(path: 'Images/moon.jpg', extensionName: 'ImageWatermark')}"
overlaySrc="{f:uri.resource(path: 'Images/coding-ms-logo.png', extensionName: 'ImageWatermark')}"
gravity="SouthWest"
compose="difference"
geometry="+20+120"
width="600"
overlaySrc2="{f:uri.resource(path: 'Images/coding-ms-logo.png', extensionName: 'ImageWatermark')}"
gravity2="NorthEast"
compose2="multiply"
geometry2="+120+20" />
</html>
Scaled Watermark
<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">
<w:watermark
src="{f:uri.resource(path: 'Images/moon.jpg', extensionName: 'ImageWatermark')}"
overlaySrc="{f:uri.resource(path: 'Images/coding-ms-logo-big.jpg', extensionName: 'ImageWatermark')}"
method="scale"
width="600" />
</html>
Image URL
<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">
<f:variable name="src" value="{f:uri.resource(path: 'Images/moon.jpg', extensionName: 'ImageWatermark')}"/>
<f:variable name="overlaySrcScale" value="{f:uri.resource(path: 'Images/coding-ms-logo-big.jpg', extensionName: 'ImageWatermark')}"/>
<f:variable name="watermarkImageUrl">{w:watermark(
src: src,
overlaySrc: overlaySrcScale,
method: 'scale',
width: 1200,
fetchUrl: 'true'
)}</f:variable>
<pre>{watermarkImageUrl}</pre>
</html>Bootstrap package lightbox link
<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">
<!-- Given by Bootstrap-Package -->
<bk2k:link.lightbox
image="{file}"
maxHeight="{settings.lightbox.image.maxHeight}"
maxWidth="{settings.lightbox.image.maxWidth}"
class="{settings.lightbox.cssClass}"
rel="{settings.lightbox.prefix}-{data.uid}"
title="{file.properties.title}"
caption="{file.properties.description}"
>
<f:render partial="Media/Rendering/Image" arguments="{file: file, data: data, settings: settings, variants: variants}" />
</bk2k:link.lightbox>
<!-- Rendering result -->
<a
class="lightbox"
rel="lightbox-group-285"
href="/fileadmin/_processed_/c/8/csm_almhuette_1500_750_36abca17cf.jpg"
data-lightbox-width="1200"
data-lightbox-height="600"
data-lightbox-caption=""
>
<picture> … </picture>
</a>
<!-- Usage with Image-Watermark -->
<f:variable name="overlaySrc" value="{f:uri.resource(path: 'Images/coding-ms-logo-big.jpg', extensionName: 'ImageWatermark')}"/>
<f:variable name="watermarkImageUrl">{w:watermark(
image: file,
overlaySrc: overlaySrc,
width: 1200,
fetchUrl: 'true'
)}</f:variable>
<a
class="{settings.lightbox.cssClass}"
rel="{settings.lightbox.prefix}-{data.uid}"
href="{watermarkImageUrl}"
data-lightbox-width="{settings.lightbox.image.maxWidth}"
data-lightbox-height="{settings.lightbox.image.maxHeight}"
data-lightbox-caption="{file.properties.description}"
title="{file.properties.title}"
>
<f:render partial="Media/Rendering/Image" arguments="{file: file, data: data, settings: settings, variants: variants}" />
</a>
</html>
Documentation
TYPO3 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.