Displaying dynamic images in SendGrid emails

Hi folks,

I’m trying to include the profile photo of my email recipients in SendGrid emails. I am using the following substitution tag setup in Bubble (it says profile-photo, though it’s truncated in the screenshot here):

Screenshot 2022-08-19 at 13.22.53

In SendGrid, I have used the following code block:

This is how it comes through in the email (image on the right, i.e. the broken one!):

Yet when I check ‘Show original’ in Gmail I see…

… that the URL is coming through correctly (click here to verify). I have tried using both {{}} and {{{}}}, but it makes no difference. I have also tried to use an image block and entered the substitution tag where it says src= but that just sent a blank space where the image is meant to be.

Is anybody able to tell me what I’m doing wrong here?

Thanks in advance!

There needs to be a : between the https and //. So if your user’s Profile photo only contains everything starting from //s3 and on, you’ll need to write https: before the dynamic expression.

1 Like

Thanks, @john32. I forgot to mention that the reason I deleted the : was that it didn’t work with that, either. On checking ‘Show original’ in Gmail, I found that the colon resulted in //// (instead of //) appearing in the source URL.

Ah, my apologies. I tried what you suggested again and it worked. I must have added :// previously. Thanks, @john32!

Does anyone know how to add a roundness of 100 to make a profile image display as a circle?

Sure do! You can change the roundness of an image element itself:

Oh sorry, I meant how would I tell SendGrid to display the image as a circle and not a square/rectangle?

Ahh! I’ve not worked with SendGrid in the way you’re using it, but if there’s a way you can insert additional CSS properties to your image, you’ll be able to round the edges.

You can use the border-radius property to define the radius in pixels, similar to how the width and height are currently being defined.

Do you have the ability to change the code for the inserted image?

Hi again, @john32. I can imagine that adding css would be a way forward, but I have no idea about how to do that. I do see this, but I’m not sure what I might need to add there:

On the point about defining the radius in pixels, I don’t have access to a roundness option, unlike what Bubble gives us for defining how we want images to be displayed. I tried processing with Imgix, as I saw an option there for applying a circle mask, but the email still came through with a square image.