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
BA3_________8EP______
__9____I______W___MHB
__W___2N9_____W______
__N____9______H___CS4
__U___________O______