The Joomla! Community Magazine™

Tutorial - The Missing Link to Intro Images in Joomla 2.5

Written by | Thursday, 01 November 2012 00:00 | Published in 2012 November
The new "Images and Links" parameter was a great addition to Joomla 2.5. But have you ever wondered why the blog intro image doesn't link to the full article? In this simple tutorial, I'll show you how to modify your template to add that missing link.

Who loves clicking on pictures? I know I do. So, when it comes to our blog layouts, why is it that our intro image doesn't link to the full article? Sure, we have a title link and read more link, but sometimes that's not enough for image-clickers like us. Maybe this option will be added in a future Joomla update. Until then, you can follow the steps below to add some link love to your template's intro images.

For this example, we'll be looking at the Category Blog layout. I'm using Joomla's default Beez 2 template and the Australian Parks demo site, but these steps should apply for most Joomla 2.5 templates out there.

The Joomla Category Blog Layout

This is our standard category blog layout. I'm using the article's Images and Links parameter to add these intro images, and align them to the left of the text.

   

Create a template override

Step 1: Locate the html folder inside your template, templates/beez_20/html. Next, create these two empty folders inside: com_content/category. (With category nested inside of com_content) If your template is missing the html folder, then create that too.

Step2: Locate this file from the Joomla core: /components/com_content/views/category/tmpl/blog_item.php

Step3: Copy blog_item.php to your template's category folder that you created in Step 1

Now, we can safely edit the blog layout from within the scope of our template, without worrying about the changes being overwritten when you update Joomla*. If these files already exist in your template, then there is no need to copy them from the system files. Just proceed with the next steps below.

Adding the link

Beginner's note: Don't worry if you're not familiar with HTML or PHP. The basic concept is that we're just wrapping a link tag (anchor) around the intro image to make the image clickable. Then we will add some php code inside of the link (the href) to make it work.

Back to the template override file we created from step 3 above, blog_item.php. In this file, search for "image_intro". You're looking for the following block of code, around line 130:

<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); ?>"/>

The code above is the default code for our intro image. Now, we can wrap that image in an HTML anchor tag. For the link, we can use the same PHP snippet found in the title link (around line 28). The final code should look like this:

<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); ?>"/>
</a>

And that's all there is to it! Your intro images should now link to the full article, just like the Read More link and article title does.

Notice that Joomla's Featured blog layouts use a different template file than the Category blog layouts, so they'll require a separate template override. You would copy the system file found here: components/com_content/views/article/featured/default_item.php, and then perform the same steps as above to create the link.

* IMPORTANT: Always make a backup of your changes so you can add them back if they get overwritten by future Joomla or template updates. 

For a general overview on using Images and Links in Joomla 2.5, check out this tutorial video I posted when the feature was first released.

Are you using Joomla's intro image feature an interesting way? Show off your site in the comments below.

Read 155049 times
Tagged under Designers, English
Scott Greenwald

Scott Greenwald

Scott Greenwald runs the popular resource site JoomlaDirect.com. He's a seasoned front-end developer with a background in graphic design. Scott works as a fulltime freelancer from his home office in Tokyo Japan, where he specializes in custom Joomla development and template design for clients.

avatar
Agreed that clicky images are important. I prefer to click a photo as a link than a text link. Most logos on websites do this. ;-)
VOTES:0
avatar
Aleksandar Stojanov Friday, 02 November 2012
I think it won't work with the extra "/" before eople prefer to click on images instead of text links such as titles. Nice work and I'm starting to use it now thanx to you
VOTES:1
avatar
Hi, Can you tell me which extra / i have to remove to make this work ?

cheers,

Andrew
VOTES:0
avatar
The first one (There's 3 / total), it's right after a href="/ <---- that one!
VOTES:0
avatar
Awesome simple to understand tutorial. I have spent some hours doing the same in the past and was wondering why this is not in core feature. Any ways thank you very much for the tutorial Scott Greenwald.
VOTES:0
avatar
Thanks for making this a breeze! FYI: I too had to remove the extra "/" in your suggestion for my site to properly link to the article. So I ended up with this as an example:
slug, $this->item->catid)); ?>">image_intro_caption) .'"';
       endif; ?>
       src="image_intro); ?>" alt="image_intro_alt); ?>"/>
Once I used this format, worked like a charm! :D
VOTES:0
avatar
Thanks a million for your great help! It seems I'm getting smarter each day because of people like you on the net. Only one thing, I changed from your above code is to remove the &quot;/&quot; from
VOTES:0
avatar
Hi , i think i did exactly what is requited but when i click on the images i get that index.php is not found. Am i missing something ?

thanks,

Andrew
VOTES:0
avatar
EXCELLENT tutorial! Thank you! And more thanks for showing how to do it proper with the template override!
VOTES:0
avatar
This work just fine
slug, $this-&gt;item-&gt;catid)); ?&gt;&quot;&gt;	
	   image_intro_caption) .'&quot;';
		endif; ?&gt;
		src=&quot;image_intro); ?&gt;&quot; alt=&quot;image_intro_alt); ?&gt;&quot;/&gt;
Thnx
VOTES:0
avatar
This works. Thnx.
VOTES:0
avatar
Hi there , sorry to ask you again but when the people below comment about the extra / which needs to be removed for the code to work correctly can you actually me what to remove exactly ?

cheers,

Andrew
VOTES:0
avatar
Hi Andrew. I think they mean the "/" before the php echo tags. But depending on how your site is setup, I understand if you may need to remove the slash. I'd suggest trying it with and without the slash to see which version works for you.
VOTES:0
avatar
Great tutorial, Thnk
VOTES:0
avatar
Really intrersting.
But what should the code be if I wanted to link the intro image to a larger version of itself, instead of getting the full article?
Many thanks.
VOTES:0
avatar
I followed the tutorial and had to remove the */* but it also turns the image caption into a link. Is there anyway to change this back to text?
VOTES:0
avatar
Hi,
Firstly, Thanks so much for this article...
It is working like a magic :)

But I need to use this in Featured Articles.. I tried it already but it was just working for Category Block... Is it possible to use it in Featured Articles ??
VOTES:0
avatar
I'm so sorry i missed the last part of article..
Now i can use it in featured articles too...
thanks a lot...
VOTES:0
avatar
Good thank you for share
VOTES:0
avatar
thank you very much for the hint, Scott!!!
just in case somebody is using a template where the html-&gt; com_content-&gt;category-&gt; blog_item.php already exists and refers to another documents (like in the yoo_theme templates) try template/name_of_the_template/layouts/category/blog_item.php and change it there.
VOTES:0
avatar
thanxx for the code ... was faster than figuring it out by myself :)
this is definitely a missing thing for Jommal 3.1 CORE !
VOTES:0
avatar
I understand how to use the override procedure for default views so as not to hack the core joomla code.
What I did was add another field to the article.xml file for the intro text called &quot;target&quot; and set it as a URL type field with URL validation. This file is in &quot;administrator/components/com_content/models/forms&quot;.

But I did not quite understand how to properly override &quot;article.xml&quot; so as not to touch the core joomla code.

My custom template is set up like this: Template_Name/html/com_content/category

That is the folder where &quot;blog_item.php exists.

So I can update joomla without having to reimplement &quot;article.xml&quot; is there a similar way to deal with this situation?

thanks,

Dave
VOTES:0
avatar
Hi thanks for the tutorial. However I can't get it to work. I've tried pretty much everything and still the links does not appear to be working. I tried removing the / but that did not work. Anything else I could try?
VOTES:0
avatar
Hi, thank you for this great little tutorial.
It works as well in Joomla 3.02. (without the &quot;/&quot; before the pho echo tag)
VOTES:0
avatar
Hi,

Just for Joomla 3.1.5 users information : the file content is diferent. You will find this line (around l.34):
item); ?>

I wrapped it in the link like this :
 
item); ?>

And it works :)
Thanks a lot for this tutorial!
VOTES:0
avatar
image_intro) and !empty($images->image_intro)) : ?>
	float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
 
 
img
       image_intro_caption):
             echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
       endif; ?>
       src="/image_intro); ?>" alt="image_intro_alt); ?>"/>
 
 
 

This is how it looks like here... reduced:
img
       image_intro_caption):
             echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
       endif; ?>
       src="/image_intro); ?>" alt="image_intro_alt); ?>"/>

And it does not work. The page loads fine, but not picture is linked.
Joomla 3.1.6
JSN Dome Template

I did (try to) change the original .php and the override in "$templates".
VOTES:0
avatar
Wow, even it's marked as code lot of charactes are "swallowed". :-(
VOTES:0
avatar
Hi Martin

I am sorry for I don't have enough time to see in details your problem (furthermore I'm not really a developer, I mostly design. I try to understand how everything works in Joomla but sometime I just copy and paste stuff I find in forums and tutorials...)

When I managed to use this tutorial, I published the code and explanations here (but the code was "swallowed") and also in the french joomla forum: you can find it here and copy and paste it (if it doesn't work I don't know what to do for you :s ):
forum.joomla.fr/showthread.php?184410-bl...&p=986336#post986336

As all the explainations are in french I give you a commented screenshot here, so you know which parts to copy and paste :


Hope it will help you!
:)
Oh and happy new year!
VOTES:1
avatar
It does not work:


Joomla 3.1.6
VOTES:1
avatar
Alexander Holladay Sunday, 10 March 2013
Came across this by happenstance, you have an etra slash in your code i think

VOTES:0
avatar
Works perfectly. Thanks!!!!
VOTES:0
avatar
Great tutorial. Would this then work with the 'full article image'? I would like to add a link to the full article image when you are viewing the full article. Would we use the same code and just target the 'full article'?
VOTES:0
avatar
Joomla Development Services Monday, 18 March 2013
I think this is the best tutorial info regarding joomla programmer; I really like to read it; and I hope it’s very helpful and useful to me, Thanks for sharing to all; great going.
VOTES:0
avatar
you can simply click on your image then click on link symbol above the article attributes a window will pop up then give the URL of article which you want to show on the click of your image. In the URL give the path of localhost because it is used as external link
VOTES:0
avatar
Hello,

I already have template override by Artisteer. Can you please provide me solution how to change this code to have blog intro images clickable?
params);
 
$article = $component-&gt;article('category', $this-&gt;item, $this-&gt;item-&gt;params);
 
 
 
$params = $article-&gt;getArticleViewParameters();
 
if (strlen($article-&gt;title)) {
 
    $params['header-text'] = $this-&gt;escape($article-&gt;title);
 
    if (strlen($article-&gt;titleLink))
 
        $params['header-link'] = $article-&gt;titleLink;
 
}
 
// Change the order of &quot;&quot;if&quot;&quot; statements to change the order of article metadata header items.
if (strlen($article-&gt;created))
 
    $params['metadata-header-icons'][] = &quot;&quot; . $article-&gt;createdDateInfo($article-&gt;created) . &quot;&quot;;
 
if (strlen($article-&gt;modified))
 
    $params['metadata-header-icons'][] = &quot;&quot; . $article-&gt;modifiedDateInfo($article-&gt;modified) . &quot;&quot;;
 
if (strlen($article-&gt;published))
 
    $params['metadata-header-icons'][] = &quot;&quot; . $article-&gt;publishedDateInfo($article-&gt;published) . &quot;&quot;;
 
if (strlen($article-&gt;hits))
 
    $params['metadata-header-icons'][] = $article-&gt;hitsInfo($article-&gt;hits);
 
// Build article content
 
$content = '';
 
if (!$article-&gt;introVisible)
 
    $content .= $article-&gt;event('afterDisplayTitle');
 
$content .= $article-&gt;event('beforeDisplayContent');
 
if (strlen($article-&gt;images['intro']['image']))
 
    $content .= $article-&gt;image($article-&gt;images['intro']);
 
$content .= $article-&gt;intro(artxBalanceTags($article-&gt;intro));
 
if (strlen($article-&gt;readmore))
 
    $content .= $article-&gt;readmore($article-&gt;readmore, $article-&gt;readmoreLink);
 
$content .= $article-&gt;event('afterDisplayContent');
 
$params['content'] = $content;
 
 
 
// Render article
 
echo $article-&gt;article($params);
 
VOTES:0
avatar
I would also like an Artisteer template override
VOTES:0
avatar
Hi

I am also faced with the same issue as the last post. Artisteer is creating the above code. I have tried several ways of inserting extra code to make the intro images linkable but with no success.

Does anyone have a possible solution to this one?
VOTES:0
avatar
Great Tutorial...very well explained and really helped me.
I had to remove the slash / in the beginning of the code but the comments helped too.

Keep up the good work!
VOTES:0
avatar
This is awesome! Is there a way in which I would change this to link to an external website instead?
VOTES:0
avatar
I still wonder why this is not an option in the core...
VOTES:1
avatar
Thanks, the core developers probably just have forgotten this :). It ís essential.
VOTES:0
avatar
If you have Gantry installed on Joomla 3.1, the overrides are in a different location. You will want to navigate to plugins/system/gantry/overrides/3.0/2.5/com_content/category/blog_item.php and wrap the intro image with the read more link code.
item->slug, $this->item->catid)); ?>
img
        image_intro_caption):
            echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
        endif; ?>
        src="image_intro); ?>" alt="image_intro_alt); ?>"/>
VOTES:1
avatar
Hi everyone! Sorry but It doesn't work for me.
I am using protostar theme.
Joomla Version: 3.1.5

Can you help me please? This my blog_item.php line: 34
item); ?>

Thanks
VOTES:0
avatar
How exactly did you add the intro image? I've been trying for a couple days now but I still don't have any images
VOTES:0
avatar
Hi,
I am trying to do this in Joomla 3.2, but when I open up (from joomla core)
/components/com_content/views/category/tmpl/blog_item.php
I do not find any code relating to intro_caption or img.

Have tried wrapping a href code into
/components/com_content/views/featured/tmpl/default_item.php
but cannot seem to get it to work there either.

FROM
"/>

TO
image_intro_caption):
      echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
   endif; ?>
   src="image_intro); ?>" alt="image_intro_alt); ?>"/>

Would really love a solution...
Any suggestions?
VOTES:0
avatar
Hello again...
Code cam out wrong so am resposting....

Have tried wrapping a href code into
/components/com_content/views/featured/tmpl/default_item.php
but cannot seem to get it to work there either.

FROM
"/>

TO

image_intro_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
endif; ?>
src="image_intro); ?>" alt="image_intro_alt); ?>"/>
VOTES:0
avatar
hi,

maybe you can help. If you go to the site I am putting together. unitylatino.com

there is an image at the bottom called "ministries"

If you click on it, you will see how it lays out. however, if you click About at the top then go down to the same image (linked to the same hidden menu item) it displays in the correct category blog layout.

the only difference is the images in the about page are in the footer. The image in the front page is simply another article in its own category blog.

I looked at your article here and I'm not sure it helped. any ideas?
VOTES:0
avatar
Please ignore.... I linked it through joomlas menu selector and it worked.
VOTES:0
avatar
Hallo Friends :-)

I had the problem, that after updating the code, it was half link missing, while image was clickable. With "/" or without it.
I just put the www.address.com instead "/" and it works.

not bad as for total newbie, huh? ;-)

it makes me so happy.

Cheers
VOTES:0
avatar
Works nice! But we forgot to apply this on featured articles view... Not difficult: same treatment, different file: components/com_content/views/featured/tmpl/default_item.php... the intro image section is almost the same as in the blog_item thing. Beeyootiful!
VOTES:0
avatar
Is there an Article Manager template design access/setting to add more than "Link A," "Liink B," and "Link C" - such that an admin can easily make more "Link x" insertions available?
VOTES:1
avatar
This is great functionality for any blog. How can I do this in J3.3 though? the code isn't the same as J2.5.
VOTES:0
avatar
Same problem here. Using J3.3.
VOTES:0
avatar
Thanks for the tutorial! It also works in J3.3, is just a little different, but the idea is the same.
VOTES:0

Language Switcher

Issue NOV 2012

Recommend us on Google+