Генерация заголовков при загрузке

При загрузке изображения Wagtail берёт имя файла, удаляет расширение файла и заполняет поле заголовка. Этот раздел посвящён тому, как настроить преобразование имени файла в заголовок.

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

Вы также можете настроить такое же поведение для документов здесь.

Вы можете настроить разрешённое значение этого заголовка, используя JavaScript обработчик событий, который будет слушать событие 'wagtail:images-upload'.

Самый простой способ добавить JavaScript в редактор — через insert_global_admin_js крючок, но любой JavaScript, добавляющий обработчик событий, будет работать.

Событие DOM

Имя события, на которое нужно слушать, — 'wagtail:images-upload'. Оно будет отправлено при загрузке изображения form. Атрибут detail события будет содержать:

data — объект, который включает title для использования. Это имя файла без расширения.
maxTitleLength — целое число (или null) — максимальная длина поля заголовка модели Image.
filename — исходное имя файла без удалённого расширения.

Чтобы изменить сгенерированный Image заголовок, обратитесь к event.detail.data.title и обновите его; возвращаемое значение не требуется.

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

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

Событие будет «подниматься» вверх, так что вы можете просто добавить глобальный document обработчик, чтобы захватить все эти события, или вы можете ограничить свою логику обработчика событий, чтобы убедиться, что вы изменяете заголовки только в некоторых определённых сценариях.

См. MDN для получения дополнительной информации о настраиваемых событиях JavaScript.

Примеры кода

Удаление любых небезопасных для URL символов из заголовка

# wagtail_hooks.py
from django.utils.safestring import mark_safe

from wagtail import hooks


@hooks.register("insert_global_admin_js")
def get_global_admin_js():
    return mark_safe(
    """
    <script>
    window.addEventListener('DOMContentLoaded', function () {
        document.addEventListener('wagtail:images-upload', function(event) {
            var newTitle = (event.detail.data.title || '').replace(/[^a-zA-Z0-9\s-]/g, "");
            event.detail.data.title = newTitle;
        });
    });
    </script>
    """
    )

Изменение сгенерированных заголовков только в редакторе страницы, чтобы удалить тире/подчеркивания

Используйте insert_editor_js крючок вместо этого, чтобы этот скрипт не запускался на странице загрузки Image, только в редакторах страниц.

# wagtail_hooks.py
from django.utils.safestring import mark_safe

from wagtail import hooks


@hooks.register("insert_editor_js")
def get_global_admin_js():
    return mark_safe(
    """
    <script>
    window.addEventListener('DOMContentLoaded', function () {
        document.addEventListener('wagtail:images-upload', function(event) {
            // replace dashes/underscores with a space
            var newTitle = (event.detail.data.title || '').replace(/(\s|_|-)/g, " ");
            event.detail.data.title = newTitle;
        });
    });
    </script>
    """
    )

Остановка предварительного заполнения заголовка на основе имени файла

# wagtail_hooks.py
from django.utils.safestring import mark_safe

from wagtail import hooks


@hooks.register("insert_global_admin_js")
def get_global_admin_js():
    return mark_safe(
    """
    <script>
    window.addEventListener('DOMContentLoaded', function () {
        document.addEventListener('wagtail:images-upload', function(event) {
            // will stop title pre-fill on single file uploads
            // will set the multiple upload title to the filename (with extension)
            event.preventDefault();
        });
    });
    </script>
    """
    )

© 2014-present Torchbox Ltd and individual contributors.
All rights are reserved.
Licensed under the BSD License.
https://docs.wagtail.org/en/stable/advanced_topics/images/title_generation_on_upload.html