Bitte beachte, dass sich diese Dokumentation auf die neuste Version dieser Erweiterung bezieht. Wenn eine ältere Version eingesetzt wird, kann diese abweichen. Die jeweils passende Dokumentation befindet sich im Dokumentation-Verzeichnis der Erweiterung.

Beispiele

Diese Beispiele findest Du 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>

Name	Zweck	Ablauf	Typ	Anbieter
CookieConsent	Speichert Ihre Einwilligung zur Verwendung von Cookies.	1 Jahr	HTML	Website
PayPal	Dies ist ein Zahlungsservice.	Session	HTTP	PayPal
fe_typo_user	Kernfunktionen der Webseite, z. B. Warenkorb	Session	HTTP	Website
piwik_ignore	Wenn Sie sich mit der Cookie-Methode oder der Iframe-Opt-out-Methode vom Tracking ausschließen, wird Matomo ein Cookie piwik_ignore auf der Domain Ihres Matomo-Servers setzen.	Session	HTML	Matomo
MATOMO_SESSID	MATOMO_SESSID ist ein temporäres, kurzlebiges Cookie, das ein Nonce - im Grunde eine Zufallszahl - bereitstellt, um CSRF-Sicherheitsprobleme zu verhindern, während die Nutzer das Tracking deaktivieren.	Session	HTML	Matomo
mtm_consent	Wir haben Sie um Ihre Zustimmunmg zum Tracken über die Software Matomo gebeten. Hierzu wurde dieses Cookie erstellt.	Session	HTML	Matomo
mtm_consent_removed	Wir haben Sie um Ihre Zustimmunmg zum Tracken über die Software Matomo gebeten. Hierzu wurde dieses Cookie erstellt.	Session	HTML	Matomo

Beispiele

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

Kontaktanfrage

Stop! Playing in the meantime?

Google Analytics & Google Tag Manager

Microsoft Clarity