Loading...
Skip navigation
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 Extension

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.

Menu

Contact request

You can contact us at any time

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question
R6D_________6ZW______
__R____1____S_X___ZZ9
UC6___EZE___FXG______
T______8____N_7___T8N
8TL_________EAH______