Discourse Web Page Watermark

This theme component adds a watermark to the page.

It is possible to add any of the following information:

  • a short text message
  • the username currently logged in
  • the timestamp the page was rendered

Several settings allow customizing how and when the watermark will be rendered:

  • show_watermark_in_background: If enabled will generate and display a watermark on the page.

  • scroll_enabled: If enabled the watermark will be scrolled with the page.

  • only_in_categories: List of categories in which the watermark should be displayed.

  • except_in_categories: List of categories in which the watermark should not be displayed.

  • only_in_tags: List of tags in which the watermark should be displayed.

  • except_in_tags: List of tags in which the watermark should not be displayed.

  • if_site_title_matches: Display watermark only if site title matches this regular expression. See Discourse Web Page Watermark - #5 by pfaffman for an use case.

  • or_if_url_matches: OR display the watermark if URL matches any of the regular expressions in the list. Note that the URL tested does not include the host name.

  • tile_width: The width (in px) of the tile that contains the watermark information.

  • tile_height: The height (in px) of the tile that contains the watermark information.

  • color: The color of the watermark text.

  • text_align: How the text should be aligned relative to x,y coordinates when drawn.

  • text_rotation: The angle in which the text should be rotated relative to x,y coordinates when drawn.

  • display_text: Text to be rendered in the watermark.

  • display_text_font: The font used to render the text (parsed as CSS font value).

  • display_text_x: The x-axis coordinate of the point at which to begin drawing the text in the tile canvas, in pixels.

  • display_text_y: The y-axis coordinate of the point at which to begin drawing the text in the tile canvas, in pixels.

  • display_username: If enabled the watermark will render the current username.

  • display_username_font: The font used to render the username (parsed as CSS font value).

  • display_username_x: The x-axis coordinate of the point at which to begin drawing the username in the tile canvas, in pixels.

  • display_username_y: The y-axis coordinate of the point at which to begin drawing the username in the tile canvas, in pixels.

  • display_timestamp: If enabled the watermark will render the timestamp the page was rendered.

  • display_timestamp_format: How the timestamp will be formatted. For information about the valid formats, please refer to Moment.js | Docs.

  • display_timestamp_font: The font used to render the timestamp (parsed as CSS font value).

  • display_timestamp_x: The x-axis coordinate of the point at which to begin drawing the timestamp in the tile canvas, in pixels.

  • display_timestamp_y: The y-axis coordinate of the point at which to begin drawing the timestamp in the tile canvas, in pixels.

Caveats

  • If you intend to add a watermark to your forum instance you probably want to tag screenshots taken from it. Be it so that they can be traced back to you or to discourage your users to take screenshots and post on social media for example.
    But it is important to be aware that adding the watermark will hurt readability. There is a trade-off to be made between UX and having it.

  • The watermark is rendered in a div below the page. Depending on your theme the components above may cover it, so if you choose to add it to your page your theme must have a lot of transparency. It is possible though to place it over all the components changing z-index with CSS. You should also adjust mix-blend-mode to improve visibility.

div#watermark-background {
  z-index: 99999;
  mix-blend-mode: multiply;
}
  • This component comes with sensible defaults that should work well with most light themes. Adding a watermark to dark themes is tricky though since it will probably have more impact on readability. I strongly encourage you to tweak the settings and CSS to find what works best in your case.

  • Since the watermark is rendered in a div any user that knows how to use the Developer Tools in the browser can hide it. It will do the intended job for probably 99% of the non-technical users but is important to be aware that it is not a foolproof solution.

Screenshots

desktop view:

mobile view:

edit:

  • 2022-01-12: Added new settings to control when the watermark is displayed.
7 Likes

Can it be category based? Some of us might have a certain category only that needs a watermark.

3 Likes

Oh, I see, I got this mixed up with watermarks for images. I’ll edit the title so it is more clear. Kind of an unusual use case… I’m not aware of any websites that watermark every web page.

2 Likes

Nice idea, I’ll do my best to develop this functionality soon.

@codinghorror, thank you for clarifying the title.

I agree that it is an unusual use case. As it is right now I think it is useful mostly for private forums in enterprises with a paranoiac security department, like companies in the financial sector.

It was a first MVP. I’ll add functionality from the feedback received from the community.

Hopefully, I’ll be able to add soon the category based filter that Mr. X suggested and that will make it more useful to a broader audience.

1 Like

I just submitted a PR: skip display if title matches by pfaffman · Pull Request #1 · megothss/discourse-watermark · GitHub

This adds a theme setting include_if_title_matches, which is empty by default. If the setting is empty, then nothing is changed.

If the setting has a value, SiteSetting.title must match in order for the watermark to display.

Use case is to have the watermark display on a staging site, but not production without requiring changes to the database. Setting include_if_title_matches to “staging” and having “staging” in SiteSetting.title of the staging site (set in an ENV variable so it persists when the production database is restored to it), the watermark displays on staging site but not on production.

With this change, I’ll install this on every site that has a staging site.

1 Like

I’ve merged it today. Tweaked it slightly. The setting name was renamed to if_site_title_matches.

Can you try and check if the latest commit works in your older instances?

I’ve just released a new version that allows the watermark to be displayed in specific categories, tags, or URLs.

With the new options, I think it will cover much more use cases.

4 Likes

I can confirm that it works on both my production and staging sites; the former was working with Discourse.siteSettings.xxx when I was working on this (I’m about to do an upgrade that I think might change that).

It’s a big help to see my staging site with the watermark on it. Thanks for the theme!

3 Likes