Image Card¶
Image Card template is used to display an image preview of a page, news article or document.

Managed Properties¶
AuthorOWSUSER
FileExtension
MercuryArticleDateOWSDATE
NormSiteID
owstaxIdMercuryBusinessUnit
owstaxIdMercuryCategory
owstaxIdMercuryDepartment
Path
PictureThumbnailURL
SiteID
Title
UniqueID
WebId
Note
NormSiteID, WebId and UniqueID are required for the article preview image, when returning home pages PictureThumbnailURL is used.
When searching for documents additional managed properties are required:
MDCTitleOWSTEXT
FileExtension
Slots¶
| Slot | Managed Property |
|---|---|
| Title | Title |
| Date | MercuryArticleDateOWSDATE |
| User | AuthorOWSUSER |
| Icon | FileExtension |
| Tags | owstaxIdMercuryCategory |
| Icon | FileExtension |
| Geo | GeoLocation |
| Views | ViewsLifeTime |
| Likes | LikesCount |
| Comments | CommentCount |
Note
Slot values can be removed or changed to display a prefered managed property in the slot.
Configuration¶
- Preferred Items Per Row
- Set the number of items you'd prefer to see per row
- This preferential figure is subject to change depending on screen size i.e mobile users will likely see less than the setting
- Gap
- Set the gap between items.
- Title Lines to Show
- Set the number of lines of the title to be display before truncating
- Enable Follow Items
- Allows the user to favourite/ follow the item.
- Hide Image
- When enabled hides the image on the template.
- Background Colour
- Sets the background colour.
- Font Colour
- Sets the font colour.
- Override Date
- When enabled set the date format using luxon formatting, for example 'dd MM yyyy' would format to 01 01 2024.
Swapping Geo Value¶
When Geo is displayed on a template, the value of this may not be best represented to what the Geo location is. The value can be updated in the custom branding file using the css below:
Hides Current Value
.mercury-geo-{Geo Value}[data-geo*="{Geo Value}"] span {
display: none;
}
Sets New Value
.mercury-geo-{Geo Value}[data-geo*="{Geo Value}"]::before {
content: '{New Geo Value}';
}