CODEWITHSUNDEEP
outlookhtml-emailvml
Ollie Barker
Ollie Barker

Reputation: 31

Avatar with rounded corners in VML background image for Outlook

I'm working on some email templates (god forbid) and I'm trying to figure out how to display a circular avatar in a table next to the associated contact.

Currently I'm using this code. Using a v:fill to apply a background image and a v:rect to apply a border radius. However I'm not having any success.

One main point is I don't want any content within this element. Its existence is to provide the avatar image so I've struggled to find anything to help me.

Help greatly appreciated!

<table>
    <td background="https://picsum.photos/32" width="32" height="32" valign="top" style="border-radius: 50%">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" arcsize="50%" stroke="false" style="width:32px;height:32px;">
        <v:fill type="tile" src="https://picsum.photos/32" arcsize="50%" color="#7bceeb" />
      </v:rect>
      <![endif]-->
    </td>
</table>

Upvotes: 2

Views: 2282

Answers (1)

Ollie Barker
Ollie Barker

Reputation: 31

I found the solution worked well. Using a <v:oval> to give the shape and <v:fill> to give the image.

Though I found I did I have to set the stroke on the oval to false, it seems to be defaulted to on.

<td width="32" style="margin: 0; padding: 0;">
   <!--[if (gte mso 9)|(IE)]>
      <v:oval xmlns:v="urn:schemas-microsoft-com:vml" fill="true" style='width:32px;height:32px' stroke="false">
         <v:fill type="tile" src="[URL]" />
      </v:oval>
   <![endif]-->
   <!--[if !mso]>-->
      <img style="border-radius: 16px;" width="32" height="32" src="[URL]" />
   <!--<![endif]-->
</td>

Then using conditional statements I can supply the VML shape to Outlook and a regular <img> element to everyone else that supports border-radius.

(Essentially anything other than outlook according to caniemail.com)

Upvotes: 1

Related Questions