Урок 4. Добавляем картинки и видео

Хороший текст — это база. Но без картинок и видео страница часто выглядит бледно. Фото продукта, скриншот схемы, обзорный ролик помогают показать то, что словами не объяснишь.

На странице О магазине уже есть текст. Добавим к нему фотографию и обзорный ролик через визуальный редактор 1С-Битрикс: Управление сайтом.

Как открыть визуальный редактор

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

Чтобы открыть визуальный редактор страницы, включите Режим правки на панели управления, наведите курсор на основной текст и нажмите Изменить страницу в редакторе. Для новости или товара кнопка редактирования будет называться по имени материала.

Добавляем картинку в текст

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

Откроется окно настройки. Источник изображения можно задать несколькими способами:

• указать путь к файлу на сайте или прямую ссылку на изображение в интернете
• выбрать файл из Медиабиблиотеки — специального инструмента для управления файлами
• выбрать файл из структуры сайта или загрузить новый файл

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

Чтобы загрузить новый файл с компьютера:

1. В окне настройки изображения нажмите стрелку рядом с кнопкой выбора файла. Откроется небольшое окно с вариантами загрузки. Нажмите Выбрать из структуры сайта.
   
2. В диалоговом окне перейдите на вкладку Загрузить файл и выберите файл с компьютера.
3. Поле Имя файла на сервере заполнится автоматически. При необходимости измените имя файла.
4. Поставьте галочку Открыть файл после загрузки, чтобы сразу открыть окно настройки изображения.
5. Нажмите кнопку Загрузить.
   

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

Alt-текст: короткое описание картинки

Нажмите кнопку Дополнительные параметры в окне настройки изображения. Откроются поля:

• Выравнивание — положение картинки в тексте
• Атрибут Alt — короткое текстовое описание изображения
• CSS класс — техническое поле для применения готового стиля оформления
• Ссылка на изображении — куда перейдет пользователь после клика

Набор полей может отличаться: это зависит от настроек области, где размещена картинка. Больше всего нас интересует поле Атрибут Alt.

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

Хороший alt описывает изображение по смыслу страницы. Например, не Фото, а Настольная лампа с сенсорным выключателем. Не превращайте alt в набор ключевых слов: лучше оставить только то, что помогает понять страницу.

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

Добавляем видео с видеохостинга

Картинки мы уже вставили. С видео ситуация другая.

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

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

Если у вас есть ссылка на ролик

В визуальном редакторе нажмите кнопку Вставить видео и укажите ссылку на ролик в поле Источник видео. В подсказке поля перечислены YouTube, RuTube и Vimeo. Дождитесь предпросмотра, при необходимости задайте название и размер видео, затем нажмите Сохранить.

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

Если вы используете код вставки плеера

Если видеохостинг дает готовый код вставки плеера, его можно вставить в режиме редактирования исходного кода. Этот способ требует знакомства с HTML: копируйте код целиком и не меняйте соседние фрагменты страницы.

1. Откройте страницу видеохостинга, например RuTube, с видеороликом.
2. Нажмите кнопку Поделиться под видео.
   
3. Выберите вариант Код вставки плеера и скопируйте полученный код.
   
4. Вернитесь на страницу с редактором.
5. В левом верхнем углу найдите кнопку переключения режимов редактирования. Выберите режим редактирования исходного кода и вставьте скопированный код в место, где должно появиться видео.
   

Код вставки видео может выглядеть так:

   <iframe width="720" height="405" src="https://rutube.ru/play/embed/58e22e43f86683faa867bf647286ac76/" style="border: none;" allow="clipboard-write; autoplay" allowFullScreen></iframe>
   

После сохранения откройте страницу как посетитель и проверьте:

• видео отображается на странице
• ролик запускается
• блок не выходит за границы экрана на телефоне

Медиапроигрыватель и Видеотека: когда видеохостинг не подходит

Если внешний видеохостинг не подходит или его нет, видео можно хранить внутри сайта. Для этого в Битрикс есть два инструмента.

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

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

Медиапроигрыватель и Видеотека работают через специальные блоки — компоненты. Подробнее о компонентах и работе с ними мы будем говорить в уроке 8 о компонентах. Пока достаточно знать, что это готовые блоки, которые помогают вывести информацию на страницу.