Watermark Image

Theme component
1
:information_source: Summary Automatically adds watermarks to user-uploaded images
:hammer_and_wrench: Repository GitHub - Arkshine/discourse-watermark-image
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Description

This theme component automatically adds watermarks to user-uploaded images. You can use either an image or a QR code as your watermark, with extensive customization options for position, appearance, and distribution patterns.

The component offers granular control through category and user group settings, allowing you to tailor the watermarking behavior to your community’s needs.

Please review the Important Notes section before implementation.

Comparison before and after watermark is applied
Comparison before and after watermark is applied1044×189 92.6 KB

Features

  • High-performance processing using WebAssembly and Web Workers
  • Comprehensive image format support (PNG, JPEG, BMP, ICO, TIFF, WEBP)
  • Dynamic QR code watermark generation
  • Flexible sizing options (relative or absolute)
  • Versatile positioning system
  • Advanced appearance customization (opacity, rotation, scale, margin, etc.)
  • Multiple blending modes
  • Pattern distribution options (single, grid, diagonal, random)
  • Category and user group-specific settings
  • Live preview in settings panel

Example watermark 1
Example watermark 1270×180 16.9 KB
Example watermark 2
Example watermark 2270×180 23.8 KB
Example watermark 3
Example watermark 3270×180 20.5 KB
Example watermark 4
Example watermark 4270×181 15.9 KB

Settings

Setting Description
image The image to use as watermark.
Supported formats: PNG, JPEG, BMP, ICO, TIFF, WEBP.
Default: ""
size_mode How the watermark size is calculated:
- relative: Size is relative to the target’s image width.
- absolute: Applied at its original size.
Default: "relative"
relative_width The width of the watermark relative to the target image width (in %).
Only applies when the watermark size mode is set to relative.
Range: 1-100
Default: 10
absolute_scale Scale factor for original watermark size (only used in absolute mode). Min: 0.01
Default: 1
max_size Maximum size as percentage of image dimensions. Range: 1-100
Default: 50
position Position of the watermark: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right
Default: "bottom-right"
margin_x Horizontal margin from the edge (in % of the target image)
Default: 0
margin_y Vertical margin from the edge (in % of the target image)
Default: 0
opacity Watermark opacity. Range: 1-100
Default: 100
rotate Rotation angle.
Range: -360 to 360 degrees
Default: 0
blend_mode How the watermark blends with the image: normal, overlay, over, atop, xor, plus, multiply, burn, difference, soft_light, screen, hard_light, dodge, exclusion, lighten, darken.
Default: "normal"
pattern Watermark repetition pattern: single, grid, diagonal, random
Default: "single"
pattern_allow_partial Allow partial watermarks at image edges
Default: true
pattern_max_count Maximum number of watermark repetitions (0 for infinite)
Default: 50
pattern_spacing Spacing between repeated watermarks (in % of the target image)
Default: 15
qrcode_enabled Enable QR code watermark
Default: false
qrcode_text Text to encode in QR code. Supports placeholders: {homepage}, {username}, {topic_url}
Default: ""
qrcode_color QR code color (hex or CSS variable)
Default: "var(--primary)"
qrcode_background_color QR code background color (hex or CSS variable)
Default: "var(--secondary)"
qrcode_quiet_zone Width of white space border around QR code (0-10 modules)
Default: 2
qrcode_error_correction Error correction level: Low (~7%), Medium (~15%), Quarter (~25%), High (~30%)
More information about error correction levels can be found here.
Default: "Medium"
categories Categories where watermark should be applied.
Default: ""
groups Groups the watermark should be applied to.
Default: "0"
skip_small_images Skip watermarking if image is below min_image_dimensions.
Default: false
min_image_dimensions Minimum dimensions required (width x height)
Default: "200x200"
allow_non_supported_uploads Allow image uploads to continue even when format is not supported
Default: false

Watermark Types

Image

The component supports multiple image formats: PNG, JPEG, BMP, ICO, TIFF, and WEBP.
See the FAQ section for important information about format support limitations.

QR Code

Generate dynamic QR codes with customizable content using these variables:

  • {homepage} - The URL of the homepage
  • {username} - The username of the user
  • {topic_url} - The URL of the topic

Important: When styling QR code watermarks, consider contrast and sizing. Poor contrast ratios or excessive styling can make QR codes unreadable. Always test your QR code watermarks with scanning apps.

Real-Time Preview

The settings panel includes a real-time preview feature, allowing you to see how your watermark configuration affects a sample image instantly.
The preview window offers several interactive features:

  • Resizable and movable preview window
  • Option to load a random sample image
  • Support for uploading your own test images from your device

On the desktop, it opens automatically. You can also open from the button at the bottom of the page:

image
image546×101 2.91 KB

More images

A settings page for adding a watermark and QR code to a website, showing a preview of the watermark and options to enable the QR code with different text and color settings. (Captioned by AI)
A settings page for adding a watermark and QR code to a website, showing a preview of the watermark and options to enable the QR code with different text and color settings. (Captioned by AI)980×579 87.3 KB

The image shows a silhouette of two hands forming a heart shape with the sun setting in the background. (Captioned by AI)
The image shows a silhouette of two hands forming a heart shape with the sun setting in the background. (Captioned by AI)613×423 45 KB

The image shows a preview of a foggy forest scenery on a Discourse platform. (Captioned by AI)
The image shows a preview of a foggy forest scenery on a Discourse platform. (Captioned by AI)453×303 65.3 KB

:warning: Important Notes

  • Original Images Are Not Preserved
    Watermarks are applied before server upload, and original images are not retained. Thoroughly test your watermark settings before deploying to production.

  • If testing in the admin panel, be careful not to validate your settings immediately. I would recommend creating a group or a category to be safe.

FAQ

Why are image formats limited?

While Discourse converts all uploads to JPEG, this TC watermarking occurs pre-upload on the original format, using specific image processing libraries. While post-upload watermarking is possible, it would require multiple upload/download cycles and affect the composer experience. I’m still exploring improvements to this workflow.

Why isn’t text watermarking supported?

Text watermarking would require extensive configuration options (font selection, styling, etc.) that would be difficult to implement effectively without a dedicated interface. Image watermarks provide more flexibility and can be created using existing design tools.

Roadmap

Future development plans may include:

  • Multiple watermark profiles [1]
  • Original image preservation [2]
  • Post-upload watermarking

Credits

This theme component is powered by:

  1. The upload input is partially supported with the Object settings type – it can’t be done in a TC at the moment. ↩︎

  2. May require plugin development. ↩︎

20 Likes
2

This is the first version, and I expect missing features. I’m looking forward to any feedback! :+1:

6 Likes
3

Thanks for the component. Does this component process images? Does this component compress images to size better than the original.

5 Likes
4

The component doesn’t perform any modifications or compression apart from applying the watermark.

Discourse already preprocesses the image first (using squoosh library) → the watermark is applied → The image is uploaded to the server. That would be how it works.

6 Likes
5

The image shows a computer interface with three tabs displaying different pages, with a logo in the bottom right and a drop-down menu visible. (Captioned by AI)
The image shows a computer interface with three tabs displaying different pages, with a logo in the bottom right and a drop-down menu visible. (Captioned by AI)3032×1668 223 KB

The first time you open a post and edit it, you can’t put a watermark on it, you need to post it and then click edit post and upload a picture to put a watermark on it.
The theme used is FKB Pro - Social theme - #375 by MihirR

2 Likes
6

You mean that if you open/edit an existing post for the first time and upload an image, there is no watermark. Is this correct? Can you reproduce it every time? Do you see any error in the browser’s console?

If I understand correctly, you expect an existing uploaded image (before this TC installation) to have a watermark when you edit the post (or have a way to watermark the image manually) . It doesn’t work this way. You need to upload the image to apply a watermark.

Having a button to watermark a selected image manually could be a feature. Would that work with you?

7

It’s the images uploaded after creating a new post that don’t have a watermark It’s the images uploaded after going into the post after posting and clicking edit that have the watermark.

For the posting button I use Compose Center - #13

8

Can you make a quick video, please? That would be useful to see and understand what’s happening.

1 Like
9

3 Likes
10

Thanks for your patience! I’ve found the issue. It should be fixed now! :+1:

1 Like