How to automatically watermark images in Webflow
Memberscripts needed
Tutorial
Cloneable
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.
Making it work
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.).
Conclusion
That’s everything, you can now go ahead and test images on your live site.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
Our demo can help you automatically watermark images on your site.
Take me to Cloneable!
Written by
Ovidiu
Contributor