How to automatically watermark images in Webflow

Ledenafschriften nodig

1. https://www.memberstack.com/scripts/auto-watermark

Les

Kloonbaar 

Why/Use Cases

- Prevent users from downloading and using images that they’d normally have to pay for.

Automatically adding watermarks on images on a Webflow site

If you’ve got images on your site that you don’t want your visitors to freely download and use, adding watermarks might be a good solution.

This guide will help you automatically add watermarks to images on your site by manipulating the actual files instead of just applying an overlay.

This is achieved using client-side JavaScript, which means that a more tech-savvy user could look at your source code and find the original, non-watermarked images. As such, keep in mind that this is just a quick and simple solution that will be effective against most people, but not all.

To automatically add watermarks to the images on your Webflow site, we’re going to use MemberScript #133 – Auto Watermark Images. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

All you need to do on the actual site is add this attribute to every image you want watermarked:

· ms-code-watermark=”VALUE”

For the value, simply input what you want the watermark to say.

Het laten werken

Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #133 custom code to your page, before the closing body tag.

If you want to edit the style of the watermark, there are helpful comments inside the code that will help you edit the values for whatever you want to change (e.g. font size, transparency, placement, rotation, etc.).

Conclusie

That’s everything, you can now go ahead and test images on your live site.

Als u ons demoproject wilt gebruiken om u op weg te helpen, klikt u op de knop hieronder om het aan uw Webflow site toe te voegen.

Our demo can help you automatically watermark images on your site.

Take me to Cloneable!‍