Изображения в блоке

Урок 5

Зарегистрируйтесь или войдите и получите бесплатный доступ к первому уроку курса.

Урок 5

Загрузка / Добавление изображений в блок

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

Для того, чтобы скачать готовый код этого урока, нужно приобрести курс.

интерфейс добавления ихображений в блок Gutenberg
У нас также есть возможность сделать произвольное отображение серого блока с кнопкой «Добавить фото» при помощи CSS и произвольного HTML

При нажатии на кнопку «Добавить фото» у нас будет открываться стандартное модальное окно медиагалереи WordPress, в котором мы можем загрузить новое изображение или выбрать из уже существующих.

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

Так выглядит наш блок с загруженным в него изображением:

Блок с изображением в Gutenberg
Кнопка «Удалить» появляется только при фокусе на блоке
Купить курс
  • 7 видеоуроков
  • Сможете скачать готовый код – после каждого урока
  • Единоразовый платёж
  • Доступ навсегда
  • Уроки актуальны в 2024-м году
5000 р

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