Joomla intro image as read more link

Question

I want to make the joomla articles intro image to behave like the read more, and the title link. So the user clicks the image, and the article loads.

I'm not an PHP expert but maybe this is the readmore links code:

<a href="<?php echo $this->item->readmore_link; ?>" class="button<?php echo $this->item->params->get('pageclass_sfx'); ?>">
        <?php if ($this->item->readmore_register) :
            echo JText::_('Register to read more...');
        elseif ($readmore = $this->item->params->get('readmore')) :
            echo $readmore;
        else :
                echo JText::_("Read Article");
        endif; ?></a>

This is what i want to do with every intro image on my joomla site. Thanks !

Answer 1

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.

    <?php $link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>
<a href="<?php echo $link; ?>"><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>

Answer 2

for Joomla 2.5:

in your override for _item.php (Location: yourtemplate\html\mod_articles_news\item.php) place the following line:

<?php if ($params->get('image')) : ?>
    <?php  $images = json_decode($item->images); ?>
    <?php  if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
        <a href="<?php echo $item->link;?>"><img src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo   htmlspecialchars($images->image_intro_alt); ?>"/></a>
    <?php endif; ?>
<?php endif; ?>

Place it there where you would like it to show up For example after:

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

Your intro image has become a link now. the isset part, makes sure that if a viewer uses Internet Explorer, it doesn't show up a small red cross box.

Just for the information: in blog_item.php you can find an example code how it's shown up in an article. Here you can also find the code for imagefloat etc.

<?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; ?>

Answer 3

So let me start by explaining what the code that you've posted above does. The entire block of code generates one link: there are a bunch of if statements that are determined based off some settings. For example, if you have set that people need to register in order to read more, the link will say "Register to read more..."

The part that we're interested in here, however, since we want to turn images into links, is the URL that we want the images to link to. This is right in the first line:

<a href="<?php echo $this->item->readmore_link; ?>"

so we know that the URL is provided dynamically thanks to $item->item->readmore_link and all this code is doing is echoing it into the HTML.

All that's left is to edit your Joomla template of the page on which you have your images (probably the same file you took this code from). It looks like this should be part of a greater PHP loop, which loops through all the posts. Somewhere above where you found this code, should be code for the intro image that goes along with that post.

I'm not sure what it'll look like, it could be a <img src="<? stuff here; ?> /> or it could be dynamically generated. Keep reading. If you're still not sure where to find it at the end, edit your post with the full code of the template where you got the above snipping from. Regardless of what it looks like, it is referred to as <WHATEVER IMAGE CODE YOU FOUND ABOVE> in the following step:

You have to wrap that image with "a" tags so that it looks like the following:

<a href="<?php echo $this->item->readmore_link; ?>"> <WHATEVER IMAGE CODE YOU FOUND ABOVE> </a>

That should do it. Let me know if you have any trouble, I'll be more than happy to make my post more specific if you can provide more detailed information, but I've tried to explain it well enough that you should be able to figure it out with a couple tries.

Answer 4

As you stated you are not a PHP expert, it sounds like your best bet will be to use a Joomla extension that has similar functionality to what you want.

I believe mod_minifrontpage will work for what you need. It allows you to display a list of articles, and it generates thumbnails for those articles based on the first image to be referenced.

Answer 5

There are article intro images in J, since 1.7.5 and now in latest 2.5.3 what you need is change the defaults for component_content,

you can do it 2 ways, editing views in yourinstall/components/com_content/views/

or use template overrides , you first need to know if your template IS using overrides otherwise if you edit component views in the component itself you will not see changes.

to verify this , go to site_name/templates/template_name/html folder and check if there is folder name com_content ,

if that is the case than your template is using overrides and any edits should be done trough there not through component

now to the actual code

this is in components\com_content\views\featured\tmpl\default_item.php ( THIS I DEFAULT FRONTPAGE ARTICLE VIEW)

<?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; ?>

all you would need to do is wrap a element around IMG tag with readmore link like this

<a href="<?php echo $this->item->readmore_link; ?>">

<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>

DO NOT forget that if there is template override for com_content you wold need to edit the featured/default_item.php inside it

Answer 6

Just resolved it!

your way of thinking helped me. Thank you!

here's my code:

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

    <?php
        $images = json_decode($item->images);
        if (isset($images->image_intro) and !empty($images->image_intro)) {
            $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro;
            $class = (htmlspecialchars($imgfloat) != 'none') ? ' class="size-auto align-'.htmlspecialchars($imgfloat).'"' : ' class="size-auto"';
            $title = ($images->image_intro_caption) ? ' title="'.htmlspecialchars($images->image_intro_caption).'"' : '';
            echo '<img'.$class.$title.' src="'.htmlspecialchars($images->image_intro).'" alt="'.htmlspecialchars($images->image_intro_alt).'" />';
        }

        echo $this->item->introtext;

    ?>

    </a>