Issues with test newsletter email format and image in localhost

Developer help
1

I just finished creating my newsletter and sent a test email to myself on the local host. I want to fix the issues I have with my newsletter before I make my site live. I ran across the following issues that I need help with:

The first one is that my images are not showing up but show up on the email but show up when I view the browser version.

The second issue, is the table of contents I created with html is not being shown the same exact way on the email compared to the browser version.

Code for the table of contents

<div  style= "position:inherit; background-color: #9fe2bf00; font-size: 18px; font-weight: 500; padding: 2rem; width: 30%; border: 1.5px #9fe2bfcc solid; border-bottom: 1.5px #9fe2bfcc solid; list-style: none; line-height: 2rem; font-family: 'DM Sans', sans-serif; display: flow-root;"> 
<h4><center>Table of Contents</center></h4> 
<br>
<li><a href="#Activities & Places" style = "text-decoration: none;">Activities & Places</a><br>
<li><a href="#Eat" style = "text-decoration: none;">Eat</a><br>
<li><a href="#Stay" style = "text-decoration: none;">Stay</a><br>
<li><a href="#Helpful Information" style = "text-decoration: none;">Helpful Information</a><br>
<li><a href="#Resources" style = "text-decoration: none;">Resources</a><br>
</div>

The last issue, my colored text boxes are not showing up on the test email. Instead they show up with the text but with a white background.

Ghost-CLI version = 1.21.0
Ghost version = 5.15.0
Theme = Journal
OS = Mac with Monterey
Browser = Google Chrome
Node Version = v16.13.0

Screenshot

Screenshot
Screenshot511×2043 69 KB

2

Hi! Welcome to Ghost :wave:

With the images, there are a couple of possibilities. First, sometimes email clients block images. Have you ensured that your images are allowed? Second, is your site live (can you share a link)?

With the table of contents and colored box, you’ll need to inline all the necessary styles, as the email client doesn’t have any access to external CSS styles. Formatting for email is hard, so making these elements as simple as possible will make your life easier.

3

Thank you! My site is not live now, I wanted to fix the issue before I make it live. I did check the images are enabled. My test email uses a Gmail account and I tried to use another account and then I forwarded to my Fastmail and Outlook account and ended with the same issue even though images are enabled.

4

Thanks for following up. The email relies on the site being live to display images. Once your site is up and running, images will display without issue!

5

Great! Thank you very much for your help.

1 Like