Circular Headshots in Answers

Search Best Practices - Search Front-End
1

Hi Team,

My client is interested in using circular headshots in their Answers experience, rather than the default rectangles. That said, they provided me with sample HTML and CSS that crops the standard rectangular headshots into circles.

I know there are limitations to using circular headshots, but am curious to know if this is something we can support? I’d love to show it in the staging environment, and could always revert to the rectangular images if necessary.

Thank you,
Austin

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!

3

Hi @afarooque,

Thank you for this, it looks amazing! I have one follow up question below:

Can we differentiate certain properties for the Desktop and Mobile experiences? For example, I’d like the height, width and margin-right for Desktop to be different than the Mobile experience.

Best,
Austin

4

Yes! You can use media queries for this.

5

Awesome thank you, that article is super helpful.

Based on what I read in the article above, I’ve added the following and it looks great!

@media only screen and (max-width: 768px) {
.HitchhikerLocationStandard-imgWrapper {
width: 7.25rem;
height: 5rem;
margin-right: 2rem;
}
}

Thanks again!
Austin