Newsletter

The Hort's monthly newsletter is a Custom Code Email in Constant Contact and requires working with the HTML code to produce. This documentation provides details to aid in putting together these newsletters.

HTML Reference

The following table provides some basic HTML tags that will be helpful to know when editing the newsletter code and adding copy:

HTML	Description
<p>Paragraph</p>	Paragraph tag
<br>	Line break. Best used for when a single line break is required, otherwise use the paragraph tag.
<strong>Bold text</strong>	Bold text
<em>Italic text</em>	Italic text
<h1>Header 1</h2>	Header 1, largest sized header.
<h2>Header 2</h2>	Header 2, medium sized header.
<h3>Header 3</h3>	Header 3, smaller sized header.
<img src="image.jpg" alt="Alternate Text">	Image tag. Image file path is placed in the `src` attribute. The `alt` attribute should give a short description of the image.
<a href="https://thehort.org">Link text</a>	Anchor (link) tag. The URL is placed in the `href` attribute.
<ul> <li>Unordered list item</li> <li>Unordered list item</li> </ul>	Unordered list.
<ol> <li>Ordered list item</li> <li>Ordered list item</li> </ol>	Ordered (numbered) list.

Uploading Images

Prior to updating the newsletter code, it's helpful to have all required images in the Constant Contact Library, which can be found in Tools → Library. In order for the newsletter to display properly, images must be sized to the exact dimensions required for their specific sections. Image cropping and resizing can done prior to uploading in Constant Contact with image editing software, or within Constant Contact using the Transform function in their Image Editor and inputting the required resolution.

The dimensions for the images for each section are:

1200 x 800px for the Featured Article sections
600 x 400px for the Special Feature and About Town sections

After uploading and resizing, you can copy the File URL of each image. These will be used to update the image src attributes in the newsletter HTML.

Creating a New Newsletter

To create a new monthly newsletter, first locate the email message titled The Hort Newsletter (Full Content) in Constant Contact and create a copy. When creating a copy, give your new email message a name that will make it easy to locate.

After creating the message, click on the newsletter subject that appears between the newsletter name and the code, enter a new subject line, and save.

Before beginning to edit the code, it's helpful to turn on the Live Preview. Note that the Live Preview does not accurately display all aspects of the newsletter, but is helpful while editing content since it allows you to see the changes being made in real time. To get an accurate preview of the newsletter, it is best to use the Preview function and/or email yourself a test

Changing the Newsletter Theme

The newsletter has been developed to support different color themes. These themes can be changed by updating the class set on the first table tag after the body—this table also has the class container. You can add the following classes to change the newsletter themes:

renew
bloom
harvest

This is the full HTML for this line:

<table cellpadding="0" cellspacing="0" border="0" class="container bloom">

Editing Newsletter Sections

The newsletter is comprised of distinct sections that are commented in the code the make them easy to identify. You can use the below reference to aid in locating and updating each distinct content section. If a content section is not needed for a newsletter, it can simply be removed by deleting all the code between Start and End comments of the section.

Featured Articles

Featured articles begin with the opening comment labeled <!– Start Featured Article X –>. Within each featured article, the following pieces of content will need to updated:

Image (sized to 1200 x 800px at 72dpi) along with updating the image alt attribute
Header and optional Subheder (the h2 and h3 tags, respectively)
Body copy
Button text
3 links (on the image, header, and button)

This is the HTML for a featured article:

<!-- Start Featured Article 1 --> 

<tr>
	<td>
		<table cellpadding="0" cellspacing="0" border="0" width="100%" class="article">
			<tr>
				<td>
					<a href="https://thehort.org"><img src="https://files.constantcontact.com/c49706e2801/49563352-2cdb-4f4d-92a3-8a81008429c7.jpg" alt="Article 1 Image" /></a>
				</td>
			</tr>
			<tr>
				<td>
					<table cellpadding="0" cellspacing="13" border="0" width="100%" class="article__header">
						<tr>
							<td>
								<h3><a href="https://www.thehort.org">Subheader</a></h3>
								<h2><a href="https://www.thehort.org">Article 1</a></h2>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td><div style="line-height:15px; height:15px;">&#8202;</div></td>
			</tr>
			<tr>
				<td>
					<p>Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo laoreet sit amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra.</p>
					<p>Sit amet aliquam id diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis in eu mi bibendum neque egestas congue quisque egestas diam in arcu cursus euismod quis viverra nibh.</p>
					<p>Cras pulvinar mattis nunc sed blandit libero volutpat sed cras ornare arcu dui vivamus arcu felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim sit.</p>
					<p><a href="htttp://thehort.org" class="button">Learn More</a></p>
				</td>
			</tr>
		</table>
	</td>
</tr>

<!-- End Featured Article 1 -->

Special Feature

The Special Feature section was developed to be used with an event with multiple dates and/or locations, but could be used for other purposes as needed. This section begins with opening comment labeled <!– Start Special Feature –>. Within the special feature, the following pieces of content will need to updated:

Header (the h1 tag)
Body copy
2 images (sized to 600 x 400px at 72dpi) along with updating the image alt attributes
Event schedule entries

This is the HTML for the Special Feature section:

<!-- Start Special Feature -->

<tr>
	<td>
		<table cellpadding="0" cellspacing="20" border="0" class="feature">
			<tr>
				<td>
					<h1>Special Event Name</h1>
				</td>
			</tr>
			<tr>
				<td>
					<p>Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat semper viverra nam libero justo laoreet sit amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra.</p>
				</td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td>
		<table cellpadding="0" cellspacing="0" border="0" class="feature--photos">
			<tr>
				<td><img src="https://files.constantcontact.com/c49706e2801/d5adda1e-e5e3-422c-8c26-748a3feb2676.jpg" alt="Photo Stack Image 1" /></td>
				<td><img src="https://files.constantcontact.com/c49706e2801/d5adda1e-e5e3-422c-8c26-748a3feb2676.jpg" alt="Photo Stack Image 1" /></td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td>
		<table cellpadding="0" cellspacing="10" border="0" class="feature feature--schedule">
			<tr>
				<td colspan="2">
					<h2>Event Schedule</h2>
				</td>
			</tr>
			
			<!-- Event schedule entry -->
			
			<tr>
				<td>
					<table cellpadding="15" cellspacing="0" border="0">
						<tr>
							<td>
								<h3>Thu Oct 26</h3>
								<ul>
									<li><a href="https://www.thehort.org/event/harvest-with-the-hort-at-trick-or-streets-71st-avenue-plaza/">71st Ave Plaza</a> 1:30-3:30pm</li>
								</ul>
							</td>
						</tr>
					</table> 
				</td>
			</tr>
			
			<!-- Event schedule entry -->
			
			<tr>
				<td>
					<table cellpadding="15" cellspacing="0" border="0">
						<tr>
							<td>
								<h3>Sat Oct 28</h3>
								<ul>
									<li><a href="https://www.thehort.org/event/harvest-with-the-hort-at-trick-or-streets-audubon-open-street/">Audubon Open Street</a> 2:00-4:00pm</li>
									<li><a href="https://www.thehort.org/event/harvest-with-the-hort-at-trick-or-streets-at-kensington-plaza/">Kensington Plaza</a> 3:00-6:00pm</li>
								</ul>
							</td>
						</tr>
					</table> 
				</td>
			</tr>
		</table>
	</td>
</tr>

<!-- End Special Feature -->

About Town

The About Town section begins with opening comment labeled <!– Start About Town –>. This section features rows of images with text alongside them and can be expanded and contracted as needed dependent on how many images are required for the specific newsletter. The placement of mage and text should be opposite in each subsequent row and comments in the code help identify when a photo is placed on the left of right. For each row, the following will need to be updated:

1 images (sized to 600 x 400px at 72dpi) along with updating the image alt attribute
Body copy

This is the HTML for the About Town section:

<!-- Start About Town -->

<tr>
	<td><h1 class="color-green">About Town</h1></td>
</tr>
<tr>
	<td><div class="spacer">&#8202;</div></td>
</tr>

<!-- About Town Row: Photo on Left -->

<tr>
	<td>
		<table cellpadding="0" cellspacing="0" border="0" width="100%" class="photo-stack">									
			<tr>
				<td><img src="https://files.constantcontact.com/c49706e2801/d5adda1e-e5e3-422c-8c26-748a3feb2676.jpg" alt="Photo Stack Image 1" /></td>
				<td align="left" valign="middle">
					<p>Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis.</p>
				</td>
			</tr>
		</table>
	</td>
</tr>

<!-- About Town Row: Photo on Right -->

<tr>
	<td dir="rtl">
		<table cellpadding="0" cellspacing="0" border="0" width="100%" class="photo-stack">										
			<tr>
				<td><img src="https://files.constantcontact.com/c49706e2801/d5adda1e-e5e3-422c-8c26-748a3feb2676.jpg" alt="Photo Stack Image 1" /></td>
				<td  dir="ltr" align="left" valign="middle">
					<p>Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis.</p>
				</td>
			</tr>
		</table>
	</td>
</tr>

<!-- End About Town -->

Mark Your Calendar

The Mark Your Calendar section begins with opening comment labeled <!– Start Mark Your Calendar –>. This section features rows of events and can be expanded and contracted as needed dependent on how many events are required for the specific newsletter. A spacer row is needed between each event row, which can be located by the comment <!– Event Row Spacer –>. For each event row, the following will need to be updated:

The day of the week (placed in the h4 tag)
The date of the event (placed in the first h2 tag)
The month of the event (placed in the h3 tag)
The title of the event (placed in the second h2 tag)
Event supporting copy
Button copy
2 links to the event (located on the second h2 tag and on the button)

This is the HTML for the Mark Your Calendar section:

<!-- Start Mark Your Calendar -->

<tr>
	<td><h1 class="color-purple-dark">Mark Your Calendar</h1></td>
</tr>
<tr>
	<td><div class="spacer--30">&#8202;</div></td>
</tr>

<!-- Event Row -->

<tr>
	<td>
		<table cellpadding="0" cellspacing="0" border="0" class="calendar-event">
			<tr>
				<td class="calendar-event__date" valign="top">
					<table cellpadding="0" cellspacing="0" border="0" width="100%">
						<tr>
							<td>
								<h4>Tues</h4>
								<h2>11</h2>
								<h3>Jul</h3>
							</td>
						</tr>
					</table>
				</td>
				<td><i class="calendar-event__spacer">&#8202;</i></td>
				<td class="calendar-event__details" valign="top">
					<h2><a href="https://www.thehort.org/public-events/">Cookbook Club</a></h2>
					<p>Share the food stories close to your heart and home while pouring over cookbooks in community</p>
					<a href="https://www.thehort.org/public-events/" class="calendar-event__details__action">Learn More <img src="https://files.constantcontact.com/c49706e2801/c36106c5-4555-4588-8a1c-caf8ee850fe5.png" alt="Arrow" /></a>
				</td>
			</tr>
		</table>	
	</td>
</tr>

<!-- Event Row Spacer -->

<tr>
	<td><div class="spacer--30">&#8202;</div></td>
</tr>

<!-- Event Row -->

<tr>
	<td>
		<table cellpadding="0" cellspacing="0" border="0" class="calendar-event">
			<tr>
				<td class="calendar-event__date" valign="top">
					<table cellpadding="0" cellspacing="0" border="0" width="100%">
						<tr>
							<td>
								<h4>Tues</h4>
								<h2>11</h2>
								<h3>Jul</h3>
							</td>
						</tr>
					</table>
				</td>
				<td><i class="calendar-event__spacer">&#8202;</i></td>
				<td class="calendar-event__details" valign="top">
					<h2><a href="https://www.thehort.org/public-events/">Cookbook Club</a></h2>
					<p>Share the food stories close to your heart and home while pouring over cookbooks in community</p>
					<a href="https://www.thehort.org/public-events/" class="calendar-event__details__action">Learn More <img src="https://files.constantcontact.com/c49706e2801/c36106c5-4555-4588-8a1c-caf8ee850fe5.png" alt="Arrow" /></a>
				</td>
			</tr>
		</table>	
	</td>
</tr>

<!-- End Mark Your Calendar -->

Spacers

Between each section of the newsletter there is a spacer that creates vertical white space. When adding or removing sections of the newsletter, these spacers also need to be added or removed as needed. The spacer code is not directly commented, but can be found between the End and Start comments between each section. The spacer class by default adds 15px of vertical space. More space can be added by using the spacer–30 class to add 30px of vertical space, or the spacer–50 class to add 50px of vertical space.

The HTML for a spacer is:

<tr>
	<td><div class="spacer">&#8202;</div></td>
</tr>