@font-face {
    font-family: 'bradley_hand_itc_ttregular';
    src: url('../fonts/bradhi-webfont.woff2') format('woff2'),
         url('../fonts/bradhi-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


h1,h2,h3,h4,h5,h6 {
  font-family: bradley_hand_itc_ttregular !important;
  color: #800000;
}

h1 {  
  font-size: 42px;
}

.verberg {
  display: none;
}

s
Authors
Newsletter
About
FAQ

 10 minutes reading time (1903 words)
Customizing Joomla 4's Smart Search Results Pages with Images, Custom Fields and a new Layout
 March  Marc Dechèvre  Sunday, 20 March 2022  2806 Hits  1 Comment
March-SmartSearch
In this article, Marc Dechèvre shows us how to customize the Results Page of Smart Search, using images, custom fields and a new layout.

1. Introduction
This article was presented at the February "Joomla NXT" session coordonated by Techjoomla

Too lazy to read? Feel free to see the video (59:09) :)

2. The goal of this presentation
At this end of this session we will be able to have such a Smart Search Results Page where

Intro Image is displayed for each Article
a Custom Field is displayed using its Options
a Custom Field is displayed by forcing an Alternate Layout (in this case a carousel for a CF of Type Subform)
the Results are displayed as Cards (and not as a simple Unordered List)
final

3. J4.1 new features
3.1. The big new features
The big announcements around J4.1 typically focus on the “big features” like

Task Scheduler
Child Templates
Accessibility Checker
Syntax Highlighting in TinyMCE
Inline Help
Sources:

https://www.joomla.org/announcements/release-news/5855-joomla-4–1–0-stable-new-standards-in-accessible-website-design.html
https://domorewithcore.com/new-in-joomla-4–1
3.2. Note the new path for the “template media folders”
If you either use

a custom CSS file
an Override or an Alternate Layout
either in your original Template
or within a Child Template the following will interest you
As you might know, with the introduction of Child Templates in J4.1 the path to the “template media folders” (css, images, js and scss) changes

from templates/cassiopeia/ in J4.0
to media/templates/site/cassiopeia/ in J4.1
for Cassiopeia (and similarly for all Templates which are or will be compatible with Child Templates).

Good to know: if you created for example a templates/cassiopeia/css/user.css in J4.0, once you update to J4.1 the file will be automagically moved to media/templates/site/cassiopeia/css/user.css.

So you don’t have to worry about this, Joomla (Dimitris Grammatikogiannis in the present case) got you covered 😉

3.3. More discrete features – but nonetheless super interesting
But there are also more discrete features… like Adding Images in the Smart Search Results Pages

See for example the section “Images in search results” of this nice overview of the new features of J4.1 made by Jeroen Moolenschot

original version in NL: https://www.joomill.nl/blog/wat-is-nieuw-in-joomla-4–1
translation in FR: https://www.joomla.fr/actualites/quoi-de-neuf-dans-joomla-4–1
automatic translation in EN: https://www-joomill-nl.translate.goog/blog/wat-is-nieuw-in-joomla-4–1?_x_tr_sl=nl&_x_tr_tl=en&_x_tr_hl=fr&_x_tr_pto=wapp
We owe this new feature to Sakis Terzis aka Blue-Coder and I am very grateful to him!

4. Adding the Intro Image in the Smart Search Results Pages
Did you know that you can customize independently the Layout for Articles, Contacts etc in the Smart Search Results Pages (com_finder)?

See in the Official Documentation how to achieve this:

https://docs.joomla.org/Customising_the_Smart_Search_results_page

Note: most of my J3 websites were using com_search (classical search) and not com_finder (smart search) so I was not aware of it but the feature was already there in Joomla 3!

4.1. Requires an override in J4.0
On 17 December 2021, Sakis published a very interesting article about how to add Intro/Full Images to the Smart Search Results Pages:

https://blue-coder.com/help/blog/customizing-search-results

The ready-to-use default_article.php can be found on https://github.com/bluecoderr/default_article/blob/main/html/com_finder/search/default_article.php 

4.2. Now out of the box with J4.1
Good news, Sakis made this a feature for J4.1. So there is now an option to display the Images natively in the Smart Search Results Pages, without even the need for an override

Source: https://twitter.com/thebluecoder/status/1472925846059032581  on 20 December 2021

See https://github.com/joomla/joomla-cms/pull/35612 

Go to Components > Smart Search > [ any of the sub-menu items ] > Options button

There are 3 new Options:

Result Image (Hide | Show)
Image Class (whatever class you like. Try for example float-start if you are using Casssiopeia in order to have a “float left” on LTR and a “float right” on RTL)
Linked Image (No | Yes)
For a more detailed explanation, see this new blog post publised by Sakis on 18 February 2022: https://blue-coder.com/help/blog/showing-images-in-the-search-results-in-joomla-4-1-and-above

image_optionimage_option

5. Sorting/Ordering in the Smart Search Results Pages
5.1. In the back-end
Go to the Menu Item of Type Smart Search > Advanced Tab

There you have the last 2 options being

Sort Field (Use Global | Relevance | Title | Date | List Price*)
Sort Direction (Use Global | Descending | Ascending)
*: I have no clue of what List Price is. Apparently it has been there for ages in Smart Search. If you know what it does just tell me 😃

menumenu

5.2. In the front-end
[ Note: unfortunately this feature is not merged yet ]

This feature by Sakis adds a user defined sorting/ordering capability to the front-end of the Smart Search Results Pages, by adding a sorting drop-down above the results.

See https://github.com/joomla/joomla-cms/pull/35993 

frontend_sortingfrontend_sorting

6. Changing the Layout of the Smart Search Results Pages
Let’s suppose you want to change the default Layout of the Smart Search Results Pages to have, say, Cards instead of an Unordered List (<ol><li>).

Of course you could play with PHP and make an Override of the view.

But don’t forget that the (Smart) Search does return not only Articles but also

Categories
Contacts
Newsfeeds
Weblinks
(and the items of any compatible third-party extension)
So the easiest way to change our Layout to get Cards is simply to play with CSS (using for example CSS Grid).

Add the following to media/templates/site/cassiopeia/css/user.css:

/* Smart Search Results Pages - change the look from a List to Cards */
ol#search-result-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* this is more dynamic than a basic repeat(3, 1fr); */
  grid-gap: 20px;
  margin-left: 0;
}
ol#search-result-list > li.result__item {
  background: white;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid lightgray;
  box-shadow: 3px 3px 2px 1px rgb(0 0 0 / 20%);
  transition: 0.5s;
}
ol#search-result-list > li.result__item:hover {
  box-shadow: 3px 3px 2px 1px rgb(0 0 0 / 40%);
}
.result__item + .result__item {
  /* removing the default Cassiopeia style which adds a border + padding + margin on top of each result execept the first one */
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}