Showing images in the search results in Joomla 4.1 and above
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.
By enabling, it will show the images in the search results.
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.
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”.
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.