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>
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>
Dokumentation
TYPO3 Image Watermark
Diese TYPO3-Erweiterung ermöglicht es, Bildern Wasserzeichen hinzuzufügen, indem dafür eine Fluid Viewhelper verwendet wird. Das Ergebnis ist ein neues Bild, das aus dem Original (Hintergrund) und dem Wasserzeichen erzeugt wird.