В данной статье я расскажу о том, как это можно добавить изображение в модуль новостей 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 правильно, избегая хаков и сторонних расширений, которые можно заменить стандартными.

Об авторе
Об авторе
Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.

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

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

Комментарии  

+3 # ALEHAN 26.08.2016 12:39
Чертовски полезный урок! Огромное спасибо Wedal, выкладывайте больше подобных материалов, они бесценны
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 29.08.2016 04:54
ALEHAN, рад, что вам понравилось :-)
Ответить | Ответить с цитатой | Цитировать
+1 # Денис 28.08.2016 02:03
Wedal, спасибо за статью!

с картинкой понятно. А вот с датой новости - не очень. Стал пробовать ваше решение (оно отлично работает) и столкнулся с тем, что дату (новостной!) модуль не выводит. Может я чего не заметил?
Ответить | Ответить с цитатой | Цитировать
+4 # Wedal 29.08.2016 05:01
Денис, дату можно вывести, вставив в переопределенный макет:
Код:<?php echo $item->created; ?>
а если вы временно вставите:
Код:<pre><?php print_r($item); ?></pre>
то увидите все доступные данные, которые можно вывести в модуле по аналогии с датой.
Ответить | Ответить с цитатой | Цитировать
0 # Алла 12.09.2016 17:50
Спасибо, я на начальной (если можно так выразиться) стадии создания сайта, стараюсь по максимуму собрать информацию. У вас хороший сайт, сейчас полезу еще искать. В общем, по крупицам собираю)
Ответить | Ответить с цитатой | Цитировать
+2 # Иван 15.09.2016 06:39
Спасибо за код вставки изображения и даты! Не понимаю почему до сих пор разработчики не могут доделать нормальный новостной модуль.
Ответить | Ответить с цитатой | Цитировать
0 # Денис 12.10.2016 08:03
Спасибо за отличный урок. Но столкнулся с проблемой. В модуле новостей у картинки ссылка получалась с обрезанным доменом. Т.е. когда кликаешь на картинку, то статья не открывается. В строчке
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 13.10.2016 05:13
Денис, слеш перед URL не нужен. Его и не было в оригинальной статье. Был какой-то сбой в плагине подсветки кода на сайте и этот слеш подставился. Сейчас поправил код. Также вы можете скачать файл в конце статьи. В нем код тоже правильный.
Ответить | Ответить с цитатой | Цитировать
+1 # Имран Ильясов 18.10.2016 19:30
Отлично! 8)
Ответить | Ответить с цитатой | Цитировать
0 # Dina 27.04.2017 08:22
Спасибо за статью, добавила себе дату создания в модуль.
Пытаюсь сменить формат даты через Language override (создала 6 DATE_FORMAT_LC и один DATE_FORMAT_JS1) - ничего не получается! все равно некрасивый формат наоборот и время зачем-то.
И еще хотела не дату создания, а дату публикации - замена created на published не помогла:) подскажите, пожалуйста, как правильно.
Спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 28.04.2017 06:28
Dina, по датам - составьте правильный формат в language override:


Чтобы узнать правильный текст для вывода тех или иных переменных, напишите временно:
Код:<pre><?php print_r($item) ?></pre>
где-нибудь в цикле перебора материалов. Увидите все возможные варианты.
Ответить | Ответить с цитатой | Цитировать
0 # Евгений 29.05.2017 14:58
Благодарю за статью, пришлась очень кстати, думал придется два часа гуглить, а тут раз и вот оно, за 5 минут все сделал.
Ответить | Ответить с цитатой | Цитировать
0 # Денис 31.05.2017 10:48
Спасибо за статью! Но вот вопрос: ни даты, ни количества просмотров модуль этот не выводит. И в чем тогда его смысл? Новость без даты (хотя бы) - это же абсурд))
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 01.06.2017 06:11
Денис, это очень легко исправить. В макет _item.php, по аналогии с тем, как описывается добавление изображений в статье, добавьте:
Код:<?php echo $item->hits ?>- чтобы вывести количество просмотров

Код:<?php echo $item->created ?>- чтобы вывести дату создания.
Ответить | Ответить с цитатой | Цитировать
0 # Александр 12.06.2017 17:13
Огромнейший спасибо автору статьи за труд!
Но непонятно, как в этом модуле сделать так, чтобы интро текст выводил первые 15 слов (не символов) и после последнего слова выводилось ... ( многоточие ) или символ стрелки → например. Тогда будет смотреться очень аккуратно.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 13.06.2017 05:28
Александр, гуглится же: https://krylov.org.ua/php-pervye-n-slov-iz-teksta/
Добавляете в начале макета эту функцию, а затем передаете в нее описание и количество слов, например, 15. Profit!
Ответить | Ответить с цитатой | Цитировать
0 # Александр 13.07.2017 22:41
Цитирую Александр:
Огромнейший спасибо автору статьи за труд!
Но непонятно, как в этом модуле сделать так, чтобы интро текст выводил первые 15 слов (не символов) и после последнего слова выводилось ... ( многоточие ) или символ стрелки → например. Тогда будет смотреться очень аккуратно.[/qu[quote name="Александр"]Огромнейший спасибо автору статьи за труд!
Но непонятно, как в этом модуле сделать так, чтобы интро текст выводил первые 15 слов (не символов) и после последнего слова выводилось ... ( многоточие ) или символ стрелки → например. Тогда будет смотреться очень аккуратно.


Спасибо! Все получилось, за исключением одного - изображение выводиться только в родительской категории, в категориях второго уровня и в статьях изображения нет только alt в рамочке. Почему так? Что нужно дописать в коде, чтобы картинка везде показывалась? Работаю в Joomla 3.7. Наверняка не один я с этим столкнулся, дополните статью если можете.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 27.07.2017 06:13
Александр, пока не могу сказать. Нужно будет протестировать. Напишите, пожалуйста, более развернуто о проблеме. Не совсем понятен вот этот момент:
Цитата:
изображение выводиться только в родительской категории, в категориях второго уровня и в статьях изображения нет
Ответить | Ответить с цитатой | Цитировать
0 # Александр 02.08.2017 10:17
Напишите, пожалуйста, более развернуто о проблеме. Не совсем понятен вот этот момент:
Цитата:
изображение выводиться только в родительской категории, в категориях второго уровня и в статьях изображения нет

Есть главная категория "Статьи": в ней все ОК - изображения показываются, а в категориях второго и последующего уровня, входящих в главную категорию "Статьи" и соответственно в самих материалах, изображения нет. Может быть попробовать выводить изображение не из вступления, а из основной части материала? Но как это прописать в коде, увы, я не знаю.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 14.08.2017 08:37
Александр, сейчас специально проверил. Создал категорию. В ней создал подкатегорию. В ней создал статью. В модуле указал вывод материалов из подкатегории. Всё работает корректно.
Ответить | Ответить с цитатой | Цитировать
0 # Максим 24.08.2017 20:11
Получилась такая же ситуация как и у Александра, путем копирования кода из статьи и вставки в стандартный файл _item.php
Решилась тем что в строчке
Ответить | Ответить с цитатой | Цитировать
0 # Максим 25.08.2017 14:32
Извиняюсь, вообщем ситуация как у Александра, получилась путем копирования кода из статьи и вставки в стандартный файл _item.php
Решилась тем что в строчке
Код:<?php echo $item->title; ?>
убрал пробел после
Ответить | Ответить с цитатой | Цитировать
0 # miheich 07.08.2017 11:37
Добрый день!
А как по центру их поставить подскажите?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 14.08.2017 08:40
miheich, примерить к тегу a, который окружает изображение, CSS-стили:
Код:display: block;
text-align: center
Ответить | Ответить с цитатой | Цитировать
0 # Radik 13.11.2017 22:26
Здравствуйте а как сделать чтобы отображение было горизонтальным а не вертикальным???
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 14.11.2017 01:59
Radik, в CSS примените для блока отдельной новости стиль:
Код:display: inline-block;
либо:
Код:float: left;
Ответить | Ответить с цитатой | Цитировать
0 # Radik 14.11.2017 22:59
Спасибо за реакцию быструю а куда это все прописывать я просто чайник в этих делах(((если можно более подробнее напишите буду благодарен
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 15.11.2017 02:17
Radik, данные стили нужно добавить в CSS-файл вашего шаблона, применительно к классу блока отдельной новости. В двух словах это и не опишешь... В браузере нажмите F12, чтобы вызвать панель веб-разработчика. В ней вы сможете найти нужный CSS-файл и класс блока новости.
Ответить | Ответить с цитатой | Цитировать
0 # radik 15.11.2017 11:21
Или как то отдельный стиль создать и указать уже в самом модуле
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 16.11.2017 02:28
radik, если блок с новостью имеет класс, скажем myclass, т.е.:
Код:<div class="myclass">blablabla</div>
То в CSS, чтобы добавить стили именно для этого блока, вы пишите:
Код:.myclass {
display: inline-block;
}
Ответить | Ответить с цитатой | Цитировать
0 # Radik 23.11.2017 22:33
Здравствуйте а вы не знаете как вывести пагинацию в данный модуль???? мне кажется многим пригодилось бы
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 24.11.2017 02:19
Radik, пагинация - явление не свойственное для модулей. Она используется в компонентах. В модуле можно создать имитацию пагинации, скрыв часть новостей, и показывая их, когда пользователь кликает по номерам страниц (тоже отдельно выведенным). Это будет некое подобие слайдера. Другой вариант - не загружать все новости сразу, а использовать AJAX для их подгрузки и замены основного блока при клике пользователя по номеру страницы.
Но, еще раз скажу, это всё - лишь имитация пагинации. Реальную пагинацию в модули не ставят.
Ответить | Ответить с цитатой | Цитировать
0 # Ольга 03.12.2017 10:30
Добрый день, подскажите, а как сделать, чтобы по клику на изображение добавлялась внешняя ссылка (например Ссылка A)?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 04.12.2017 04:55
Ольга, не совсем понял, что значит: "по клику на изображение добавлялась внешняя ссылка". Это же модуль новостей сайта.
Ответить | Ответить с цитатой | Цитировать
0 # Виктор 13.06.2018 16:15
Здравствуйте! Как ограничить вводный текст в модуле материалы новости. В документе _item.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 18.06.2018 07:04
Виктор, вы можете обработать переменную $item->introtext как:
Код:$item->introtext = substr($item->introtext, 100).'...';
Вместо 100 подставьте число символов, которое вам необходимо. В конце я добавил троеточие, чтобы было понятно, что текст обрывается.
Это простейший пример. Можно сделать интереснее, обработав различные ситуации, вроде обрыва слова, пробела, знаков пунктуации и др.
Ответить | Ответить с цитатой | Цитировать
0 # Денис 08.08.2018 16:42
Wedal, добрый вечер. Интересная сложилась ситуация: появились доп поля, которые модули новостей, кроме родного джумловского, не выводят. Но у родного есть ограничение (или я не увидел?) - он не выводит новости горизонтально (в 3 колонки например), а это весьма актуально, скажем на главной странице. Подскажите, как это реализовать?

Спасибо
Ответить | Ответить с цитатой | Цитировать
-1 # Wedal 09.08.2018 03:13
Денис, можно пойти двумя путями.

1. Вы можете сами внедрить дополнительные поля в макет используемого стороннего модуля. В лучшем случае, используя конструкции, описанные в статье https://wedal.ru/uroki-joomla/joomla-custom-fields-nastraivaemye-polya-v-joomla.html , а в худшем, создав SQL-запрос в базу на получение данных полей.

2. Также вы можете использовать стандартный модуль Joomla и оформить вывод результатов в строку с помощью CSS (добавив блокам статей, например, display: inline или float: left).

Есть еще комбинированный вариант. Вы можете посмотреть код, которые добавляет настраиваемые поля в стандартный модуль новостей Joomla, и перенести его в ваш, нестандартный модуль. Теоретически, это может заработать.
Ответить | Ответить с цитатой | Цитировать
0 # Денис 14.08.2018 06:30
Цитирую Wedal:
Денис, можно пойти двумя путями.

1. Вы можете сами внедрить дополнительные поля в макет используемого стороннего модуля. В лучшем случае, используя конструкции, описанные в статье https://wedal.ru/uroki-joomla/joomla-custom-fields-nastraivaemye-polya-v-joomla.html , а в худшем, создав SQL-запрос в базу на получение данных полей.

2. Также вы можете использовать стандартный модуль Joomla и оформить вывод результатов в строку с помощью CSS (добавив блокам статей, например, display: inline или float: left).

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

Сделал по другому, используя бутстрап: поместил в DIV и на разное разрешение - разное количество столбцов, вроде работает
Ответить | Ответить с цитатой | Цитировать
0 # Анатолий 18.09.2018 17:22
Цитирую Александр:

Спасибо! Все получилось, за исключением одного - изображение выводиться только в родительской категории, в категориях второго уровня и в статьях изображения нет только alt в рамочке. Почему так? Что нужно дописать в коде, чтобы картинка везде показывалась? Работаю в Joomla 3.7. Наверняка не один я с этим столкнулся, дополните статью если можете.


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

P.S. Крайне полезная статья и ещё более полезные комментарии. Особенно про этот код .
Ответить | Ответить с цитатой | Цитировать
0 # Анатолий 18.09.2018 17:47
Скачал ваш файл и похоже единственное отличие между кодом в файле и кодом в тексте на сайте это пробелы
Ответить | Ответить с цитатой | Цитировать
0 # Оксана 29.10.2018 02:15
Тоже присоединяюсь к Анатолию. Пропадают изображения на дочерних страницах. Только alt. Что делать?
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 29.10.2018 02:39
Оксана, выше в комментариях обсуждали. Попробуйте взять готовый файл (ссылка на скачивание в конце статьи), а не копировать код из статьи. В статье в коде кое-где попадаются лишние пробелы. В файле такой проблемы нет.
Ответить | Ответить с цитатой | Цитировать
0 # Оксана 31.10.2018 01:48
Спасибо! Моя невнимательность! Все хорошо.
Ответить | Ответить с цитатой | Цитировать
0 # Димыч 28.11.2018 05:54
Сработало! Как всегда замечательная статья. Огромное спасибо. Замечу только что изображения показались после того как я почистил весь кэш в админке джумлы
Ответить | Ответить с цитатой | Цитировать
0 # Андрей 14.02.2020 15:08
Идея хранить вступительные изображения отдельно не плохая, но у нее есть тоже минусы. В редакторе статьи они в таком случае не выводятся, что несколько неудобно.
Важнее, что при этом у изображений не выводится их ширина и высота. Исправить это без хака джумлы или написания плагина я так понимаю не получится?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 17.02.2020 06:39
Андрей, да, в редакторе не выводятся. Но чем это мешает? Если вам нужно изменить ширину и высоту такого изображения, вы можете сделать это с помощью CSS один раз. После этого все загружаемые таким образом изображения будут сами принимать аккуратный оформленный вид.
Другое дело, если вы для разных изображений всегда задаете размеры вручную. Тогда да - проблема. Но как по мне, это неправильный подход.
Ответить | Ответить с цитатой | Цитировать
0 # Андрей 19.02.2020 20:29
Скорее не мешает, а непривычно и есть вероятность забыть добавить изображение))
Что касается размеров изображений, то в категории они у меня одинаковой ширины чтобы смотрелось нормально, а в материале произвольные размеры в определенных рамках. Поскольку одновременно человек видит только одну статью, то не вижу в этом проблемы. Размеры автоматом проставляет JDE.
Просто у меня в основном скриншоты с текстом, а они сильно портятся при масштабировании и как все это привести без потерь к одному размеру я не представляю.
Есть еще одна проблема, нельзя добавить атрибуты к таким изображениям. Буду думать как быть...
Ответить | Ответить с цитатой | Цитировать
0 # Андрей 21.02.2020 19:13
Насколько реально добавить изображения к модулю похожие метки? Там в доступных данных нет изображения или вступительного текста, получается надо делать дополнительные запросы к базе. Пробовал добавить по аналогии к существующим в helper.php, но все ломалось. К тому же его вроде нельзя переопределить.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 24.02.2020 10:07
Андрей, думаю, это уже не так просто. Здесь я бы сделал новый модуль на основе модуля похожих статей и модуля похожих меток. От первого получать информацию о статьях, от второго взять способ выбора статей. Как-так. Но без знаний PHP сделать это будет, наверное, сложно.
Ответить | Ответить с цитатой | Цитировать
0 # Владимир Заграничный 16.07.2020 17:36
Здравствуйте.
Как сделать, что изображение было кликабельным как и заголовок?
И сортировка:
Ставлю показывать только избранное, ставлю отображать 1 материал. Я просматриваю последний материал с пометкой избранного и модуль мне показывает тот же самый материал.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 20.07.2020 08:31
Владимир,
Цитата:
Как сделать, что изображение было кликабельным как и заголовок?
Для этого оно должно быть обернуто в тег ссылки A. В коде, приведенном в статье, так и сделано. Т.е. если вы следовали ему, то изображение у вас должно быть кликабельным.

Цитата:
Ставлю показывать только избранное, ставлю отображать 1 материал. Я просматриваю последний материал с пометкой избранного и модуль мне показывает тот же самый материал.
Логично, если в модуле в поле сортировки задано показывать самые свежие материалы. В этом случае последний и будет всегда выводиться.
Ответить | Ответить с цитатой | Цитировать
0 # Людмила 04.07.2021 20:41
Добрый день! Подскажите пожалуйста, а как вывести изображение, добавленное в модуль последних новостей первым способом, т.е вставленное перед текстом статьи?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 05.07.2021 06:04
Людмила, на момент написания статьи изображение как раз и выводилось в модуле только первым способом. Сейчас у вас не выводится?
Ответить | Ответить с цитатой | Цитировать