Loading...
Skip navigation

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="/typo3conf/ext/image_watermark/Resources/Public/Images/moon.jpg"
    overlaySrc="/typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo.png"
    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="/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" />

</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="/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" />

</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="/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" />

</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="/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" />

</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="/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" />

</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="watermarkImageUrl">{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: 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="watermarkImageUrl">{w:watermark(
    image: file,
    overlaySrc: 'typo3conf/ext/image_watermark/Resources/Public/Images/coding-ms-logo-big.jpg',
    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
IW4_________3DD______
F_M____6______H___ZLG
NY8___HUL_____2______
N_L____E______H___3LB
23M___________S______