Водяной знак на всех загружаемых изображениях

Внести вклад Функция
1

Уважаемые разработчики Discourse,

Хочу поблагодарить всех разработчиков Discourse за отличную работу, благодаря которой Discourse стал лучшим форумом в мире. :smiling_face_with_three_hearts: Лично я за последние 10 лет использовал другие программы, такие как Discuz и Buddyboss (WordPress), для создания нескольких форумов, и ни один из них не сравнится с Discourse.

Единственная функция, которой мне не хватает в Discourse, — это водяные знаки. Было бы идеально, если бы Discourse поддерживал водяные знаки на всех загружаемых изображениях. Это не должно быть чрезмерно сложным, как некоторые пользователи предлагали на этом форуме. (Я понимаю, почему разработчики игнорируют такие запросы, потому что это совершенно нереалистично.)

По моему мнению, очень простая функция водяных знаков будет вполне достаточной. Добавляйте иконку или текст на каждое загруженное изображение, чтобы другие знали, что изображение происходит с моего форума, когда кто-то делится (или крадёт) ваши изображения на других сайтах или платформах.

Лично я всегда добавляю водяные знаки самостоятельно перед загрузкой на форум, однако многие участники сообщества не хотят делать это сами, особенно когда публикуют изображения со смартфона. Они надеются, что форум сделает это автоматически.

Я понимаю, что Discourse изначально разрабатывался как форум, ориентированный на текст, а не как форум с большим количеством изображений, например, фотоблог. Но благодаря множеству отличных плагинов и тем, я могу создать форум, ориентированный на фотографии, с помощью Discourse.

Я рекомендую добавить поле для загрузки изображения с водяным знаком в
/admin/site_settings/category/branding

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

И добавить кнопку выбора в
/admin/site_settings/category/files
2020-12-30_042258

А также выпадающее меню для выбора положения водяного знака, аналогичное этому:

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

Этого будет достаточно. Другие функции не нужны.
Такие функции, как масштабирование, прозрачность, резервное копирование оригинального изображения и т. д., — это отлично, но они не обязательны.

В заключение хочу ещё раз поблагодарить всех разработчиков Discourse за их постоянный труд.
Спасибо и с Новым годом ~!:kissing_heart:

7 лайков
2

Спасибо, Джекки. Звучит как интересный плагин для экспериментов. Однако я не думаю, что мы сделаем это основной функцией, но ядро, безусловно, может помочь в разработке плагина.

Если у вас есть бюджет, рекомендую разместить сообщение в Marketplace. По моим оценкам, создание минимального прототипа плагина (с минимальной конфигурацией — только ввод текста) займет около 1–2 дней.

Наложение водяных знаков через изображения может потребовать немного больше времени для качественной реализации.

12 лайков
3

После нескольких экспериментов я нашёл временное «решение» для водяного знака. :partying_face:

На всякий случай, возможно, это заинтересует и других. Хочу поделиться своим обходным путём. Надеюсь, это поможет. :smiling_face_with_three_hearts:

  1. Сначала я установил Chevereto (бесплатную версию) на другой поддомен.
    (Это очень просто: достаточно загрузить файл installer.php на сервер, открыть страницу и следовать инструкциям по настройке. Всё занимает несколько минут.) :kissing_heart:

  2. Бесплатная версия также поддерживает водяные знаки; их можно настроить в разделе «Настройки загрузки изображений» в панели управления.

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

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

Также в панели управления можно задать максимальную ширину и высоту изображений, чтобы все загружаемые большие изображения автоматически изменяли размер.

  1. Добавьте плагин Chevereto (скрипт) в тег <head> Discourse:
    <script async src="https://img.example.com/sdk/pup.js" data-url="https://img.example.com/upload"></script>

  2. Похоже, Discourse больше не поддерживает тег i для иконок Font Awesome, поэтому мне пришлось изменить JavaScript:
    было:
    <i class="fa fa-cloud-upload d-icon d-icon-upload"></i>
    стало:
    <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>

  3. Если всё настроено правильно, в редакторе Discourse появится иконка облака для загрузки.

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

  4. Просто нажмите на новую иконку, перетащите изображение в всплывающее окно, и оно автоматически загрузится, а код вставится в редактор вместе с водяным знаком. :partying_face:

  5. Теперь это отлично работает на настольных компьютерах. Но я всё ещё пытаюсь понять, как добавить иконку на смартфоны. :thinking: Если найду способ, обновлю этот пост.

Это лишь временное решение, обходной путь, далеко не идеальное, но позволяет быстро всё настроить за несколько минут. Я всё ещё надеюсь, что в будущем Discourse добавит поддержку водяных знаков в ядро или через плагин / TC.

9 лайков
4

Выглядит отлично. Тема с компонентом, включающим всё это, где останется только ручная установка Chevereto, была бы замечательной.

4 лайка
5

Я немного изменил JavaScript плагина Chevereto.

Заменив
sibling: ".upload.btn", siblingPos:"before",
на
sibling:".code.btn",siblingPos:"after",

Теперь иконка отображается и на компьютере, и на смартфоне. :partying_face:

2 лайка
6

Отлично! Есть ли для этого плагин?

7

Было бы лучше, если бы для этого водяного знака существовал отдельный компонент.

2 лайка
8

Может кто-нибудь подсказать, в какой папке сохраняются изображения?

Один из способов, которым я хотел бы пакетно наложить на них водяные знаки, — это запуск внешнего инструмента для редактирования изображений.

9

Кто-нибудь смог этого добиться с последней версией Discourse 3.2?

10

Это довольно круто. Возможно, вас также заинтересует этот #theme-component

2 лайка
11

Я попробовал реализовать это в компоненте темы. Это пока только доказательство концепции, поэтому решение базовое. :smile:
Для каждой загрузки автоматически применяется водяной знак.

С технической точки зрения, как Discourse предварительно обрабатывает изображения перед загрузкой (например, сжимает их), этот инструмент делает то же самое с водяными знаками. Благодаря API и библиотеке Uppy добавление водяных знаков становится вполне реализуемым. :pray:

Дайте знать, если у вас есть идеи по функционалу или настройкам, которые вы считаете минимально необходимыми. :slight_smile:

EDIT: опубликую версию, как только реализую базовые настройки.

14 лайков
12

:heart: :heart: :heart:
Эпичная работа! Дайте знать, если нужны тестировщики.

2 лайка
13

Эй, это уже готово для продакшена? Мне очень интересно.

1 лайк
14

В какой ситуации уместно и законно размещать водяной знак на всех изображениях?

1 лайк
15

Готово ли это к продакшену?

16

Извините, я немного опоздал. :sweat_smile:
Если вы всё ещё заинтересованы, я опубликовал тему здесь: Watermark Image. Любые отзывы приветствуются!

7 лайков