وضع علامة مائية على جميع الصور التي تم رفعها

ميزة
1

Dear all Discourse Developers,

I want to thanks all Discourse developers for their excellent work on making the best forum in the world. :smiling_face_with_three_hearts: Personally, I have used other programs, such as Discuz and Buddyboss (Wordpress) to build serval forums in past 10 years, none of them are as great as Discourse.

The only feature I missed in Discourse is the watermark feature. It will be perfect if Discourse support Watermark on all upload images. It doesn’t need to be extremely complicated, like some other user suggested in this forum. (I understand why developer ignore their request, because it is totally impractical.)

IMHO, A very simple watermark capability will be good enough. Add a icon/text on every uploaded images, just let others know the image is originated from my forum when someone share (or steal) your images to other website/platform.

Personally, I always add watermark by myself before upload to the forum, however many community members don’t want to do it by themselves, especially when they post image using smartphone, they hope to be automatically add by the forum.

I understand that Discourse original designed for more a text base forum, rather than forum with lots images, such as Photography forum. But thanks to many excellent Plugin / TC available, I can make a photo orientated forum with Discourse nicely.

I recommend add a watermark image upload box in
/admin/site_settings/category/branding

2020-12-30_035510
2020-12-30_035510612×179 6.07 KB

And add a selection button in
/admin/site_settings/category/files
2020-12-30_042258

And a pull down menu for watermark position, similar to,

2020-12-30_042407
2020-12-30_042407585×212 9.32 KB

Then, It will be good enough. No need other fancy features.
Other feature, like scaling, opacity, backup original image, etc. They are great but not necessary.

Lastly, I want to thanks all Discourse Developers for their continuous hardworking.
Thank you and Happy New year ~!:kissing_heart:

7 إعجابات
2

Thanks Jacky, Sounds like an interesting plugin for someone to experiment with. I do not think though that we will make this a core feature, but core can certainly help facilitate the plugin.

If you have budget I recommend posting in marketplace, my guess is that a minimal prototype plugin (with minimal configuration - only supply text) would take about 1 to 2 days to build.

Watermark by superimposing images may take a bit longer to get right.

12 إعجابًا
3

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.

2021-02-22_190424
2021-02-22_190424746×485 17.8 KB

2021-02-22_190436
2021-02-22_1904361189×548 22.6 KB

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.

2021-02-22_190904
2021-02-22_190904717×183 12.9 KB

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 إعجابات
4

This looks good. A theme component with all this, leaving only the installation of the Chevereto as a manual step, would be great.

4 إعجابات
5

I modified the Chevereto Plugin Javascript a little bit.

By changing
sibling: ".upload.btn", siblingPos:"before",
to
sibling:".code.btn",siblingPos:"after",

Now, the icon show in both Desktop and Smartphone. :partying_face:

إعجابَين (2)
6

أحبه! هل لديه إضافة لتحقيق نفس الهدف؟

7

سيكون أفضل لو كان هناك مكون لهذه العلامة المائية.

إعجابَين (2)
8

هل يمكن لأحد أن يخبرني في أي مجلد يتم حفظ الصور؟

إحدى الطرق التي أود بها وضع علامة مائية عليها بشكل جماعي هي عن طريق تشغيل أداة تحرير صور خارجية.

9

هل تمكن أي شخص من تحقيق ذلك باستخدام أحدث إصدار 3.2 من ديسكورس؟

10

هذا رائع جداً. قد تكون مهتماً أيضاً بهذا Theme component

إعجابَين (2)
11

لقد جربت ذلك في مكون سمة. إنه مجرد إثبات للمفهوم، لذا فهو أساسي. :smile:
لكل تحميل، يتم تطبيق علامة مائية تلقائيًا.

من الناحية الفنية، مثل كيفية معالجة Discourse للصور قبل التحميل (مثل الضغط)، تقوم هذه الأداة بنفس الشيء مع العلامات المائية. بفضل واجهة برمجة التطبيقات ومكتبة Uppy، يمكن تحقيق العلامات المائية بسهولة. :pray:

أخبرني إذا كانت لديك ميزات/تخصيصات في الاعتبار تعتبرها كحد أدنى. :slight_smile:

تحرير: سأنشر إصدارًا بمجرد تطبيق الإعدادات الأساسية.

14 إعجابًا
12

:heart: :heart: :heart:
عمل ملحمي! أخبرني إذا كنت بحاجة إلى أي مختبرين

إعجابَين (2)
13

مرحباً، هل هذا جاهز للإنتاج؟ أنا مهتم جداً

إعجاب واحد (1)
14

في أي موقف يكون طباعة العلامة المائية على جميع الصور مناسبًا وقانونيًا؟

إعجاب واحد (1)
15

هل هذا جاهز للإنتاج؟

16

عذرًا، لقد تأخرت قليلاً في هذا. :sweat_smile:
إذا كنت لا تزال مهتمًا، فقد أصدرت TC هنا: Watermark Image. نرحب بأي ملاحظات!

7 إعجابات