How to add image to title field

[Dana_Fesjian]

Hi!

I would like to add an image that appears right next to the title field. I tried doing this:

let profileVerifiedImage = 'static/assets/images/image.png';

And then for what’s returned on the card, I put:

title: profile.name + profileVerifiedImage,

But the image now appears as text next to the field instead of the image itself. Has anyone tried doing something like this before? I am not sure what to update in the handlebars file. Any guidance would be great!

Thank you!
Dana

[DJ_Corbett]

Hi Dana!

At the moment, that data mapping for title will try to concatenate that file path string to the string profile.name. To make the image itself appear next to the title, you can add the image to the handlebars template for the card. I’ve outlined the steps you could take to do this below!

1. In order to make the image only appear when a certain criteria is met, you can set up a boolean property on the component.js file that is either true or false depending on if the condition is met. For example:
   trusted: (profileState == 'Trusted') ? true : false,
2. Now you can go into the handlebars template and tweak the partial being used for the card title, and tell it to include an img tag, with the preferred image as the src, when the trusted property is true. This could look like the following:

{{#*inline 'title'}}
{{#if card.title}}
<div class="HitchhikerDocumentStandard-title">
  {{#if card.url}}
  <a class="HitchhikerDocumentStandard-titleLink js-HitchhikerDocumentStandard-titleLink"
     href="{{#unless (isNonRelativeUrl card.url)}}{{@root.relativePath}}/{{/unless}}{{card.url}}"
     data-eventtype="TITLE_CLICK"
     data-eventoptions='{{json card.titleEventOptions}}'
     target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}>
    {{card.title}}
  </a>
  {{else}}
  {{card.title}}
  {{/if}}
  {{#if card.trusted}}
  <div class="trustedImgContainer">
    <img src="static/assets/images/gurucheckreal.png" id="guruTrustImg">
  </div>
  {{/if}}
</div>
{{/if}}
{{/inline}}

The new code to pay attention to in the above snippet is:

  {{#if card.trusted}}
  <div class="trustedImgContainer">
    <img src="static/assets/images/gurucheckreal.png" id="guruTrustImg">
  </div>
  {{/if}}

After adding this to the handlebars template, you can add some styling to ensure the image appears neatly next to the title! For example:

  .HitchhikerDocumentStandard-title {
    display: flex;
    align-items: center;
  }

  #guruTrustImg {
    height: 1.5em;
    width: 1.5em;
  }

After doing all of this, the card now shows the image next to the title when it is a trusted card:

Hope this helps!
DJ

[Dana_Fesjian]

DJ - This helped so much! Thank you for such a clear explanation!