Adding Images to Latest Articles module

Question

I am looking to display my latest articles on my joomla website. Using the module latest articles I can display the articles titles but I am wondering is there a way to display an image along with the title of the article. At the moment it all looks very bland and boring.

Answer 1

You're going to need to learn how to use template overrides for this (or find ones other people have made). It's probably the easiest way into Joomla, and a good way to gradually learn (at least a bit of) PHP; apologies if this isn't the case, but I'm going to assume you aren't overly familiar with it just in case. For the record, the documents for this are here - they're worth reading if you want to understand a bit more, but they can be quite impenetrable at first.

I've whipped you up a quick version though, you can use it if you want. For these examples I'll use protostar, but replace protostar with whatever the name of your template is.

As you want to override how the Latest Articles module is displayed, the file you need to find is:

/yourJoomlaInstall/modules/mod_articles_latest/tmpl/default.php

You need to copy this file into a new folder in your templates folder.

Inside your templates folder create a folder called html if there isn't one already, and inside that /html folder you have to create a folder with the same name as the module you're overriding (in this case mod_articles_latest). For example:

*/yourJoomlaInstall/templates/protostar/tmpl/html/mod_articles_latest/

Now copy the default.php file from the module's folder into the one you just created for it in your templates folder.

Time to edit it. I recommend getting Notepad++ if you don't have anything better (if you don't know if you have anything better, that means you don't).

I've pasted the new code below. If you copy all of it and paste it over all the existing code in your template's copy of default.php it should work. You'll get the Intro Images from your articles displayed under their link, but if you want to style it a bit more it'll be worth trying to understand at least some of it (for example, you can make the picture a link too by putting it inside the tags).

I've put in some PHP comments to show you the changes I made and what they do.

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_latest
 *
 * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
?>
<ul class="latestnews<?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) :  ?>
    <li itemscope itemtype="https://schema.org/Article">
        <a href="<?php echo $item->link; ?>" itemprop="url">
            <span itemprop="name">
                <?php echo $item->title; ?>
            </span>
        </a>

        <?php // Inserted code starts here ?>

        <?php // This gets the image data associated with the article and processes it so PHP can use it properly. ?>
        <?php $images = json_decode($item->images); ?>

        <?php // This checks the Intro Image exists and isn't empty. ?>
        <?php if (isset($images->image_intro) && !empty($images->image_intro)) : ?>

            <?php // This displays it. ?>
            <div class="thumbnail item-image">
                <img src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" itemprop="image"/>
            </div>

        <?php endif; ?>

        <?php // Inserted code ends ?>

    </li>
<?php endforeach; ?>
</ul>