Watermark on all upload images

After some experiment, I find a temp “solution” for the watermark. :partying_face:

Just in case, some others may interest. I want to share my workaround. Hope it may help. :smiling_face_with_three_hearts:

1, First, I install Chevereto (free) to another sub domain.
(it is very easy, just upload the installer.php file to server, load the page & follow the setup. It complete in mins) :kissing_heart:

2, The free version also support watermark, you can setup it in dashboard image upload setting.

You can also set Max. image width & height in dashboard, so all large image uploaded will automatically resize.

3, Add the Chevereto Plugin (script) to Discourse <head> tag
<script async src="https://img.example.com/sdk/pup.js" data-url="https://img.example.com/upload"></script>

4, Discourse seem don’t support i tag fa-icon anymore, so I have to modify the java script from
<i class="fa fa-cloud-upload d-icon d-icon-upload"></i>
to
<svg class="fa d-icon d-icon-cloud-upload-alt svg-icon svg-node" aria-hidden="true"><use xlink:href="#cloud-upload-alt"></use></svg>’

5, If everything setup right, it will show cloud upload icon in discourse editor.

6, Just click on the new icon, Drag & drop image to popup window and it automatically upload & paste the code to editor with watermark. :partying_face:

7, Now it work perfectly in desktop. But I am still figuring how to add the icon to smart phone. :thinking: I will update this post if I find a way to do it.

It is just a temp solution, workaround, not perfect at all but can do it easily within mins. I am still hoping Discourse can add watermark in core or by plugin / TC in future.

9 Likes