Something wrong with attaching images/files when you send an email?

[ntabs]

Hi Bubblers,

Is there something wrong with send an email action when you attach an image/file? I’ve sent emails containing images before but this had not happened before. Any ideas on why this is happening?

This is the body of the email that I wanted to send:

This is how the email’s body looks like after it got sent:

As you can see, it’s just a bunch of Amazon AWS links.

I’ve also tried using the attach a file feature instead but it’s still the same.

Would greatly appreciate any feedback you guys might have.

Cheers,

[jobs]

As a test maybe throw in some HTML tags around the images to see if that works.

<img src="Thisiswhereyouputtheimagelink" alt="img description" />

[ntabs]

Thanks for replying @jobs!

I could try that but correct me if I’m wrong, that is only suited for fixed number of images/files since you would have to manually put that HTML tag on each image/file, right? In my case, the number of images and files are static so I’m not sure if that will work for me. Might be missing something out here but please enlighten me if I’m wrong.

[ntabs]

hey guys @mikeloc @adamhholmes sorry for tagging but I noticed you guys are one of the most helpful bubblers in the forum. Would greatly appreciate your insights

[mikeloc]

Thanks for the compliment, @ntabs… much appreciated. I don’t know if I can help here, but maybe the issue is this?

[ntabs]

Thanks for helping out @mikeloc

I tried adding “https” before the dynamic images and now this is how it looks like in the email:

It is now clickable and opens a new tab with the image when clicked. However, I want to to be like a normal attachment - an image that you can automatically view within the email.

Also, this won’t work with the other dynamic images as the quantity is dynamic as well. I won’t be able to manually add “https” on each image

Do you think this is a bug within Bubble @mikeloc ?

[adamhholmes]

Are you using a plugin, or the API connector?..

In any case, you can’t just include a link to an image in the text body of an email and expect it to display the image…

You’ll need to include the images in the HTML code, inside some <img> tags (you can use Format As Text on your list of images to make it work with a dynamic number of images)

[ntabs]

Hi @adamhholmes, thanks for replying.

I am not using any plugins or the API connector. I am simply using the send an email action. I didn’t know that simply adding a thing’s image to the body will not automatically display an image. Thanks for the clarification.

Regarding your suggestion of adding <img> tags, I tried to do it by simply adding “format as text” after the dynamic expression and adding the tag

However, when I tried to run the workflow, it’s still the same. It still looks like this in the email:

Kindly enlighten me if I’m missing something out. Would greatly appreciate your help @adamhholmes

[adamhholmes]

To include an image in an email it needs to be part of the HTML… you can’t just add HTML tags into the email text…

There’s no way (as far as I know) to send custom substitution tags to Sendgrid with the built in Bubble Send Email action, so there’s no way to pass images dynamically into an email…

To do that you’ll either have to make your own API call via the API connector, or use a plugin that lets you include your own substitution tags (such as the CoPilot Sendgrid Plugin), and set up your Sendgrid Template with an HTML block where you can pass your image tags to…

In any case, to set the HTML to send you need to use:

Parent group's booking's primary_guest's Gov_id: formatted as text

Then for content to show per list item use:

<img src="https:this pirmary_guest's Gov_ID's Vaccination ID's URL"/>

(without knowing exactly what image your tying to include, nor your database structure, the above expression might not be exactly correct for your use case, but you need to specify the particular image in the ‘content to show per list item’, included in the HTML image tags)

[ntabs]

These are really valuable insights, thank you so much @adamhholmes! Appreciate you always providing value to the Bubble community

[ntabs]

Hi @adamhholmes

So I was playing around with sendgrid a while ago and I tried to implement what you said. For the text data, it’s all doing well. However, for the images, It’s still not working.

I might be missing out on something, I probably am but here’s how I implemented it:

I added the substitution tags

primary_govid = Parent group’s Booking’s primary guest’s Gov_id’s URL
primary_vacid = Parent group’s Booking’s primary_guest’s Vac_id’s URL

I then added an HTML block in sendgrid
I used the substitution tags as the image source

<img src="primary_govid">
<img src="primary_vacid">

But in the email, the HTML block is still empty and looks like this:

Would greatly appreciate your inputs, @adamhholmes!

[ntabs]

Now that I see it, I didn’t add the “/” in the HTML. I’ll try it first

[adamhholmes]

Try adding https: before Parent Group's Booking's etc.

i…e.: primary_govid = https:Parent group’s Booking’s primary guest’s Gov_id’s URL

[ntabs]

So I just added the https: before the Parent Group's Booking's primary_guest's Gov_id's URL and same with the other one

I also added the “/” at the end but it seems SendGrid automatically removes it every time I save it. So I assume it’s not a problem.

It is still not working, the HTML block still looks like this in the email:

[adamhholmes]

Have you checked the source code in the received email?

[ntabs]

So I checked the dev tools and here’s how it looked. It’s not the image source that I used at all.

If you click the source, it redirects you to a 404 error at Google

Any idea why this is happening?

[adamhholmes]

No idea (that doesn’t make any sense to me…) are you sure that’s the source code of the email you’re looking at?

[ntabs]

I’m positive

[adamhholmes]

That’s not the source code… that’s the dev tools (the image source won’t be the same there as Google adds/changes the image source…)

You need to look at the actual source code of the image… to do that in Gmail, open the email and clic the 3 dots in the top right, then click ‘Show Original’… then you’ll be able to see the actual image source…

Having said that, even in your image above you can just about make out the actual image source, which it’s showing as simply http://primary_vacid which is obviously incorrect…

In any case, I can see the issue (aside from the fact it should be https, not http)… you haven’t included any handlebars in your Sendgrid html module:

it should be <img src="{{{ primary_govid }}}" with braces as per the standard Sendgrid handlebars syntax.

[ntabs]

Hey @adamhholmes , thanks for going all through the trouble! Bubble needs more guys like you. I honestly didn’t expect to learn this much in the forum in just a single thread

I just added the braces and it now works! Thank you!

The only thing that I have to worry now is sending a dynamic number of images since I will be using do a search for for the other IDs of the other guests.

I’m assuming I just need to follow the same thing for the substitution tags, right? but since this is a do a search for for a list and since I need to add the https: at every start of the URLs, I used this:

Now, I assume this still will not show up as a list of images in the email since the image source will be referring to a list of URLs instead of referring to only 1 URL. I would probably need to have an array or something in the HTML to let me dynamically set the number of images, right?

Again, thank you so much @adamhholmes