Loading...
Navigation überspringen
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>
Dokumentation
TYPO3 Image-Watermark Erweiterung

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.

Menü

Kontaktanfrage

Du kannst uns jederzeit kontaktieren

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
KDA_________PYS______
__4____N____W_1___3ZJ
MUJ___X1U___87U______
B______J____O_N___9G4
P7Q_________5YO______