Circular Headshots in Answers

Search Best Practices - Search Front-End
2

Hi Austin,

The best way to accomplish this is to set the headshots as the background-image of it’s container. To do this, you will need to fork the professional-standard or professional-location card.

First, we’ll update the handlebars template to make the image a background image instead of placing the image directly on the page.

template.hbs

{{#*inline 'image'}}
{{#if card.image}}
<div class="HitchhikerLocationStandard-imgWrapper">
  <img class="HitchhikerLocationStandard-img" src="{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
</div>
{{/if}}
{{/inline}}

Then, we’ll add CSS to make the headshots circular.

  .HitchhikerLocationStandard-imgWrapper
  {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
  }

This should produce the desired effect. Beware that the cropping won’t be foolproof. Let me know if this works for your purposes!