Как в Joomla вставить изображение в модуль

Наверное, многие сталкивались с вопросом, как в Joomla вывести основные изображения статей в модулях, отображающих различные списки Материалов, которые вставляются не в боковые колонки, а на какой-либо позиции в основное содержимое (основной контент) страницы: действительно, довольно часто это более выгодно и наглядно, чем узкая колонка в правой или левой стороне!

Простой пример: посмотрите на главную страницу этого сайта: вверху предисловие, далее кнопки с основными разделами, а под ними вы видите модуль, выводящий список последних опубликованных материалов; в каждом из столбцов с материалом имеется основное изображение статьи, установленное на вкладке "Изображения и ссылки"  как изображение для полного текста материала. Однако если вы просто установите такой модуль в данную позицию, то заголовки и часть вступительного текста выводится будут, но основные изображения статей не появятся и вывести их на экран при помощи каких либо настроек невозможно. Однако решение данного вопроса существует и довольно простое!

Почему в модуле материалов в Joomla не выводится основное изображение статьи

Причина данной проблемы кроется в том, что вывод таких изображений в модули не предусмотрен на программном уровне, проще говоря, просто не существует такого кода в соответствующем файле, но это можно легко исправить! Как? Рассмотрим на примере вышеуказанного модуля "Материалы - список материалов категории".

Вывод основного изображения статьи в модулях материалов в Joomla

Итак, предположим, вы имеете какую-либо категорию материалов (ну пусть хотя бы те же "Статьи") и вам её нужно вывести вниз определённой страницы в три столбца (два, три, четыре -  не суть как важно). Для этого следует создать (Расширения > Модули Создать ) модуль "Материалы - список материалов категории", указать название, указать категорию, которую будете выводить и указать позицию, расположенную под контентом. В разделе "Учебные материалы", в главе 8, рассматривалось, как устанавливать что-либо на какую-либо позицию; в приведённом в главе шаблоне это будет позиция "bottom-content" (см. Главу 8 Установка шаблона, просмотр позиций, рисунок 85):

Осталось только настроить подходящее отображение элементов и всё работает, но изображений в статьях вы не увидите, поэтому следует немного подправить код модуля. Для этого заходим на хостинг, открываем папку с вашим сайтом, находим папку modules, находим в ней и открываем папку mod_articles_category - это и будет папка с данным модулем. Открываем её, и во вложенной папке tmpl находим стандартный для таких папок файл default.php - именно в него необходимо внести всего несколько строк.

В указанном файле вы увидите html-код для вывода обычного списка, в который и нужно внести изменения, однако не всё так просто: выводимый список зависит от значения переменной $grouped, может быть либо false, либо true, в зависимости от настройки параметра "Группировка материалов" во вкладке "Настройки группировки": если сохранено значение, выставленное по умолчанию ("Нет"), то переменная имеет значение false, если указано что-то другое - true. Соответственно, если вы не меняли значение данного параметра, то дополнить код нужно во второй части конструкции

 

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

Будем исходить из того, что вы не меняли настройки и значение данного параметра осталось по умолчанию; соответственно, рассмотрим дальнейшие действия в нижней части конструкции после else (приблизительно 82 строка). Далее вы увидите конструкцию

которая выводит в модуль карточку для каждой статьи с заголовком, датой и коротким текстом (зависит от настроек). Именно сюда и нужно вставить код для вывода изображения, причём сразу после тега <li> (соответственно, перед кодом, выводящим заголовок).

Код для вывода изображения в модуль

Теперь непосредственно о самом коде. Вот эта простая конструкция:

 1  <?php $images = json_decode($item->images); ?>
 2  <?php if ((htmlspecialchars($images->image_intro)) != NULL) : ?>
 3         <div class='mod_img'>
 4                <img src="/<?php echo htmlspecialchars($images->image_intro); ?>"
 5                          width="250px" height="140px"
 6                          alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" />
 7         </div>
 8  <?php endif; ?>

Первая строка при помощи функции  json_decode получает данные об изображении, после чего вторая строка проверяет в полученных данных наличие пути к изображению. Если путь имеется, то при помощи строк 3-7 вставляется изображение с указанием пути (строка 4), необходимого размера (строка 5, необязательно), и альтернативной надписи на случай, если браузер по каким-то причинам не выведет изображение (строка 6). Обратите внимание: строки 4-6 в редакторе следует объединить в одну; здесь они разбиты на части просто для удобства просмотра.

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

Если вы используете настройку параметра "Группировка материалов" отличную от "Нет", данный код необходимо установить в верхнюю часть конструкции if / else / endif (см. выше) по точно такому же принципу: перед кодом, выводящим заголовок статьи.