As part of a longer series, we have prepared an API to retrieve thumbnails using playwright. In this article, we will apply this API to Sitecore Search.
Creating New Sources
In this article, we will implement a mechanism to display thumbnails as search results for XM Cloud documents in English at https://doc.sitecore.com/xmc.
In creating the sources, Document Extractors were set up as follows.
- Select JS as Extractor Type
- URLs to Match uses Regular Expression to create a . *\/xmc\/. * Specify .
- For Tagger, set the following JavaScript code
- In this case, the server of the API that creates the thumbnails is specified by image_url
- The URL of the sample site on this page is a dummy
JavaScript
function extract(request, response) {
$ = response.body;
let url = request.url;
return [{
'title': $('h1').text(),
'subtitle': $('meta[name="description"]').attr('content') || $('section[data-component-name="Hero Banner"] div[class*="side-content"]>div>p, header div.lead p').text(),
'description': $('meta[name="description"]').attr('content') || $('meta[property="og:description"]').attr('content') || $('p').text(),
'name': $('meta[name="searchtitle"]').attr('content') || $('title').text(),
'image_url': "https://yoursampleserver.vercel.app/api/thumbnail?url=" + url,
'product': $('meta[name="product"]').attr('content'),
'type': 'Documentation',
'site_name': 'Sitecore Documentation',
'url': url
}];
}The crawler now retrieves the data and specifies the API to create and display thumbnails for the images on that page.
Confirmation of operation
Since we are loading the XM Cloud documentation, we will enter XM as a keyword. First of all, you will see a screenshot of the screen as a recommendation when you enter the keyword.
Thumbnails are also used as images in the list of search results.
Thumbnails are also used on the search results page.
Summary
If the images to be used for a page are clearly defined in the product information, etc., this system of using images is not necessary. However, preparing images for search results for all pages is a high hurdle in terms of man-hours and cost-effectiveness, but with the thumbnail system using Playwright, images could be displayed for search results.