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>

Example 1

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>

Example 2

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>

Example 3

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>

Example 4

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>

Example 5

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>

Example 6

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.

Product overview Show product

Name	Purpose	Lifetime	Type	Provider
CookieConsent	Saves your consent to using cookies.	1 year	HTML	Website
PayPal	This is a payment service.	session	HTTP	PayPal
fe_typo_user	Core functions of the website, e.g. B. Shopping cart	session	HTTP	Website
piwik_ignore	If you opt out of tracking using the cookie method or the iframe opt-out method, Matomo will set a piwik_ignore cookie on the domain of your Matomo server.	session	HTML	Matomo
MATOMO_SESSID	MATOMO_SESSID is a temporary, short-lived cookie that provides a nonce - basically a random number - to prevent CSRF security issues while users disable tracking.	session	HTML	Matomo
mtm_consent	We have asked for your consent to tracking via the Matomo software. This cookie was created for this purpose.	session	HTML	Matomo
mtm_consent_removed	We have asked for your consent to tracking via the Matomo software. This cookie was created for this purpose.	session	HTML	Matomo

Examples

default

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

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

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

two overlay images

Scaled Watermark

Image URL

Bootstrap package lightbox link

TYPO3 Image Watermark

Contact request

Stop! Playing in the meantime?

Google Analytics & Google Tag Manager

Microsoft Clarity

Examples

default

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

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

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

two overlay images

Scaled Watermark

Image URL

Bootstrap package lightbox link

TYPO3 Image Watermark

Contact request

Stop! Playing in the meantime?

🎄 Bereits für's Weihnachtsmarketing?! 🎉