Template Modularization

[Jsum]

I've been playing around with the idea of template modularization within the Hubspot COS, The idea being that you would create multiple layout and section options that are controlled via the page editor. Today I build this pretty simple example for a client project. I would really like some feedback.

What this does is:

1. allow you choose if you want to use a banner image

2. if yes, then allows you to choose if you want to use a block image or background image

3. if background image then allows you to choose if you want to use text inside the div using the background image. 

There are 3 different size and align options. 

The only thing I don't like with this idea is that, in the case where modules are added or removed from the page conditionally, you have to refresh the page in order to see the change in modules. At the moment I think this is the only draw back. This is one of the things I am hoping to get some feed back on.

I built this for an email template however it should work in a custom HTML/HubL module on any page, You'll just have to copy and paste the code into the template. 

Head:

<style>
    #contentTableOuter {
    	padding: 0 !important;
    	padding-top: 0 !important;
    	padding-bottom: 0 !important;
    	padding-left: 0 !important;
    	padding-right: 0 !important;
    	background: #ffffff !important;
    }
    
    .page_center {
    	margin: 20px auto !important;
    	display: block !important;
    	width: 95% !important;
    	float: none !important;
    	margin-left: auto !important;
    }
    
    div.banner_image {
        min-height: 100px !important;
        padding: 50px 0 !important;
    }
    
    .banner_image {
    	display: block !important;
    	height: auto !important;
    }
    
    .banner_image.left {
    	margin: 0 auto 0 0 !important;
    }
    
    .banner_image.right {
    	margin: 0 0 0 auto !important;
    }
    
    .banner_image.center {
    	margin: 0 auto !important;
    }
    
    
    .banner_image.large {
    	width: 100% !important;
    	max-width: 100% !important;
    }
    
    .banner_image.medium {
    	width: 80% !important;
    	max-width: 80% !important;
    }
    
    .banner_image.small {
    	width: 50% !important;
    	max-width: 50% !important;
    }

</style>

Custom HTML/HubL Module:

{% choice "use_banner_image" label="Use Banner Image?", value="Yes" choices="Yes, No", export_to_template_context=True %}

{% set useImage = widget_data.use_banner_image.value %}

{% if useImage == "Yes" %}

    {% image "banner_image" label='Banner Image', alt='', src='', export_to_template_context=True %}

    {% choice "banner_image_toggle" label="What Type of Image?", value="Background Image" choices="Background Image, Block Image, No Image", export_to_template_context=True %}
    
    {% choice "banner_image_size" label="What Size Image?", value="Full" choices="Small, Medium, Full", export_to_template_context=True %}
    
    {% choice "banner_image_align" label="Align Image?", value="Center" choices="Left, Right, Center", export_to_template_context=True %}
    
    {% set BI_src=widget_data.banner_image.src %}
    
    {% set BI_alt = widget_data.banner_image.alt %}
    
    {% set imageType = widget_data.banner_image_toggle.value %}
    
    {% set imageSize = widget_data.banner_image_size.value %}
    
    {% set imageAlign = widget_data.banner_image_align.value %}
    
    {% if imageType == "Background Image" %}
    
        {% choice "text_over_image" label="Place Text Over Image?", value="Yes" choices="Yes, No", export_to_template_context=True %}
        
        {% set yesText = widget_data.text_over_image.value %}
        
        {% if yesText == "Yes" %}
        
            <div style="background: url({{ BI_src }}) center no-repeat; background-size: cover;" class="banner_image {% if imageSize == 'Small' %}small{% elif imageSize == 'Medium' %}medium{% elif imageSize == 'Full' %}large{% endif %} {% if imageAlign == 'Left' %}left{% elif imageAlign == 'Right' %}right{% elif imageAlign == 'Center' %}center{% endif %}">
                
                {% widget_block rich_text "Banner Text" overrideable=True, label='Banner Text', no_wrapper=True  %}
                    {% widget_attribute "html" %}
                            <h1>Something Powerful</h1>
                            <h2>Tell The Reader More</h2>
                    {% end_widget_attribute %}
                {% end_widget_block %}
                
            </div>
        
        {% else %}
        
            <div style="background: url({{ BI_src }}) center no-repeat; background-size: cover;" class="banner_image {% if imageSize == 'Small' %}small{% elif imageSize == 'Medium' %}medium{% elif imageSize == 'Full' %}large{% endif %} {% if imageAlign == 'Left' %}left{% elif imageAlign == 'Right' %}right{% elif imageAlign == 'Center' %}center{% endif %}">
                
            </div>
        
        {% endif %}
    
    {% elif imageType == "Block Image" %}
    
        <img src="{{ BI_src }}" alt="{{ BI_alt }}" class="banner_image {% if imageSize == 'Small' %}small{% elif imageSize == 'Medium' %}medium{% elif imageSize == 'Full' %}large{% endif %} {% if imageAlign == 'Left' %}left{% elif imageAlign == 'Right' %}right{% elif imageAlign == 'center' %}center{% endif %}">
    
    {% endif %}

{% endif %}

[Ty]

Thanks for the link @roisinkirby.

@Jsum, this is pretty unique. Have you thought about using custom modules to add even more customization? I've been seeing a lot of landing pages made out of only a flex-column, then users who don't know code can go in and add custom modules to build what they want. With a robust stylesheet, you should be able to keep everything sticking to the style guide pretty well.

I've never seen this type of modularization for an email template though, thanks for sharing!

[Jsum]

@roisinkirby,

Thanks, and yes @Ty I have used custom modules for this. In my opinion this is more robust, and if the ordering of modules and having to refresh on update could be solved this would be a much more user friendly option that is so scalable you could create hundreds of unique pages from one template. 

[roisinkirby]

Thanks for sharing @Jsum!

@Ty wanted to share this with you 🙂