Hi, my client wants to have a watermark over CMS images, his old website could add it automatically. So instead of that, I placed a PNG over the gallery thumbnails. But is there a way to replicate this in an open lightbox? Something like an overlay taking 60 % of the width of the original image.
I know this is a workaround but combined with disabling right-click on the page it’s all I can think of.
Or is there a way to add a proper watermark to the original images? I have found a script that can fetch the CMS image URL and another one for combining two images, could this work on Webflow or would the CDN prevent manipulating the original image?
Hi, unfortunately I didn’t find any usable solution, I just referred the client to Photoshop actions for bulk export.
For a while I flirted with the idea of manipulating photos outside of Webflow using Pipedream (a more complex alternative to Zapier with node.js support) and watermark.js, but even if it could be done, it’s way out of my league
If you can think of a better solution, please let me know!
This is also a technical solution, but if you want to keep the images in Webflow assets & CMS, I’d use use a reverse proxy instead to add them. Cloudflare has this capability as part of its image optimization features.
The big advantage is that in Webflow, nothing changes at all. You store your images, upload them, etc. and the RP handles the watermarking transparently between the user and your site.
The challenging bit would be selective watermarking. Like, you probably don’t want your corporate logo watermarked. The simplest way would probably be to watermark only JPEG, WEBP and PNG images that exceed certain minimum dimensions, and then convert them to WEBP and cache them for performance.
