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

При загрузке изображения 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 обработчик для захвата всех этих событий, или вы можете ограничить область действия своего обработчика или логики, как вам нужно, чтобы убедиться, что вы изменяете только заголовки в определенных сценариях.

Дополнительную информацию о пользовательских событиях JavaScript см. на сайте MDN: https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events.

Примеры кода

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

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

from wagtail.core 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.core 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.core 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>
    """
    )