Listnerds Newbies Guide | Embedding Images in HTML Emails

Adding images to your Listnerds emails

I think we can all agree on the fact that adding at least one image to an email looks more appealing than to add none. That doesn't mean that I add them every time, I've sent out plenty emails with text only, linking to a Hive article. But I have to admit that that was not by choice, but simply because I didn't understand the Listnerds editor. I'm quite used to the Hive editor by now, I think I understand enough of it to make a blog look appealing and to me there was no reason to learn more about other types of editors until I started sending out emails in Listnerds.

Broken image

The one time that I tried adding an image to my plain text, the image broke. Ouch! That was quit the bummer, but thankfully, the link was still working as I linked the text and not the image. Therefore my email wasn't wasted. Thankfully, not long after this happened, @finguru wrote an awesome post about how to embed your images. I decided to send this one out to the Listnerdies and it was received well. I'm still thankful for the fact that he wrote that post as I immediately started adapting his tips. He showed how to use Canva to make your emails look better and then how to embed them in the editor. Many others have since used his tips to improve their formatting skills and with success! I'm getting happier each day that I open my Listnerds mailbox as more great looking content is sent out each day. Thanks again for your inspiration @finguru!

Time to do my part

As I've noticed still quite a few images are broken or embedding of content isn't working, I want to make sure that my readers will be able to find the right way to embed images as well. It's difficult and very time-costly to constantly go to the process step by step when someone is asking about it. I'm a huge fan of tutorials and screenshots to make sure people know 100% sure what they're doing. Therefore, I will now walk through the few simple steps on how to embed your images in Listnerds so that you too can have these images linked if you decide to use this technique. I will also share with you what I did wrong one time, and how you can discover this little mistake if it happens to you and of course, how to quickly fix it without needing the team's help.

Hosting your images

Unless you already have server space for this purpose, you will have to host your images somewhere so that you can create a HTML link to embed your images in Listnerds. There are plenty of ways to do this, I adapted the tips of @finguru and as this works very smooth, I will share with you how I do this now. So far it has worked every time, the one time it seemed to fail was my own error, I copied the wrong link. Which I will point out to you as well so you are aware that this can happen.

Go to https://imgbb.com/

Click on start uploading and select an image and click uploading

Click on don't auto delete (unless you prefer otherwise, obviously!) and click on upload

Now in this case, you'll see the HTML full linked code immediately. I believe that he remembers my preference as this is what I've been selecting all the time. But there are more options out there:

When my error appeared, I accidentally must have clicked on another one of the links without noticing it afterwards by looking at the code (you can compare them and see the difference, a dev will notice instantly). Therefore I tried using a code that had Markdown as well as HTLM in it, which didn't work.

Therefore make sure you copy the HTML Full Linked code! If you notice an error in Listnerds first go back and check your code, if you're in doubt, compare it to the previous codes you used.

A tiny tip before we start embedding

This is a small tip for those that only copy their codes into Listnerds without saving them, I personally would advise you to start pasting them into a document for future references as well. You don't have to keep them forever if you think that's too much mess on your computer, but it will help you in case something goes wrong, as you can try to figure out what you did wrong. Once the email is sent, you can't check what you did anymore. I use Hackmd to write my drafts and later save the code I inserted into the Hive editor for example. For Listnerds I only paste the code in that doc. I don't use separate docs for each link, I think I will either save them up each week, or each month. Not sure yet. Do with it what you want, I just wanted to point out that this can be helpful and avoid frustration in the future.

The fun part

Now we're at the part where we are going to add the images to your email. I'm using a regular image as an example, not one of my emails that I created with extra info in there to convince you to click on the link. This is just to show you how to use this function.

Use the copy button that's available on imgbb:

Go to Listnerds and click on send mail or solo mail as the process is the same for both options.

Now paste the Full HTML Code into the box:

Please don't just press the save button without adding a first check of your copy action here!

If you check the image above, you can see the first part of the link until Backstory- if you check this second box, you can see the rest of the link. It's indeed an extra step to take but checking this may help you avoid wasting an amount of emails that have been sent for nothing.

In this case, my link is correct, and therefore I will click save and see this:

As you can see, my image turns out to be bigger than the email box, and therefore I'd not choose to send it out like this but first resize it a bit so it fits the screen a bit better. But we can still do the second check I always do to make sure I really inserted the correct link.

Click again on Insert but now choose Link:

If you check my screenshots above, you will see that this is indeed the same link. But if I click on this link, the people are sent to place where the image is hosted. That's not what you want! You want to send them to a link of your choice that you embedded in this code. I could have shown you this right away, but I wanted you to see what happens if you forget this. Don't worry, once you know how it works, you will know and not be confused anymore! I promise!

Adding a link to the code

To do this, it's again easy to use Hackmd or if you prefer word(pad) that works too.

Now the only part of the code you need to touch is the above green marked link. Don't touch the <a href= part, ONLY replace the link that's located within the "" and you'll be fine.
What I do is I select the link:

and paste the new link there:

You can choose to delete the old link, copy and paste the new link as well, which will work if you didn't accidentally removed the " or any other part of the code. To avoid this, I always do it this way. But practice it and decide on your own what works best for you. And then ALWAYS do another check to make sure the link is copied correctly in between the " and it looks the same.

Now copy this full code

And paste it here:

When you now check the link attached to the image:

You will see a more recognizable link that's heading towards a blog on Hive. Again, make sure you check the link at the back as well. You can also click on this button:

To make sure it goes to where you're trying to send your readers.

That's it! Congrats, you now know how to send out cool looking images/graphics as an email instead of plain text.

In case you found this guide useful and decided to sign up on Listnerds, please use my referral link to do so, I have another cool give-away coming up for my team members, and yes, the people that were included in the HivePunk raffle will be included as well. as you are also part of my team! I will create a Team Discord soon where we can share our thoughts, ideas and help each other where needed. If you're in my team and want an invite, please let me know so I can invite you.

More Listnerds Content

• I have to share my excitement - Daily Listnerds earnings!
• HivePunks Giveaway - Winner Announcement
• Sell your digital art on Listnerds
• Listnerds Newbies Guide - The Importance of a catchy title/subject line
• Listnerds Newbies Guide - Evaluating the first month
• Listnerds Newbies Guide - What's a Click-Through Rate? (CTR)
• Listnerds Newbies Guide - Let's talk about Solo mail
• Listnerds Newbies Guide - How to get your email verified
• Listnerds Newbies Guide - Let's talk about (E)MAIL
• Listnerds - Reviewing The First 2 Weeks
• Listnerds Newbies Guide - Earning Listnerds Tokens
• Listnerds Newbies Guide - Staking CTP Increases Your Voting Power
• Listnerds Newbies Guide - Start earning in a few simple steps
• Join My Listnerds Team To Win A Free Hive Punk
• ListNerds Newbie's Guide - How-To Stake CTP On ListNerds.com

Credits

• Header Image
• The text divider is my own design, where I sometimes use images from Canva Pro or in other cases, my own images.

Let's Connect

If you want to connect, you can give me a follow on my socials. For inquiries, you can send me a direct message on Discord.

• Instagram
• Twitter
• Discord Username: HelloSunshine#1947

My Referral Links:

• Register Free Hive Account
• ListNerds - Join My Team - Read & Send E-mails to earn LISTNERDS
• NFT Showroom
• Presearch Protected Browser - Earn Crypto and protect your privacy!
• Nexo Sign Up Bonus $25 BTC
• Splinterlands