Как вставить картинку в статью в Джумла

 В этом уроке мы научимся вставлять изображения в материал.

 Для тех, кто умеет работать в современных текстовых редакторах, это будет лёгкой прогулкой.

 Заходим в корень нашего сайта – OpenServer – domains – папка с нашим сайтом.

 Находим папку "images" и кликаем по ней.

 Создаём нужные нам каталоги с тематическими фотографиями (у меня заранее подготовлены изображения размером 1100 х 825 px). В моём случае это новые три папки.

 Возвращаемся в "Панель управления сайтом". Вкладка Материалы – Медиа-менеджер.

 Как видим и здесь отображаются наши созданные каталоги.

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

 Нажимаем "Создать новый каталог".

 Прописываем его название латинскими буквами и нажимаем "Создать каталог".

 Появилась наша новая папка, кликаем по ней.

 В левом, верхнем углу – "Загрузить".

 В открывшемся окне – "Выбрать файлы".

 Находим на своём компьютере нужные изображения и нажимаем "Открыть".

 Видим нам подсказывает система, сколько файлов мы выбрали. Нажимаем "Загрузить".

 Система сообщает об успешной загрузке.

 Теперь непосредственно займёмся размещением фотографий в наших статьях.

 Материалы – Менеджер материалов.

 Находим в списке нужную статью и открываем её.

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

 Начнём с миниатюр.

 В начало абзаца ставим курсор и нажимаем на вкладку "Изображение".

 В поле "Выравнивание" ставим "Влево". Кликаем по папке с нужными фотографиями.

 Выбираем нужную картинку. Для индексирования поисковиками обязательно прописываем текст в полях "Описание изображения" и "Заголовок изображения".

 "Вставить".

 В нашей статье появилась картинка, но размер её большой для данной позиции (1100 х 825 px). Нам нужно её уменьшить.

 Для этого нажимаем на пиктограмму, обведённую на картинке внизу.

 Первая вкладка "Общее". Здесь и прописываем нужные нам размеры. У меня это – 200 х 150 px.

 Вторая вкладка "Расширенные". Если мы не поставим вертикальные и горизонтальные отступы, то текст статьи будет прилипать к фотографии, что не красиво.

 Вертикальный поставим 5 px, а горизонтальный 15. С размерами можно поэкспериментировать и выбрать для себя подходящие.

 Нажимаем "ОК".

 Наша миниатюра появилась там, где мы и хотели. Нажмём "Сохранить" и посмотрим на наш сайт.

 Уже интереснее смотрится.

 Теперь вставим полномасштабную фотография в середину статьи.

 Выбираем подходящее для неё место и ставим курсор. Нажимаем вкладку "Изображение".

 Действия аналогичные описанным выше, только выравниваем по центру.

 Клик по фото и нажимаем пиктограмму вверху.

 Вкладку "Общие" пропускаем, так как изображение вставляем полноразмерное.

 Сразу переходим на "Расширенные".

 Здесь выставляем только вертикальный отступ и "ОК".

 При необходимости добавляем ещё картинки.

 "Сохранить и закрыть" материал.

 Переходим на сайт и нажимаем кнопку под статьёй "Подробнее".

 Видим нашу статью с фотографиями. Отступы гармонично смотрятся.

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

 Вот так теперь выглядит страница нашего сайта с миниатюрами.

 Вот мы и разобрались с вопросом,как вставить фотографию в статью Джумла.

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

 В следующем уроке мы создадим вкладку "Контакты". Это особенно актуально для коммерческих сайтов.