Showing images in the search results in Joomla 4.1 and above

Add images to the smart search results

Joomla 4.1 brought a new feature into the core. Now you can show images in the search results, just by configuring the Smart Search component appropriately. Do note that the same settings can be found in JFilters as well.

So what we describe here, can be applied to the JFilters component as well.

In a previous post we covered how images can be added in the search results by modifying the results layout. Now we will do that by just using the newly introduced settings.

Lets dig into it right away.

Show the results images

If you go to the Options of the Smart Search component, you will find a setting named “Result Image”.
The same setting can be found in the JFilters' Options, under the Results tab.

Smart search results image

By enabling, it will show the images in the search results.

smart search results with images

If you updated your site from Joomla 4.0, you have to clear your Smart Search Index and Index your site again, to see this feature working.

The same settings can be found under the menu item for the Smart Search results (Smart Search > Search) and the menu item for the JFilters results (Jfilters > Results). So this feature can be used per menu item as well.

Adding classes and positioning the images

Now, beyond the display of the images, you can set a specific html classes using the “Image Class” setting.

Bootstrap has a series of classes which among others, allows you to define the position and the spacing of an element.

Typical bootstrap classes for positioning are:


float-start

* Will put the image at the start of the result block.


float-end

* Will put the image at the end of the result block.

Smart Search results image class setting

Smart search results image left

In case your image's height exceed the result text,  your results may appear distorted. You will have to use some additional css to fix it.

Using the image as a link to the result article

Finally the image can be a link to the result article itself. You can do that by enabling the setting “Linked Image”.

Smart Search results image link setting

In previous Joomla versions, the only links to the actual result were the result title and the result URL. Having the images as a link can be more friendly to your users.

Conclusion

The search results can now be more appealing using exclusively native features, introduced in Joomla 4.1. You can now display the article images, style them accordingly and use them as a links to the article, just by utilizing the respective settings.

Follow us and get notified of our latest blog posts

Our favorite topics are about the Joomla's Custom Fields, Joomla Search and Filtering