21.11.2012

Битрикс - как добавить изображение в публикацию

Ставим в тексте нашей статьи курсор в место куда желаем разметить картинку.

Далее включаем визуальный редактор:
Включаем визуальный режим

Если в редакторе есть лишние для вас области "Сниппеты" и "Свойства" (они нужны разработчикам сайтов, редакторы сайтов не применяют), отключаем их как показано на скрине ниже:
Отключаем лишнее

Нажимаем кнопку "Изображение":
Нажимаем на кнопку Изображение

Выбираем картинку в медиабиблиотеке:
Выбираем элемент из медиабиблиотеки

Для удобства пользования медиабиблиотекой, изображения в ней лучше всего хранить в коллекциях (это как бы "папки"). Рекомендую для каждого отдельного модуля (Новости, Публикации и т.п.) создать отдельную коллекцию. Внутри коллекций могут быть вложенные коллекции, допустим коллекции для каждой рубрики публикаций. Иначе, когда загрузите несколько тысяч фотографий и картинок сложно найти искомый файл, а также ваша система станет заметно тормозить.
Коллекция изображений 1С-Битрикс

В нашем случае нет ни одной картинки. Для добавления изображения нажимаем на опцию "Добавить элемент" -> "Обзор.." и загружаем файл со своего компьютера:
Обзор файлов на компьютере пользователя

Желательно сразу вписать название картинки, описание (будет как title и alt), ключевые слова, а также определяем в какую коллекцию класть:
Добавляем в коллекцию изображение

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

В следующем диалоговом окне "Мой рисунок" выставляем размер по ширине (высота отрегулируется автоматически), выбираем из выпадающего списка "Выравнивание" вариант как выравнивать картинку в тексте. В примере "слева":
Настройка картинки перед вставкой

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

Если все остальное готово, сохраняем статью кнопкой "Сохранить" и идем смотреть что получилось на публичной стороне сайта (или переключаемся на другую закладку браузера, где заранее открыта нужная страница, при этом, раза 2 нужно обновить страницу, иначе не увидим изменений):
Статья на сайте со вставленной фотографией

Возврат к списку


Валерий Костенко
У вас все должно получиться, нет ничего сложного :)
ВКонтакт Facebook Одноклассники Twitter Яндекс Livejournal Liveinternet Mail.Ru