Custom templates for Search Results cards

search-results-template

<#--
This template is a Search Results Widget Template. It accepts two asset types: Web Content and Documents.
Make sure to filter the results to include only those two types.

The Web Content result entry will require the template key, taken from the custom Web Content Template that you built.
-->

<div class="search-total-label">
	${languageUtil.format(locale, "x-results-for-x", [searchContainer.getTotal(), "<strong>" + htmlUtil.escape(searchResultsPortletDisplayContext.getKeywords()) + "</strong>"], false)}
</div>

<div class="display-card">
	<ul class="card-page">
		<#if entries?has_content>
			<#list entries as entry>
                    <li class="card-page-item card-page-item-asset">
                        <div class="card card-type-asset file-card">
                            <div class="autofit-col autofit-col-expand autofit-section">
                                <#if entry.getClassName() == "com.liferay.journal.model.JournalArticle">
                                    <#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
                                    <#assign article = journalArticleLocalService.fetchLatestArticle(entry.getClassPK()) />
                                    <a href="${entry.getViewURL()}">
                                        <@liferay_journal["journal-article"]
                                            article=article
                                            ddmTemplateKey="42021"
                                        />
                                    </a>
                                <#elseif entry.getClassName() == "com.liferay.document.library.kernel.model.DLFileEntry">
                                    <#assign dlFileEntryLocalService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLFileEntryLocalService") />
                                    <#assign dlAppService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLAppService") />
                                    <#assign dlURLHelper = serviceLocator.findService("com.liferay.document.library.util.DLURLHelper") />

                                    <#assign dlFileEntry = dlFileEntryLocalService.fetchDLFileEntry(entry.getClassPK()) />
                                    <#assign fileEntry = dlAppService.getFileEntry(dlFileEntry.getFileEntryId()) />

                                    <#assign imageUrl= dlURLHelper.getThumbnailSrc(fileEntry, themeDisplay) />
                                    <#if !imageUrl?has_content>
                                        <#assign imageUrl = themeDisplay.getPathThemeImages() + "/file_system/large/default.png" />
                                    </#if>

                                    <a href="${entry.getViewURL()}">
                                        <@liferay_frontend["vertical-card"]
                                            cssClass="item-preview"                                        
                                            imageUrl=imageUrl
                                            title=fileEntry.getTitle()
                                        >
                                            <@liferay_frontend["vertical-card-footer"]>
                                                ${fileEntry.getTitle()}
                                            </@>
                                            <@liferay_frontend["vertical-card-sticker-bottom"]>
                                                <@liferay_document_library["mime-type-sticker"]
                                                    fileVersion=fileEntry.getFileVersion()
                                                />
                                            </@>
                                        </@>
                                    </a>
                                </#if>
                            </div>
                                <@liferay_asset["asset-categories-summary"]
                                    className=entry.getClassName()
                                    classPK=entry.getClassPK()
                                    paramName=entry.getFieldAssetCategoryIds()
                                    portletURL=entry.getPortletURL()
                                />
                        </div>
                    </li>
			</#list>
		</#if>
	</ul>
</div>

Web Content Structure

{
    "availableLanguageIds": [
        "en_US"
    ],
    "defaultLanguageId": "en_US",
    "fields": [
        {
            "label": {
                "en_US": "Title"
            },
            "predefinedValue": {
                "en_US": ""
            },
            "style": {
                "en_US": ""
            },
            "tip": {
                "en_US": ""
            },
            "dataType": "string",
            "indexType": "keyword",
            "localizable": true,
            "name": "Title",
            "readOnly": false,
            "repeatable": false,
            "required": false,
            "showLabel": true,
            "type": "text"
        },
        {
            "label": {
                "en_US": "Image"
            },
            "predefinedValue": {
                "en_US": ""
            },
            "style": {
                "en_US": ""
            },
            "tip": {
                "en_US": ""
            },
            "dataType": "image",
            "fieldNamespace": "ddm",
            "indexType": "text",
            "localizable": true,
            "name": "Image1jf9",
            "readOnly": false,
            "repeatable": false,
            "required": false,
            "showLabel": true,
            "type": "ddm-image"
        },
        {
            "label": {
                "en_US": "Description"
            },
            "predefinedValue": {
                "en_US": ""
            },
            "style": {
                "en_US": ""
            },
            "tip": {
                "en_US": ""
            },
            "dataType": "string",
            "indexType": "keyword",
            "localizable": true,
            "name": "Description",
            "readOnly": false,
            "repeatable": false,
            "required": false,
            "showLabel": true,
            "type": "text"
        },
        {
            "label": {
                "en_US": "Documents and Media"
            },
            "predefinedValue": {
                "en_US": ""
            },
            "style": {
                "en_US": ""
            },
            "tip": {
                "en_US": ""
            },
            "dataType": "document-library",
            "fieldNamespace": "ddm",
            "indexType": "keyword",
            "localizable": true,
            "name": "DocumentsAndMedia2wx2",
            "readOnly": false,
            "repeatable": false,
            "required": false,
            "showLabel": true,
            "type": "ddm-documentlibrary"
        }
    ]
}

web-content-card-search.ftl

<#--
This code is a Web Content Template, used to display the Web Content for a custom structure with the following fields:
--Title
--Image

This template is used in the Search Result Widget Template to formate each search result entry.
-->

<@liferay_frontend["vertical-card"]
    cssClass="item-preview"
	imageUrl=Image1y79.getData()
	title=.vars['reserved-article-title'].data
>
    <@liferay_frontend["vertical-card-footer"]>
	    ${Title.getData()}
	    <p>${.vars["reserved-article-description"].data}</p>
    </@>
</@>

web-content-template-display-document.ftl

<#--
Web content templates are used to lay out the fields defined in a web
content structure.

Please use the left panel to quickly add commonly used variables.
Autocomplete is also available and can be invoked by typing "${".
-->

${DocumentsAndMedia2wx2.getData()}