Help

Inline gif in automated e-mail?

Topic Labels: Automations
Solved
Jump to Solution
4565 13
cancel
Showing results for 
Search instead for 
Did you mean: 
jws
5 - Automation Enthusiast
5 - Automation Enthusiast

I am trying to send an automated message with outlook.

I want to avoid using a hosted image from a URL, and have an inline image in the mail.

This help page shows this is possible by inserting a “render at html” grid or a list, but I can’t make it work: https://support.airtable.com/hc/en-us/articles/360051028394#:~:text=How%20can%20I,your%20HTML%20tags

Instead of the image appearing, I get either a ticked checkbox or the name of the field.

Can anyone enlighten me what is going wrong?

12 Solutions

Accepted Solutions
Justin_Barrett
18 - Pluto
18 - Pluto

Welcome to the community, @jws! :grinning_face_with_big_eyes: You say that you can’t make it work, but we don’t know what method you’re attempting. Would you be able to share a screenshot or two showing how you’re trying to set this up? The more specific details you can share, the easier it’ll be to figure out how to guide you in the right direction.

I’ve helped a couple of clients to add images to email templates, and in both cases the easiest way that I’ve found to host the images is to create an “Images” table, with each record containing a single image in an attachment field. A formula field can be used to extract the hosted URL, and you can use that URL when building an <img> tag in the email template, along with styling to control the image size and placement.

See Solution in Thread

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

That sounds like it would work. Can you point me to some instructions, or show me your example?

Here are some screenshots showing my attempt to follow the official instructions I previously linked and the end result:

Record with image:
Screen Shot 2021-12-18 at 08.49.22

Template for automate e-mail:
Screen Shot 2021-12-18 at 08.51.20

Resulting e-mail received:
Screen Shot 2021-12-18 at 08.52.09

See Solution in Thread

Thanks for the details. When you tested the trigger step (which you didn’t show in your screenshots), had you added the image to the {Image1} field yet? If not, that’s probably the reason that you’re not seeing the image in the email.

If you change data in a record after using that record to test your trigger step, the trigger step is still operating on a version of the record without that change. In your case, if you tested the trigger before adding the image, the later steps—including the “Outlook: send email” action—won’t get the image. You’ll need to re-test the trigger first before the email step will get that image.

See Solution in Thread

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

My trigger in this case is that the checkbox “Test Image” is checked. The image1 attachment in the record has remained there untouched through my testing.

But maybe I misunderstand you?

To paraphrase the instructions, what should happen is:

  1. Record has image as attachment
  2. In template, select render list as html and select the field with the image
  3. Image should appear inline when sent.

Is that right? Or is there something I am missing?

See Solution in Thread

That’s correct. I haven’t used that method before, but I just tested it and it works, though it’s not really the best way to insert an inline image. You also get the attachment field name above the image (“Attachment” in my test case), and you have no control over the image placement or size. In this test, the actual image is fairly large, but this is all I get when using the list insertion option:

Screen Shot 2021-12-18 at 8.42.44 PM

First let’s figure out why the image isn’t appearing for you. As I said above, the setup that you described is correct, but from your screenshot it looks like you inserted only the {Test Image} checkbox field, not the {Image1} field. Delete the lower two items from your email template, then add a new item that only inserts the {Image1} field as an HTML list. Once that’s done, please run the test again and let us know what happens.

See Solution in Thread

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

Ok, that was it. I had selected the checkbox field instead of the attachment. That is why it was showing a checkbox. ahaha

It is however not really a solution, as you say, since it just shows a small thumbnail.

Can you share your method in more detail please?

See Solution in Thread

Sure, but I’m stepping away for the weekend. I’ll break down the process for you on Monday.

See Solution in Thread

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

Ok, great. Thank you

See Solution in Thread

@jws Here’s the basic rundown:

  1. Drop your desired image into an attachment field in a new table.

Screen Shot 2021-12-20 at 6.47.43 PM

  1. Create a formula field named {Attachment URL} using this formula (replacing “Attachments” with the name of your attachment field), which will give you the direct URL of the attached image:
IF(Attachments, REGEX_EXTRACT(Attachments, "(?:[^(]*\\()([^)]*)"))

Screen Shot 2021-12-20 at 6.48.58 PM

  1. In your email template, add an <img> tag where you want to insert the image into your email. To insert the image at its native size, this is all you need:
<img src="URL_FROM_FORMULA_FIELD" />

If you need to scale the image to fit specific dimensions, you’ll need to look into CSS styling using the style attribute. For example, to render the image at 25% of its native size:

<img src="URL_FROM_FORMULA_FIELD" style="width:25%;height:25%" />

See Solution in Thread

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

Thanks! It works great for just the image.

If I add the style element with 50%, it does not show up at all. If I manually type in pixels, it works. Example: style="width:641;height:455"

Is there a way to make the percentage work?

Just to make sure I am doing this the most efficient way possible, I copy to clipboard the url that is generated by the formula and paste it into the template?

To say another way, is it possible to link directly to the field reference? So that you could have a different image depending on the individual record?

See Solution in Thread

The percentage should work as I described above. Note that it should read width:50%, not just 50% as you indicated. I also got it to work by only adding a width property to the style, and it auto-matched the height to the same relative value.

Yes. Inside the quotes for the src property of the <img> tag, place the cursor, then click the blue + button in the upper-right corner of the template editor to insert a value from a previous step. Choose the value from the {Attachment URL} field of the triggering record, and it should look something like this:

Screen Shot 2021-12-21 at 7.55.37 AM

See Solution in Thread

Justin_Barrett
18 - Pluto
18 - Pluto

Just a quick follow-up comment on this. The announced change to the behavior of URLs for attachments will soon prevent this method from working (or at least make it more difficult). As such, I no longer recommend it. Unfortunately I don’t have the time to investigate other options or else I’d recommend an alternative.

See Solution in Thread

13 Replies 13
Justin_Barrett
18 - Pluto
18 - Pluto

Welcome to the community, @jws! :grinning_face_with_big_eyes: You say that you can’t make it work, but we don’t know what method you’re attempting. Would you be able to share a screenshot or two showing how you’re trying to set this up? The more specific details you can share, the easier it’ll be to figure out how to guide you in the right direction.

I’ve helped a couple of clients to add images to email templates, and in both cases the easiest way that I’ve found to host the images is to create an “Images” table, with each record containing a single image in an attachment field. A formula field can be used to extract the hosted URL, and you can use that URL when building an <img> tag in the email template, along with styling to control the image size and placement.

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

That sounds like it would work. Can you point me to some instructions, or show me your example?

Here are some screenshots showing my attempt to follow the official instructions I previously linked and the end result:

Record with image:
Screen Shot 2021-12-18 at 08.49.22

Template for automate e-mail:
Screen Shot 2021-12-18 at 08.51.20

Resulting e-mail received:
Screen Shot 2021-12-18 at 08.52.09

Thanks for the details. When you tested the trigger step (which you didn’t show in your screenshots), had you added the image to the {Image1} field yet? If not, that’s probably the reason that you’re not seeing the image in the email.

If you change data in a record after using that record to test your trigger step, the trigger step is still operating on a version of the record without that change. In your case, if you tested the trigger before adding the image, the later steps—including the “Outlook: send email” action—won’t get the image. You’ll need to re-test the trigger first before the email step will get that image.

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

My trigger in this case is that the checkbox “Test Image” is checked. The image1 attachment in the record has remained there untouched through my testing.

But maybe I misunderstand you?

To paraphrase the instructions, what should happen is:

  1. Record has image as attachment
  2. In template, select render list as html and select the field with the image
  3. Image should appear inline when sent.

Is that right? Or is there something I am missing?

That’s correct. I haven’t used that method before, but I just tested it and it works, though it’s not really the best way to insert an inline image. You also get the attachment field name above the image (“Attachment” in my test case), and you have no control over the image placement or size. In this test, the actual image is fairly large, but this is all I get when using the list insertion option:

Screen Shot 2021-12-18 at 8.42.44 PM

First let’s figure out why the image isn’t appearing for you. As I said above, the setup that you described is correct, but from your screenshot it looks like you inserted only the {Test Image} checkbox field, not the {Image1} field. Delete the lower two items from your email template, then add a new item that only inserts the {Image1} field as an HTML list. Once that’s done, please run the test again and let us know what happens.

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

Ok, that was it. I had selected the checkbox field instead of the attachment. That is why it was showing a checkbox. ahaha

It is however not really a solution, as you say, since it just shows a small thumbnail.

Can you share your method in more detail please?

Sure, but I’m stepping away for the weekend. I’ll break down the process for you on Monday.

jws
5 - Automation Enthusiast
5 - Automation Enthusiast

Ok, great. Thank you

@jws Here’s the basic rundown:

  1. Drop your desired image into an attachment field in a new table.

Screen Shot 2021-12-20 at 6.47.43 PM

  1. Create a formula field named {Attachment URL} using this formula (replacing “Attachments” with the name of your attachment field), which will give you the direct URL of the attached image:
IF(Attachments, REGEX_EXTRACT(Attachments, "(?:[^(]*\\()([^)]*)"))

Screen Shot 2021-12-20 at 6.48.58 PM

  1. In your email template, add an <img> tag where you want to insert the image into your email. To insert the image at its native size, this is all you need:
<img src="URL_FROM_FORMULA_FIELD" />

If you need to scale the image to fit specific dimensions, you’ll need to look into CSS styling using the style attribute. For example, to render the image at 25% of its native size:

<img src="URL_FROM_FORMULA_FIELD" style="width:25%;height:25%" />
jws
5 - Automation Enthusiast
5 - Automation Enthusiast

Thanks! It works great for just the image.

If I add the style element with 50%, it does not show up at all. If I manually type in pixels, it works. Example: style="width:641;height:455"

Is there a way to make the percentage work?

Just to make sure I am doing this the most efficient way possible, I copy to clipboard the url that is generated by the formula and paste it into the template?

To say another way, is it possible to link directly to the field reference? So that you could have a different image depending on the individual record?

The percentage should work as I described above. Note that it should read width:50%, not just 50% as you indicated. I also got it to work by only adding a width property to the style, and it auto-matched the height to the same relative value.

Yes. Inside the quotes for the src property of the <img> tag, place the cursor, then click the blue + button in the upper-right corner of the template editor to insert a value from a previous step. Choose the value from the {Attachment URL} field of the triggering record, and it should look something like this:

Screen Shot 2021-12-21 at 7.55.37 AM

Justin_Barrett
18 - Pluto
18 - Pluto

Just a quick follow-up comment on this. The announced change to the behavior of URLs for attachments will soon prevent this method from working (or at least make it more difficult). As such, I no longer recommend it. Unfortunately I don’t have the time to investigate other options or else I’d recommend an alternative.

Hello, I'm trying to extract the URL of an attachment as indicated here, i.e., using:

IF(Attachments, REGEX_EXTRACT(Attachments, "(?:[^(]*\\()([^)]*)"))

 This successfully creates an URL ("dl.airtable.com/.attachments/........./......./...jpg"). However, when clicking on  the link, I get the following notification: "The link you're trying to visit is not available. Please visit our support center for more information. " 

Any idea why this might be happening?