Добавляем ссылки к изображениям материалов в блоге

В Joomla! 2.5 значительно доработали стандартный компонент материалов (com_content), однако некоторых функций (по крайней мере, лично мне) не хватает. Одна из таких функций это «кликабельные» изображения материалов. Может некоторым такая функция покажется лишней, однако Я лично сталкивался с посетителями, которые безрезультатно кликали по изображнию статьи на главной или в блоге, надеясь тем самым перейти в материал и прочитать полный текст статьи. В конце концов сайты мы делаем для своих посетителей, по крайней мере свои проекты, и это заставило меня задуматься о реализации нехитрого функционала кликабельных изображений материалов Joomla! 2.5, не прибегая к сторонним расширениям…

Я встречал плагины, которые решают подобные проблемы, но на тот момент помимо необходимого мне функционала они еще добавляли Lightbox и проч., что мне совершенно не было нужно, поэтому здесь Я опишу, как нехитрой правкой кода пары файлов можно добиться необходимого функционала «кликабельных» изображений, ссылки которых по умолчанию будут вести на соответствующий материал. Сразу хочу заметить, что данная функция будет работать только для изображений материалов выбранных в поле Изображение для вступительного текста материала, находящемся в блоке Изображения и ссылки справа от редактора.

Итак нам понадобятся два файла: 

  • /templates/your_template/html/com_content/category/blog_item.php
  • /templates/your_template/html/com_content/featured/default_item.php

Где «your_template» — Ваш шаблон. Обратите внимание, что этих файлов может не оказаться, в зависимости от шаблона. В таком случае Я рекомендую взять их из 

  • /components/com_content/views/category/tmpl/blog_item.php
  • /components/com_content/views/featured/tmpl/default_item.php

… и скопировать в папки с шаблоном соответственно. Так Вы не утеряете изменения после обновления движка.

Теперь в файле /templates/your_template/html/com_content/category/blog_item.php мы находим вот такой код:

 <?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro))? $params->get('float_intro') : $images->float_intro; ?>

<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<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); ?>"/>
</div>
<?php endif; ?>

 И заменяем его на следующий:

 <?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>"><a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>" >
<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:420px;height:420px;"/>
</div></a>
<?php endif; ?>

В файле /templates/your_template/html/com_content/featured/default_item.php практически идентичный код файла blog_item.php заменям на следующий:

 <?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
<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:420px;height:420px;"/>
</div>
<?php endif; ?>

 Вот собственно и все. Ссылки материалов в блогах категорий теперь «кликабельны» и ведут на материалы, к которым они и относятся.

Здесь же мы указываем размер выводимых изображений (style=«width:420px;height:420px;») Эту часть кода можно убрать и изображения будут выводиться в оригинальном размере, однако в блоге, скорее всего, получится каша.

Если подробнее, то в блоке изображения материала мы выводим не изображение, а ссылку с изображением:

<a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>" ><img...

Ссылку формируем стандартными средствами Joomla! 2.5:

href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>"

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

style="width:420px;height:420px;"

Источник

13 комментариев
Неплохо было было прокомментировать приведенные блоки кода, чтобы читатель не только бездумно их копировал и вставлял себе на страницу, но и понимал что именно он делает и как это работает.
done.
Спасибо ;)