В данной статье я расскажу о том, как это можно добавить изображение в модуль новостей Joomla.
Добавление изображений в стандартный модуль новостей Joomla

Модуль новостей Joomla, показывающий последние, популярные или случайные материалы, является, пожалуй, одним из наиболее используемых модулей на любом сайте. В Joomla такой модуль называется «Материалы - Новости». Модуль хороший и простой, но, к сожалению, имеет один большой недостаток – он нормально не показывает вступительные изображения материалов. В данной статье я расскажу о том, как это можно легко и быстро исправить без хаков. Также в статье вы найдете готовый исправленный модуль и сможете скачать его совершенно бесплатно.

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

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

Если мы посмотрим настройки модуля новостей Joomla, то увидим, что в них есть опция Показывать изображения:

1

Она не просто есть, она работает.

«Ну и в чем же тогда смысл статьи?» – спросите вы. Дело в том, что вступительное изображение в материале Joomla можно показать двумя способами:

  1. Добавить его в редакторе перед текстом материала
  2. Добавить его в опции Изображение для вступительного текста материала на вкладке Изображения и ссылки (см. рисунок ниже)

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

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

2

Оба варианта имеют право на существование, но второй вариант гораздо более правильный. «Почему?» – спросите вы. Поскольку изображение хранится отдельно от содержимого статьи, то мы можем легко им управлять, делая четкие и ровные картинки для разных материалов. Один раз подправив верстку этого изображения в макете, нам больше не нужно беспокоиться о том, что вступительные картинки у разных материалов будут выглядеть по-разному. Для каждого материала будет применяться единое оформление вступительного изображения. Это очень удобно.

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

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

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

$item->introtext = preg_replace('/<img[^>]*>/', '', $item->introtext);

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

Интересно то, что в данных, доступных в макете модуля, есть путь к изображению, созданному вторым способом, правда хранятся они в формате JSON:

[images] => {"image_intro":"images\/images\/8eWQDa2H1LQ.jpg","float_intro":"","image_intro_alt":"","image_intro_caption":" ","image_fulltext":"images\/images\/8eWQDa2H1LQ.jpg","float_fulltext":"","image_fulltext_alt":"","image_fulltext_caption":""}

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

Добавление изображений, добавленных через специальное поле, в макет модуля новостей Joomla

Порядок действий:

1. Переопределяем макет модуля в шаблон Joomla (мы же не хотим, чтобы все наши изменения стерлись после первого же обновления Joomla?). Для этого копируем файл:

modules/mod_articles_news/tmpl/_item.php

в папку:

templates/ВАШ_ШАБЛОН/html/mod_articles_news/

и вносим все последующие исправления уже в скопированный файл.

2. В переопределенном макете _item.php вносим следующие изменения:

2.1. Находим строчку:

$item_heading = $params->get('item_heading', 'h4');

И добавляем после нее:

$image = json_decode($item->images, true);

Этой строчкой мы перекодировали данные из формата JSON в массив.

2.2. Находим строчку:

<?php echo $item->introtext; ?>

и добавляем перед ней:

<?php if($image) : ?>
	<a class="item_image" href= "<?php echo $item->link; ?>">
		<img src= "<?php echo $image['image_intro'] ?>" alt="<?php echo $item->title; ?>" />      
	</a> 
<?php endif; ?>

Вот и всё. Теперь у вас в модуле новостей после заголовка, но перед текстом, будут появляться вступительные изображения, добавленные в материалы вторым способом (через специальное поле). После этого останется добавить немного CSS на ваш вкус, и гадкий утенок превратится в прекрасного лебедя, например, такого:

3

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

Как и обещал, прикладываю измененный макет:

Скачать _item.php

Вам нужно скачать его и скопировать в папку:

templates/ВАШ_ШАБЛОН/html/mod_articles_news/

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

5 1 1 1 1 1 5.00

Комментарии  

0 # RE: Добавление изображений в стандартный модуль новостей JoomlaDina 27.04.2017 08:22
Спасибо за статью, добавила себе дату создания в модуль.
Пытаюсь сменить формат даты через Language override (создала 6 DATE_FORMAT_LC и один DATE_FORMAT_JS1) - ничего не получается! все равно некрасивый формат наоборот и время зачем-то.
И еще хотела не дату создания, а дату публикации - замена created на published не помогла:) подскажите, пожалуйста, как правильно.
Спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление изображений в стандартный модуль новостей JoomlaWedal 28.04.2017 06:28
Dina, по датам - составьте правильный формат в language override:


Чтобы узнать правильный текст для вывода тех или иных переменных, напишите временно:
Код:<pre><?php print_r($item) ?></pre>
где-нибудь в цикле перебора материалов. Увидите все возможные варианты.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Добавление изображений в стандартный модуль новостей JoomlaИмран Ильясов 18.10.2016 19:30
Отлично! 8)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление изображений в стандартный модуль новостей JoomlaДенис 12.10.2016 08:03
Спасибо за отличный урок. Но столкнулся с проблемой. В модуле новостей у картинки ссылка получалась с обрезанным доменом. Т.е. когда кликаешь на картинку, то статья не открывается. В строчке
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление изображений в стандартный модуль новостей JoomlaWedal 13.10.2016 05:13
Денис, слеш перед URL не нужен. Его и не было в оригинальной статье. Был какой-то сбой в плагине подсветки кода на сайте и этот слеш подставился. Сейчас поправил код. Также вы можете скачать файл в конце статьи. В нем код тоже правильный.
Ответить | Ответить с цитатой | Цитировать
+2 # RE: Добавление изображений в стандартный модуль новостей JoomlaИван 15.09.2016 06:39
Спасибо за код вставки изображения и даты! Не понимаю почему до сих пор разработчики не могут доделать нормальный новостной модуль.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление изображений в стандартный модуль новостей JoomlaАлла 12.09.2016 17:50
Спасибо, я на начальной (если можно так выразиться) стадии создания сайта, стараюсь по максимуму собрать информацию. У вас хороший сайт, сейчас полезу еще искать. В общем, по крупицам собираю)
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Добавление изображений в стандартный модуль новостей JoomlaДенис 28.08.2016 02:03
Wedal, спасибо за статью!

с картинкой понятно. А вот с датой новости - не очень. Стал пробовать ваше решение (оно отлично работает) и столкнулся с тем, что дату (новостной!) модуль не выводит. Может я чего не заметил?
Ответить | Ответить с цитатой | Цитировать
+2 # RE: Добавление изображений в стандартный модуль новостей JoomlaWedal 29.08.2016 05:01
Денис, дату можно вывести, вставив в переопределенный макет:
Код:<?php echo $item->created; ?>
а если вы временно вставите:
Код:<pre><?php print_r($item); ?></pre>
то увидите все доступные данные, которые можно вывести в модуле по аналогии с датой.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Добавление изображений в стандартный модуль новостей JoomlaALEHAN 26.08.2016 12:39
Чертовски полезный урок! Огромное спасибо Wedal, выкладывайте больше подобных материалов, они бесценны
Ответить | Ответить с цитатой | Цитировать
0 # RE: Добавление изображений в стандартный модуль новостей JoomlaWedal 29.08.2016 04:54
ALEHAN, рад, что вам понравилось :-)
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх