FW Gallery
Photo & video gallery with tags, ratings and front-end management.
Demo Website Product Page

Images display in search results

How to display images in search results

In this tutorial, we will learn how to display images in Joomla search results. To make it happen, you need to create a template override for your search results page. To learn how to do this, follow the steps below:

  1. Log into your Joomla admin panel.

  2. Locate Extensions dropdown in the top menu of your Joomla control panel and click on it.

  3. Choose Templates => Templates from the list.

  4. Find your active template in the list and click on it.

  5. Locate Editor tab in the left section of the screen.

  6. Choose HTML=>com_search menu item. If there is no com_search menu item in the list, proceed to the step 7.

  1. Locate Create Overrides tab.

  2. Locate Components column and choose com_search=>search. As a result, a template override page will be created.

  1. Go back to the Editor tab.

  2. Follow HTML=>com_search=>search=>default results direction. As a result, a page code appears in the right section of the screen.

  3. Find the following string in the code:

<?php foreach ($this->results as $result) : ?>
  1. Paste the following string next to it:
<?php if (!empty($result->image)) { ?><div style="float: left;margin: 5px 10px;"><img src="/<?php echo $this->escape($result->image); ?>" alt="" /></div><?php } ?> 
  1. Find the following string in the end:
<?php endforeach; ?>
  1. Past the following string before it:
 <?php if (!empty($result->image)) { ?><div style="clear:both"></div><?php } ?>
  1. Click Save. Your screen should look similar to the screenshot below:

Go to the front-end to check the result.