Email template module coded question

[tahsin]

Have a question for those who code email templates from scratch. I usually would add in the text area and image module seperately for the end user to change so they wont mess up the source code much for example.

<!-- left -->
				<table width="300" align="left" cellpadding="0" cellspacing="0" border="">
					<tr>
						<td>
							{% textarea "my_textarea" label='Enter plain text block', value='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolor architecto quod eveniet odit assumenda? Officia illum atque odit ipsum voluptas distinctio repellat, molestiae ducimus excepturi, quidem incidunt omnis? Sapiente.', no_wrapper=True %}
						</td>
					</tr>
				</table>

				<!-- right -->
				<table align="right">
					<tr>
						<td>
							{% image "executive_image" label='Executive photo', alt='Photo of Brian Halligan', src='http://placehold.it/150x150', width='150' %}
						</td>
					</tr>
				</table>

But the thing is sometimes the end user  wants option to delete certain areas on their own, example they dont want 3 rows but 2 instead and that is only done by the going to the source code of the template instead.

The other method I notice where the end user has the option where they can delete and have full control if I nest in the code in the 

{% content_attribute "email_body" %} like

{% content_attribute "email_body" %}
				<!-- left -->
				<table width="300" align="left" cellpadding="0" cellspacing="0" border="">
					<tr>
						<td>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolor architecto quod eveniet odit assumenda? Officia illum atque odit ipsum voluptas distinctio repellat, molestiae ducimus excepturi, quidem incidunt omnis? Sapiente.
						</td>
					</tr>
				</table>

				<!-- right -->
				<table align="right">
					<tr>
						<td>
							<a href="http://placehold.it"><img src="http://placehold.it/150x150"></a>
						</td>
					</tr>
				</table>
				{% end_content_attribute %}

this way I notice from the hubspot wysiwyg they easily have the option to delete row and tables on their own. So was wondering which method you guys usually use when developing templates for your end users. 🙂

cheers

Tahsin

[Ty]

Hi @tahsin,

Have you considered using if conditionals? Currently according to HubL docs, if conditionals relating to a contact record are not supported, however conditionals related to the document are.

So what you could do is use a module to check whether there is content there, if there is content, show it. If no content exists, hides. Tables work perfectly for this because the sum of your tablecells will always be 100% the table itself. So if you had 3 rows, but a client only used 2, the rows would scale from 33.3% each, in to 50% each.

You could do this by using something along these lines:

<table width="300" align="left" cellpadding="0" cellspacing="0" border="">
	<tr>
		{% text "section_header1" label='What is the headline for section1?' value='', export_to_template_context=True %}
		{% textarea "textarea1" label='Enter plain text block 1', value='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolor architecto quod eveniet odit assumenda? Officia illum atque odit ipsum voluptas distinctio repellat, molestiae ducimus excepturi, quidem incidunt omnis? Sapiente.', export_to_template_context=True %}
		
		{% text "section_header2" label='What is the headline for section3?' value='', export_to_template_context=True %}
		{% textarea "textarea2" label='Enter plain text block 2', value='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolor architecto quod eveniet odit assumenda? Officia illum atque odit ipsum voluptas distinctio repellat, molestiae ducimus excepturi, quidem incidunt omnis? Sapiente.', export_to_template_context=True %}
		
		{% text "section_header3" label='What is the headline for section1?' value='', export_to_template_context=True %}
		{% textarea "textarea3" label='Enter plain text block 3', value='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, dolor architecto quod eveniet odit assumenda? Officia illum atque odit ipsum voluptas distinctio repellat, molestiae ducimus excepturi, quidem incidunt omnis? Sapiente.', export_to_template_context=True %}

		<!-- if header1 exists | show td1 -->	
		{% if widget_data.section_header1.value %}
		<td>
			<h2>{{ widget_data.section_header1.value }}</h2>
			<p>{{ widget_data.textarea1.value }}</p>
		</td>
		{% else %} 
		{% endif %}

		<!-- if header2 exists | show td2 -->	
		{% if widget_data.section_header2.value %}
		<td>
			<h2>{{ widget_data.section_header2.value }}</h2>
			<p>{{ widget_data.textarea2.value }}</p>
		</td>
		{% else %} 
		{% endif %}

		<!-- if header3 exists | show td3 -->	
		{% if widget_data.section_header3.value %}
		<td>
			<h2>{{ widget_data.section_header3.value }}</h2>
			<p>{{ widget_data.textarea3.value }}</p>
		</td>
		{% else %} 
		{% endif %}

	</tr>
</table>

This way, you declare all of your modules, and it's set up to have 3 sections, but if a user only wants 2, they only fill out the two. You may need to add some more instruction in the help text letting them know this, but it should work out pretty well. If there is no content in the header module, it won't even render that <td> element.

Hope this helps you get the effect you're going for, let me know if I can answer anything else for you!

-- Ty