Куда идем?

Модуль новостей 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
Чертовски полезный урок! Огромное спасибо Wedal, выкладывайте больше подобных материалов, они бесценны
1
ALEHAN, рад, что вам понравилось :-)
1
Wedal, спасибо за статью!

с картинкой понятно. А вот с датой новости - не очень. Стал пробовать ваше решение (оно отлично работает) и столкнулся с тем, что дату (новостной!) модуль не выводит. Может я чего не заметил?
4
Денис, дату можно вывести, вставив в переопределенный макет:

Код:

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


а если вы временно вставите:

Код:

<pre><?php print_r($item); ?></pre>


то увидите все доступные данные, которые можно вывести в модуле по аналогии с датой.
0
Спасибо, я на начальной (если можно так выразиться) стадии создания сайта, стараюсь по максимуму собрать информацию. У вас хороший сайт, сейчас полезу еще искать. В общем, по крупицам собираю)
2
Спасибо за код вставки изображения и даты! Не понимаю почему до сих пор разработчики не могут доделать нормальный новостной модуль.
0
Спасибо за отличный урок. Но столкнулся с проблемой. В модуле новостей у картинки ссылка получалась с обрезанным доменом. Т.е. когда кликаешь на картинку, то статья не открывается. В строчке
1
Денис, слеш перед URL не нужен. Его и не было в оригинальной статье. Был какой-то сбой в плагине подсветки кода на сайте и этот слеш подставился. Сейчас поправил код. Также вы можете скачать файл в конце статьи. В нем код тоже правильный.
1
Отлично! 8)
0
Спасибо за статью, добавила себе дату создания в модуль.
Пытаюсь сменить формат даты через Language override (создала 6 DATE_FORMAT_LC и один DATE_FORMAT_JS1) - ничего не получается! все равно некрасивый формат наоборот и время зачем-то.
И еще хотела не дату создания, а дату публикации - замена created на published не помогла:) подскажите, пожалуйста, как правильно.
Спасибо!
0
Dina, по датам - составьте правильный формат в language override:


Чтобы узнать правильный текст для вывода тех или иных переменных, напишите временно:

Код:

<pre><?php print_r($item) ?></pre>


где-нибудь в цикле перебора материалов. Увидите все возможные варианты.
0
Благодарю за статью, пришлась очень кстати, думал придется два часа гуглить, а тут раз и вот оно, за 5 минут все сделал.
0
Спасибо за статью! Но вот вопрос: ни даты, ни количества просмотров модуль этот не выводит. И в чем тогда его смысл? Новость без даты (хотя бы) - это же абсурд))
1
Денис, это очень легко исправить. В макет _item.php, по аналогии с тем, как описывается добавление изображений в статье, добавьте:

Код:

<?php echo $item->hits ?>

- чтобы вывести количество просмотров


Код:

<?php echo $item->created ?>

- чтобы вывести дату создания.
0
Огромнейший спасибо автору статьи за труд!
Но непонятно, как в этом модуле сделать так, чтобы интро текст выводил первые 15 слов (не символов) и после последнего слова выводилось ... ( многоточие ) или символ стрелки → например. Тогда будет смотреться очень аккуратно.
0
Александр, гуглится же: https://krylov.org.ua/php-pervye-n-slov-iz-teksta/
Добавляете в начале макета эту функцию, а затем передаете в нее описание и количество слов, например, 15. Profit!
0

Цитирую Александр:

Огромнейший спасибо автору статьи за труд!
Но непонятно, как в этом модуле сделать так, чтобы интро текст выводил первые 15 слов (не символов) и после последнего слова выводилось ... ( многоточие ) или символ стрелки → например. Тогда будет смотреться очень аккуратно.[/qu[quote name="Александр"]Огромнейший спасибо автору статьи за труд!
Но непонятно, как в этом модуле сделать так, чтобы интро текст выводил первые 15 слов (не символов) и после последнего слова выводилось ... ( многоточие ) или символ стрелки → например. Тогда будет смотреться очень аккуратно.



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

Цитата:

изображение выводиться только в родительской категории, в категориях второго уровня и в статьях изображения нет

0
Напишите, пожалуйста, более развернуто о проблеме. Не совсем понятен вот этот момент:

Цитата:

изображение выводиться только в родительской категории, в категориях второго уровня и в статьях изображения нет


Есть главная категория "Статьи": в ней все ОК - изображения показываются, а в категориях второго и последующего уровня, входящих в главную категорию "Статьи" и соответственно в самих материалах, изображения нет. Может быть попробовать выводить изображение не из вступления, а из основной части материала? Но как это прописать в коде, увы, я не знаю.
0
Александр, сейчас специально проверил. Создал категорию. В ней создал подкатегорию. В ней создал статью. В модуле указал вывод материалов из подкатегории. Всё работает корректно.
0
Получилась такая же ситуация как и у Александра, путем копирования кода из статьи и вставки в стандартный файл _item.php
Решилась тем что в строчке
0
Извиняюсь, вообщем ситуация как у Александра, получилась путем копирования кода из статьи и вставки в стандартный файл _item.php
Решилась тем что в строчке

Код:

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


убрал пробел после
0
Добрый день!
А как по центру их поставить подскажите?
0
miheich, примерить к тегу a, который окружает изображение, CSS-стили:

Код:

display: block;
text-align: center

0
Здравствуйте а как сделать чтобы отображение было горизонтальным а не вертикальным???
0
Radik, в CSS примените для блока отдельной новости стиль:

Код:

display: inline-block;


либо:

Код:

float: left;

0
Спасибо за реакцию быструю а куда это все прописывать я просто чайник в этих делах(((если можно более подробнее напишите буду благодарен
0
Radik, данные стили нужно добавить в CSS-файл вашего шаблона, применительно к классу блока отдельной новости. В двух словах это и не опишешь... В браузере нажмите F12, чтобы вызвать панель веб-разработчика. В ней вы сможете найти нужный CSS-файл и класс блока новости.
0
Или как то отдельный стиль создать и указать уже в самом модуле
1
radik, если блок с новостью имеет класс, скажем myclass, т.е.:

Код:

<div class="myclass">blablabla</div> 


То в CSS, чтобы добавить стили именно для этого блока, вы пишите:

Код:

.myclass {
display: inline-block;
}

0
Здравствуйте а вы не знаете как вывести пагинацию в данный модуль???? мне кажется многим пригодилось бы
0
Radik, пагинация - явление не свойственное для модулей. Она используется в компонентах. В модуле можно создать имитацию пагинации, скрыв часть новостей, и показывая их, когда пользователь кликает по номерам страниц (тоже отдельно выведенным). Это будет некое подобие слайдера. Другой вариант - не загружать все новости сразу, а использовать AJAX для их подгрузки и замены основного блока при клике пользователя по номеру страницы.
Но, еще раз скажу, это всё - лишь имитация пагинации. Реальную пагинацию в модули не ставят.
0
Добрый день, подскажите, а как сделать, чтобы по клику на изображение добавлялась внешняя ссылка (например Ссылка A)?
0
Ольга, не совсем понял, что значит: "по клику на изображение добавлялась внешняя ссылка". Это же модуль новостей сайта.
0
Здравствуйте! Как ограничить вводный текст в модуле материалы новости. В документе _item.
0
Виктор, вы можете обработать переменную $item->introtext как:

Код:

$item->introtext = substr($item->introtext, 100).'...'; 


Вместо 100 подставьте число символов, которое вам необходимо. В конце я добавил троеточие, чтобы было понятно, что текст обрывается.
Это простейший пример. Можно сделать интереснее, обработав различные ситуации, вроде обрыва слова, пробела, знаков пунктуации и др.
0
Wedal, добрый вечер. Интересная сложилась ситуация: появились доп поля, которые модули новостей, кроме родного джумловского, не выводят. Но у родного есть ограничение (или я не увидел?) - он не выводит новости горизонтально (в 3 колонки например), а это весьма актуально, скажем на главной странице. Подскажите, как это реализовать?

Спасибо
0
Денис, можно пойти двумя путями.

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

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

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

Цитирую 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

Цитирую Александр:


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



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

P.S. Крайне полезная статья и ещё более полезные комментарии. Особенно про этот код .
0
Скачал ваш файл и похоже единственное отличие между кодом в файле и кодом в тексте на сайте это пробелы
0
Тоже присоединяюсь к Анатолию. Пропадают изображения на дочерних страницах. Только alt. Что делать?
1
Оксана, выше в комментариях обсуждали. Попробуйте взять готовый файл (ссылка на скачивание в конце статьи), а не копировать код из статьи. В статье в коде кое-где попадаются лишние пробелы. В файле такой проблемы нет.
0
Спасибо! Моя невнимательность! Все хорошо.
0
Сработало! Как всегда замечательная статья. Огромное спасибо. Замечу только что изображения показались после того как я почистил весь кэш в админке джумлы
0
Идея хранить вступительные изображения отдельно не плохая, но у нее есть тоже минусы. В редакторе статьи они в таком случае не выводятся, что несколько неудобно.
Важнее, что при этом у изображений не выводится их ширина и высота. Исправить это без хака джумлы или написания плагина я так понимаю не получится?
0
Андрей, да, в редакторе не выводятся. Но чем это мешает? Если вам нужно изменить ширину и высоту такого изображения, вы можете сделать это с помощью CSS один раз. После этого все загружаемые таким образом изображения будут сами принимать аккуратный оформленный вид.
Другое дело, если вы для разных изображений всегда задаете размеры вручную. Тогда да - проблема. Но как по мне, это неправильный подход.
0
Скорее не мешает, а непривычно и есть вероятность забыть добавить изображение))
Что касается размеров изображений, то в категории они у меня одинаковой ширины чтобы смотрелось нормально, а в материале произвольные размеры в определенных рамках. Поскольку одновременно человек видит только одну статью, то не вижу в этом проблемы. Размеры автоматом проставляет JDE.
Просто у меня в основном скриншоты с текстом, а они сильно портятся при масштабировании и как все это привести без потерь к одному размеру я не представляю.
Есть еще одна проблема, нельзя добавить атрибуты к таким изображениям. Буду думать как быть...
0
Насколько реально добавить изображения к модулю похожие метки? Там в доступных данных нет изображения или вступительного текста, получается надо делать дополнительные запросы к базе. Пробовал добавить по аналогии к существующим в helper.php, но все ломалось. К тому же его вроде нельзя переопределить.
0
Андрей, думаю, это уже не так просто. Здесь я бы сделал новый модуль на основе модуля похожих статей и модуля похожих меток. От первого получать информацию о статьях, от второго взять способ выбора статей. Как-так. Но без знаний PHP сделать это будет, наверное, сложно.
0
Здравствуйте.
Как сделать, что изображение было кликабельным как и заголовок?
И сортировка:
Ставлю показывать только избранное, ставлю отображать 1 материал. Я просматриваю последний материал с пометкой избранного и модуль мне показывает тот же самый материал.
0
Владимир,

Цитата:

Как сделать, что изображение было кликабельным как и заголовок?

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


Цитата:

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

Логично, если в модуле в поле сортировки задано показывать самые свежие материалы. В этом случае последний и будет всегда выводиться.
0
Добрый день! Подскажите пожалуйста, а как вывести изображение, добавленное в модуль последних новостей первым способом, т.е вставленное перед текстом статьи?
0
Людмила, на момент написания статьи изображение как раз и выводилось в модуле только первым способом. Сейчас у вас не выводится?