Шаг 1. Откройте страницу
Перейдите в раздел «Страницы», найдите нужный материал и откройте его для редактирования.
Как загрузить изображение в Wagtail
Изображение на странице Wagtail можно добавить двумя основными способами:
- через стандартное поле или контентный блок Wagtail;
- непосредственно внутрь текста через редактор Quill.
При стандартной загрузке файл сохраняется в библиотеке изображений Wagtail. Его можно найти, выбрать повторно и использовать на других страницах.
В текущей реализации сайта изображения из Quill загружаются напрямую, без стандартного менеджера Wagtail. Поэтому они не появляются в общей библиотеке изображений.
4 мин чтения872 словБаза знаний Wagtail
Для кого эта инструкция
Материал предназначен для редакторов, контент-менеджеров и администраторов сайта, которые загружают изображения и размещают их на страницах Wagtail.
Названия полей и кнопок могут отличаться. Интерфейс административной панели зависит от того, как разработан конкретный проект.
Что проверить перед загрузкой
Подготовьте изображение заранее:
- убедитесь, что формат поддерживается сайтом;
- проверьте качество и размер изображения;
- не загружайте чрезмерно тяжёлый файл;
- используйте понятное название;
- убедитесь, что изображение разрешено публиковать.
Если рядом с полем указаны рекомендуемые размеры или пропорции, соблюдайте их. Вертикальная фотография может плохо смотреться в широком баннере, а слишком маленькое изображение — потерять качество при увеличении.
Как выбрать способ загрузки
| Способ | Когда использовать | Библиотека Wagtail |
|---|---|---|
| Поле или блок Wagtail | Обложка, карточка, баннер, отдельный блок | Да |
| Раздел «Изображения» | Загрузка файлов заранее | Да |
| Редактор Quill | Иллюстрация непосредственно внутри текста | Да |
Если после нажатия кнопки открывается окно с поиском по изображениям и загрузкой нового файла, используется стандартный менеджер Wagtail.
Если файл выбирается через панель форматирования текста и сразу появляется между абзацами, изображение загружается через Quill.
Для обложек, карточек, баннеров и других постоянных элементов страницы используйте предусмотренные поля Wagtail. Quill предназначен для иллюстраций внутри текста.
Как загрузить изображение через поле или блок Wagtail
Шаг 2. Найдите поле изображения
Изображение может добавляться через:
- рич-текст в панели инструментов;
- поле обложки;
- основное изображение страницы;
- изображение карточки;
- баннер;
- отдельный контентный блок;
- составной блок с текстом и изображением.
Если нужного поля нет, возможно, выбранный тип страницы его не предусматривает.
Шаг 3. Откройте библиотеку изображений
Нажмите кнопку «Выбрать изображение», «Добавить изображение» или кнопку с похожим названием.
Откроется стандартное окно выбора и загрузки изображений Wagtail.
Шаг 4. Проверьте существующие файлы
Перед новой загрузкой воспользуйтесь поиском. Возможно, нужная картинка уже находится в библиотеке.
Один файл можно использовать на нескольких страницах. Не нужно повторно загружать одинаковое изображение: дубли усложняют поиск и обслуживание сайта.
НО в Wagtail предусмотрена защита от повторной загрузки уже загруженных изображенийШаг 5. Загрузите новый файл
Если подходящего изображения нет:
- Перейдите к загрузке нового файла.
- Выберите изображение на компьютере.
- Дождитесь завершения загрузки.
- Проверьте, не появилось ли сообщение об ошибке.
Шаг 6. Заполните доступные поля
Набор полей зависит от настроек проекта.
Название помогает найти файл в библиотеке.
Коллекция используется для группировки изображений, если такая система настроена на сайте.
Теги упрощают поиск по большой библиотеке.
Альтернативный текст или описание заполняется, если соответствующее поле предусмотрено в проекте.
Фокусная область позволяет отметить важную часть фотографии, чтобы при автоматическом кадрировании не обрезалось лицо, товар или другой главный объект.
Шаг 7. Выберите изображение
Загрузить изображение в библиотеку и разместить его на странице — не всегда одно действие. Если файл сохранён, но не выбран, на странице он не появится.
Выберите варианты размещения изображения внутри текста (формат - опционально):- По ширине - изображение занимает 100% ширины контейнера текста
- По левому краю - изображение размещается слева от текста, текст при этом обтекает справа
- По правому краю - изображение размещается справа от текста, текст при этом обтекает слева
Шаг 8. Сохраните и проверьте страницу
Сохраните изменения и откройте предпросмотр.
Проверьте:
- правильное ли изображение выбрано;
- находится ли оно в нужном блоке;
- не обрезан ли главный объект;
- достаточно ли качества;
- нормально ли страница выглядит на мобильном экране.
Если изменение должно сразу появиться на сайте, не забудьте опубликовать страницу.
Как загрузить изображение через Quill
В текущей реализации сайта изображения внутри Quill загружаются напрямую и не проходят через стандартную библиотеку Wagtail.
Шаг 1. Установите курсор
Поставьте курсор между абзацами в том месте, где должна появиться иллюстрация.
Не рекомендуется вставлять изображение внутрь предложения или списка.
Шаг 2. Нажмите кнопку изображения
Найдите кнопку добавления изображения на панели форматирования Quill.
Шаг 3. Выберите файл
Выберите изображение на компьютере и дождитесь его загрузки.
*Стандартное окно библиотеки Wagtail при этом не открывается.
Шаг 4. Проверьте положение изображения
Убедитесь, что картинка:
- находится между нужными абзацами;
- не попала внутрь списка;
- не оказалась перед неправильным заголовком;
- относится к расположенному рядом тексту.
Шаг 5. Сохраните страницу
Сохраните изменения и откройте предпросмотр. Проверьте размер, отступы и положение изображения.
Изображение из Quill в текущей реализации не появится в разделе «Изображения» Wagtail. Его нельзя найти и повторно выбрать через стандартную библиотеку.
Для повторного размещения такого файла может потребоваться новая загрузка.
Как загрузить файл через раздел «Изображения»
Файл можно добавить в библиотеку заранее:
Откройте раздел «Изображения»
Откройте раздел «Изображения» в боковом меню.
Нажмите кнопку добавления изображения
Нажмите кнопку добавления изображения.
Выберите файл и заполните поля
Выберите файл и заполните доступные поля.
Сохраните изображение
Сохраните изображение.
После этого откройте нужную страницу и выберите файл в соответствующем поле или блоке.
Само появление изображения в библиотеке не означает, что оно уже размещено на сайте.
Почему изображение не появилось на странице
Проверьте основные причины:
- файл загружен в библиотеку, но не выбран для поля;
- изображение добавлено не в тот блок;
- страница сохранена как черновик, но не опубликована;
- картинка в Quill вставлена в неправильное место;
- выбранный тип страницы не предусматривает нужного поля.
Стандартный сценарий выглядит так:
Файл → библиотека Wagtail → поле страницы → сохранение → публикация.
Для Quill:
Файл → текстовый редактор → изображение внутри текста → сохранение → публикация.
Почему изображение обрезалось
Чаще всего причина связана с пропорциями исходного файла и блока.
Например, вертикальная фотография будет обрезана при размещении в широком баннере. Квадратная карточка также может отрезать края панорамного изображения.
Если доступна фокусная область, отметьте главный объект фотографии. Это поможет системе сохранить его при кадрировании.
Один файл может выглядеть по-разному в обложке, карточке и баннере, поскольку эти элементы используют разные размеры и пропорции.
Когда обращаться к разработчику
Помощь технического специалиста нужна, если:
- на странице нет необходимого поля или блока;
- загрузка завершается ошибкой;
- изображение постоянно отображается неправильно;
- требуется галерея, слайдер, баннер или другой новый формат;
- изображения из Quill должны попадать в общую библиотеку Wagtail.
Редактор может использовать только те форматы, которые уже предусмотрены в проекте. Если один тип визуального блока нужен регулярно, лучше реализовать для него отдельный управляемый компонент Wagtail.
FAQ
Не обязательно. Новый файл можно загрузить во время выбора изображения в поле страницы. После этого он сохранится в библиотеке Wagtail.
В текущей реализации Quill загружает файлы напрямую, без стандартного менеджера Wagtail.
Проверьте, выбран ли файл для нужного поля, сохранена ли страница и опубликованы ли изменения.
Вероятно, пропорции исходника не соответствуют блоку. Проверьте требования к изображению и настройку фокусной области.
Убедитесь, что выбран правильный тип страницы и проверены доступные блоки. Если нужный формат не предусмотрен, потребуется доработка проекта.
