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

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>

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