Add Images to Joomla's Most Read Module

Display Intro Images in Most Read Module for Joomla

Joomla's "Most Read" module displays the links for your most popular articles.

However, what if you want to make the module more attractive by displaying the article's intro image above each link? Template overrides allow us to make this possible.

I'm going to share with you how to display intro images in the Most Read module.

Step #1. Create a Most read module

  • Go to Extensions > Modules > Add new.
  • Choose "Articles - Most read" module type.
  • Setup the options depending to your needs.
  • Save and close.
Most Read Module for Joomla

This would be the default result. A simple list of links with no images:

Most Read Module for Joomla

Step #2. Create the template override

  1. Go to Extensions
  2. Templates
  3. Templates (on the left)
Most Read Module for Joomla
  • Your template Details and files (in this example I use Protostar)
Most Read Module for Joomla
  • Create overrides
  • mod_articles_popular
Most Read Module for Joomla

This will create a set of files located in templates/your-template/html/mod_articles_popular/

Step #3. Customise the template override

  • Go to Editor tab > mod_articles_popular > default.php
Most Read Module for Joomla

Edit code loaded in the right to your needs. In my example, I'll use the code below:

<div class="row-fluid mostread <?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
  
      <?php $images = json_decode($item->images); ?>
  
    <div class="span4">
      
      <?php if( $images->image_intro ) : ?>
          <img src="/<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
      <?php endif; ?>
      
        <a href="/<?php echo $item->link; ?>">
            <?php echo $item->title; ?></a>
    </div>
  
<?php endforeach; ?>
</div>

  • Click "Save & close" when you're done.

The class row-fluid comes from Bootstrap 2:

<div class="row-fluid mostread <?php echo $moduleclass_sfx; ?>">

I use span4 class in my example (also from Bootstrap) to display 3 articles per row:

<div class="span4">

Use the CSS classes that your template provides, many of them may use Bootstrap 2 or 3. However if you don't need columns, ignore this suggestion.

Check if the intro image exists in the article before to print it:

<?php if( $images->image_intro ) : ?>
    <img src="/<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif; ?>

The intro image is setup in every article on Images and Links > Intro image.

Most Read Module for Joomla

Step #4. End result

Refresh your front-end to see the introduction images above each article's link:

Most Read Module for Joomla