Adding images with subtitles to Event Standard Cards

Search Best Practices - Search Configuration
1

Hello!
I am looking to customize an Event Standard card that has a subtitle either above or below an image. Is this possible? I have already added the image, but I am looking to shift the subtitle like below:

image
image777×248 32.3 KB

Also, my date wrapper is not pulling in and I am not sure if the image or moving the subtitle is affecting this.

Thank you!
Adrienne

2

Hi Adrienne,

I am looking to customize an Event Standard card that has a subtitle either above or below an image. Is this possible?

Yes this is possible! You can customize your template.hbs file to put the image and subtitle in the same container on the left of the main content and then create a new div for each object to put one above the other. Your card may look something like:

Top card structure:

... 
<div class="HitchhikerEventStandard-imageAndSubtitleWrapper">
  {{> image }}
  {{> subtitle }}
</div>
...

Partials called in card:

{{#*inline 'image'}}
{{#if card.image}}
<div class="HitchhikerMenuItemStandard-imgWrapper">
  <img class="HitchhikerMenuItemStandard-img" src="{{#unless (isNonRelativeUrl card.image)}}{{@root.relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
</div>
{{/if}}
{{/inline}}

{{#*inline 'subtitle'}}
{{#if card.subtitle}}
<div class="HitchhikerEventStandard-subtitle">
  {{card.subtitle}}
</div>
{{/if}}
{{/inline}}

Also, my date wrapper is not pulling in and I am not sure if the image or moving the subtitle is affecting this.

Looks like you’re using the built-in formatter bigDate that uses the built-in date field on the event entity type. Since the custom entity type you’re using doesn’t have a built-in date field, it’s not registering with this formatter. You can either:

  • Switch these entities to the Events entity type to use the built-in date field and formatter that’s already written.
  • Write a new custom formatter to extract the month and day from the custom date field (assuming you want to display the date with our default events styling below).
    image