Overview
The Image Content component displays an image defined in Hawksearch.
Selector
The selector for this component is <hawksearch-image-content>.
Data Model
The following data model is exposed to the Handlebars template:
interface ContentType {
id: number;
campaignId: number;
type: string;
title: string;
zone: string;
}
interface ImageContent extends ContentType {
type: 'image';
image: {
url: string;
height?: number;
width?: number;
altText?: string;
title?: string;
};
link?: {
url: string;
target: string;
};
}
Default Template
<div class="image-content">
{{#if link}}
<a hawksearch-link href="{{link.url}}"{{attribute (concat 'target="' link.target '"') link.target}}>
<img src="{{image.url}}" class="image-content__image" height="{{image.height}}" width="{{image.width}}" alt="{{image.altText}}" title="{{image.title}}" />
</a>
{{else}}
<img src="{{image.url}}" class="image-content__image" height="{{image.height}}" width="{{image.width}}" alt="{{image.altText}}" title="{{image.title}}" />
{{/if}}
</div>