MIDAV.RU

MIDAV.RU

Учусь делать сайты в свободное время .

Добавляем вывод рисунка в модуль Новости , Joomla 2.5

Просмотров: 40097Комментарии: 29
Joomla

В Joomla 2.5  при создании статей появилась возможность добавлять изображения к тексту статьи . Можно указать разные изображения для краткого и полного текста материала .

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

Ну и заодно уж выведем краткий анонс текста , знаков так сто .

Модуль уже получает все необходимые нам данные статьи . Нужно только обработать эти данные и вывести в нужном нам месте .

Чтобы не трогать системные файлы , которые могут быть затерты при обновлении системы . Создадим в своем шаблоне файл templates/ваш шаблон/html/mod_articles_latest/default2.php . Дальнейшие эксперименты будем проводить с этим файлом .

Шаблон модуля получает данные в виде объекта item . Нам будут нужны из этого объекта свойства : title, introtext, images.

Подготовим для вывода текст новости . Вырежем из него все html теги и обрежем до ста знаков .

$introtext = strip_tags($item->introtext) ; // вырезаем из текста html теги
$introtext = mb_substr($introtext,0,100,'utf-8'); // обрезаем текст

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

$images = json_decode($item->images) ; // декодируем данные о рисунке

Конечный код файла default2.php будет таким :

<?php
/**
 * @package		Joomla.Site
 * @subpackage	mod_articles_latest
 * @copyright	Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */
// no direct access
defined('_JEXEC') or die;
?>
<ul class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) :  ?>
<?php
	$images = json_decode($item->images) ; // декодируем данные о рисунке , на выходе получаем объект
	$introtext = strip_tags($item->introtext) ; // вырезаем из текста html теги
	$introtext = mb_substr($introtext,0,100,'utf-8'); // обрезаем текст
?>
	<li>
		<a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
		<?php  if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
		<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
			<img<?php if ($images->image_intro_caption) :echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';endif; ?> src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" style="width:200px;" />
		
		<?php endif; ?>
	<?php echo $introtext.' ...'; ?>
</li>
<?php endforeach; ?>
</ul>

Чтобы модуль стал использовать наш файл , надо указать его в настройках модуля . Указываем в качестве альтернативного макета наш файл default2.php

mod_latest_maket.jpg

И наслаждаемся результатом smile

Комментариев: 29 RSS

test page

1 Аноним 26-04-2012 16:54

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

test page

2 Vadim 29-04-2012 13:42

Спасибо. То, что нужно было.

Не за что . Хорошо , что получилось grin

test page

3 Андрей 10-05-2012 16:43

Не подскажете, чего не проходит проверку синтаксиса на 23 строчке?

Parse error: syntax error, unexpected '

test page

4 Vadim 12-05-2012 10:28

Не подскажете, чего не проходит проверку синтаксиса на 23 строчке?
Parse error: syntax error, unexpected '

Ну что то пропущено . Приведите код ошибки , и саму строчку в которой возникает ошибка .

Наверное копировали напрямую из окошка кода, там была ошибочка , да . Сейчас подправил , вроде бы нормально все .

test page

5 Евгений 13-05-2012 19:36

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

http://imglink.ru/pictures/13-05-12/cee5cc938ec5e9d0ac8fabfd40694d9e.jpg

test page test page

7 Vadim 13-05-2012 22:04

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

Очень странно . Ее сразу не было или потом пропала ? grin

Попробуйте скачать дистрибьютив с joomla.org и заново установить . Без всяких дополнительных компонентов и плагинов . И посмотрите , может быть появится заветная вкладка grin

test page

8 Вячеслав 30-05-2012 23:09

При изменении меню шаблона http://livedemo00.template-help.com/wordpress_33202/ пропал раздел Latest Topics на Главной. Главная страница в конструкторе соответствует типу меню Ссылки » Список категорий ссылок. Может, подскажите, в каком направлении надо двигаться. При добавлении ?тр=1 к адресу позиции нет. Значит, это не модуль?com_content?Каким путем он выводится на главную?Может, какие-то параметры надо отследить?

test page

9 Vadim 31-05-2012 09:34

При изменении меню шаблона http://livedemo00.template-help.com/wordpress_33202/

Как я понимаю это шаблон для Wordpress ? Но тогда при чем тут Joomla ? grin

test page

10 Комментатор 1 31-05-2012 20:29

У меня он на Джумла работает.Разработчик под мои требования приспособил его под джумла. И данный раздел работал.Просто исполнитель оказался недобросовестным и я с ним "завязал"

test page

11 Vadim 31-05-2012 21:33

соответствует типу меню Ссылки » Список категорий ссылок
ohh

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

А список категорий ссылок к com_content не относится . Это компонент Ссылки .

test page

12 Gess 11-02-2013 20:00

Что-то ничего не выходит. У меня Джумла 2.5.8, шаблон Nano2 от Yootheme. Пробовал свежую установку на Денвере. Ничего не происходит, ошибок, правда, тоже не выдает. Для чистоты эксперимента пробовал на /modules/mod_articles_latest/tmpl/default.php. Без результата.

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

test page

13 Vadim 12-02-2013 00:13

Что-то ничего не выходит.

Странно , если делаете правки прямо в файлах модуля , то не важно какой шаблон . Все должно работать .

test page

14 Игорь 13-02-2013 18:12

Вадим спасибо - все супер, все работает. А можно ли это реализовать для поиска ? (чтобы поиск выводился с картинками материала)

test page

15 Vadim 14-02-2013 01:07

А можно ли это реализовать для поиска ? (чтобы поиск выводился с картинками материала)

Нужно будет править плагин поиска . Файл \plugins\search\content\content.php . Надо добавить в запрос к базе выборку поля images . Строка 153 .

$query->select('a.title AS title, a.metadesc, a.metakey, a.created AS created, a.images');

И тогда в выводе будут доступны картинки материала .

Дальше действуем по аналогии .

Создаем в своем шаблоне файл \templates\ваш шаблон\html\com_search\search\default_results.php

Берем его отсюда \components\com_search\views\search\tmpl\ . Можно скопировать всю папку .

И в этом файле уже выводим в нужном месте картинку .

Не забываем , что вносили изменения в файл плагина , и при обновлении системы эти изменения затрутся . Поэтому после обновления , вносим изменения в файл плагина снова smile

test page

16 Игорь 14-02-2013 14:45

Вадим, вы гуру ))) Спасибо огромное - все работает! Пишите новости чаще.wink

test page

17 Vadim 14-02-2013 23:44

Хорошо что получилось .

А до гуру мне еще очень и очень далеко smile

test page

18 TSa 15-02-2013 08:50

Поставьте пробел перед src в коде:

............;endif; ?>src="

test page

19 Дмитрий 20-02-2013 04:00

А подскажите пожалуйста, как сделать так, чтобы первая новость (объект) выводился с текстом и картинкой, а остальные просто списком? Хотел было цикл встроить туда, но как то не соображу куда его прикрутить и где взять число конечных элементов. (в какой переменной они)

test page

20 Vadim 21-02-2013 22:44

чтобы первая новость (объект) выводился с текстом и картинкой, а остальные просто списком? Хотел было цикл встроить туда, но как то не соображу куда его прикрутить

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

Например так :

<?php
/**
 * @package  Joomla.Site
 * @subpackage mod_articles_latest
 * @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license  GNU General Public License version 2 or later; see LICENSE.txt
 */
// no direct access
defined('_JEXEC') or die;
//jbdump($list);
$i = 1;
?>
<?php foreach ($list as $item) :  ?>
<?php if ($i == 1) : ?>
 <?php
  $images = json_decode($item->images) ; // декодируем данные о рисунке , на выходе получаем объект
  $introtext = strip_tags($item->introtext) ; // вырезаем из текста html теги
  $introtext = mb_substr($introtext,0,100,'utf-8'); // обрезаем текст
 ?>
  
   <a >link; ?>"><?php echo $item->title; ?></a>
   <?php  if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
   <?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
    <img >image_intro_caption) :echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';endif; ?> src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"  />
   
   <?php endif; ?>
  <?php echo $introtext.' ...'; ?>
 
<?php else : ?>
 
  <a >link; ?>">
   <?php echo $item->title; ?></a>
 
<?php endif ; ?>
<?php $i++ ; ?>
<?php endforeach; ?>
test page

21 Дмитрий 22-02-2013 04:17

Спасибо большое за пример. На днях окультурю его и напишу результат (покажу пример вывода того, что задумывалось). Мне нужен список просто в виде абзацев, без . Может кому пригодиться.

test page

22 Дмитрий 28-02-2013 04:27

Спасибо большое Вадиму (Vadim). Получилось. Финальный код вот такой:

<?php
/**
 * @package  Joomla.Site
 * @subpackage mod_articles_latest
 * @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license  GNU General Public License version 2 or later; see LICENSE.txt
 */
// no direct access
defined('_JEXEC') or die;
//jbdump($list);
$i = 1;
?>
<?php foreach ($list as $item) :  ?>
<?php if ($i == 1) : ?>
 <?php
  $images = json_decode($item->images) ; // декодируем данные о рисунке , на выходе получаем объект
  $introtext = strip_tags($item->introtext) ; // вырезаем из текста html теги
 $introtext = mb_substr($introtext,0,150,'utf-8'); // обрезаем текст
 ?>
  
   link; ?>">
   <?php  if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
   <?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
    <img  >image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"  /><?php endif; ?>
   <?php echo $item->title; ?>
  <?php echo $introtext.' ...'; ?>
 
<?php else : ?>
 <?php
  $images = json_decode($item->images) ; // декодируем данные о рисунке , на выходе получаем объект
  //$introtext = strip_tags($item->introtext) ; // вырезаем из текста html теги
  //$introtext = mb_substr($introtext,0,100,'utf-8'); // обрезаем текст
 ?>
 
   <?php  if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
   <?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
    <img  >image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"  /> 
   <?php endif; ?><?php echo $item->title; ?>
   
<?php endif ; ?>
<?php $i++ ; ?>
<?php endforeach; ?>

Стиль для картинок с подсветкой задан так:

#light h2 {
line-height: 14pt;
margin: 0;
font-size: 12pt;}
 
#light img {
 margin: 5px;
 float: left;
 opacity: 0.79;
 border: solid 1px #fff;
 
 /*transition*/
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 
 /*отражение*/
 /* -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); */
}
 
 
#light img:hover {  
   opacity: 1;
 
   /*отражение*/
/* -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); */
 
   /*свечение*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

Отражение закомментировал поскольку мне оно мешает. Остальные стили еще чуть причесать и нормально будет. Хотя и так не плохо уже.

Подсветку посмотрел в статье www.rusdigi.org/css3/ehffekty-pri-navedenii-5-gotovykh-variantov-na-css3.html (последний пример).

Реально как выглядит модуль можно увидеть на главной странице hochuvitaliu.ru (там их 6 штук внизу)

test page

23 konkoord 28-03-2013 18:16

Вадим, спасибо за статью!!! Могли бы вы выложить полный код файла default.php для неопытных пользователей - и пошагово сказать где что поменять - прописать, а то многим (в том числе и мне) не понятно, например - если создать папку у себя в шаблоне и скопировать default.php туда, то как туда будет система обращаться - ведь нужно же путь где то прописать к этому файлу. вообщем много людей только начинающих, очень прошу, распишите немножко поподробней, без этого не получается. Спасибо. (ps.вопрос повторю не из за спама, а зарегившись просто)

test page

24 Vadim 01-04-2013 12:27

konkoord Немного переписал статью , поподробнее smile Добавил полный код файла шаблона модуля .

test page

25 konkoord 10-04-2013 23:49

огромное спасибо, все получилось, и дало немного представления как все это устроено. пишите больше, очень полезно

test page

26 konkoord 13-04-2013 12:49

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

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

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

test page

27 konkoord 17-04-2013 15:49

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

//$image - исходное изображение, созданное функцией imagecreatefrompng или подобными

//$width - ширина уменьшенного изображения

//$height - высота уменьшенного изображения

function GetResampledImage($image, $width, $height)

{

//Сохраняем длину и ширину исходного изображения

$widthOriginal = imagesx($image);

$heightOriginal = imagesy($image);

//Объявляем переменные для размеров пропорционально сжатого изображения (без обрезки)

//Изначально приравниваем их к размерам уменьшенного изображения

$widthSampled = $width ;

$heightSampled = $height;

//Вычисляем коэффициенты соотношения сторон уменьшенного и исходного изображений

$aspect = $height / (float)$width;

$aspectOriginal = $heightOriginal / (float)$widthOriginal;

//Вычисляем соотношение коэффициентов

$aspectAspect = $aspect / $aspectOriginal;

//Объявляем переменные для смещения изображения (нужно для обрезки)

$dX = 0;

$dY = 0;

//Вычисляем размеры пропорционально сжатого изображения (без обрезки) и смещение изображения

if($aspectAspect > 1)

{

$widthSampled *= $aspectAspect;

$dX = ($widthSampled - $width) / 2;

}

else

{

$heightSampled /= $aspectAspect;

$dY = ($heightSampled - $height) / 2;

}

//Создаём прозрачное изображение для вывода уменьшенного изображения

$imageResult = imagecreatetruecolor($width, $height);

imagesavealpha($imageResult, true);

imagefill($imageResult, 0, 0, imagecolorallocatealpha($imageResult, 0, 0, 0, 127));

//Создаём прозрачное изображение для хранения пропорционально сжатого изображения

$imageSampled = imagecreatetruecolor($widthSampled, $heightSampled);

imagesavealpha($imageSampled, true);

imagefill($imageSampled, 0, 0, imagecolorallocatealpha($imageSampled, 0, 0, 0, 127));

//Пропорционально сжимаем исходное изображение

imagecopyresampled($imageSampled, $image, 0, 0, 0, 0, $widthSampled, $heightSampled, $widthOriginal, $heightOriginal);

//Обрезаем пропорционально сжатое изображение

imagecopy($imageResult, $imageSampled, 0, 0, $dX, $dY, $widthSampled, $heightSampled);

return $imageResult;

}

test page

28 Anna 11-12-2013 15:24

Вадим, как можно еще вывести и категорию, откуда взята новость?

test page

29 Ярослав 15-07-2016 14:04

Супер!!!

Очень помогло, переменные работают даже на джумле 3.6!)

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question


Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.

     

  

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

(обязательно)

http://www.vseafery.ru/afery-v-internete/alco-taboo-alko-tabu-kompleks-vorostva-vashikh-deneg