Having difficulty adding custom module to my HTML e-mail template


#1

I am attempting to add a hero image to one of my custom HTML e-mail templates. Currently to change the image I have to go into the template and change the image source manually. What I would like to do is make it so that from the front end, there is a way for the person populating the e-mail newsletter to click to upload a hero image without ever having to go into the template.

I’ve read the documentation on custom modules but am having trouble getting it to work properly. I’ve tried adding the following code into my HTML template where I want the image to be, but nothing is rendering:

    {% custom_widget "hero_image" widget_name="hero", label="Hero Image" %}

    {% if widget.hero.src %}
         <img src="{{ widget.hero.src }}" width="100%" height="auto" align="center" style="margin:0 auto; width:100%; height:auto; max-width:100%;" alt="{{ widget.hero.alt }}">
    {% endif %} 

Any help would be much appreciated!


#2

In your template code, you could just use an image_src HUBL module

Here’s just the image element you can use:

<img align="center" class="float-center full-width-image mso-full" src="{% image_src "img_01_herobanner" label="Hero Image" src="https://setyourdefaultheroimagehere.jpg" no_wrapper="true" %}" style="-moz-osx-font-smoothing:grayscale;-ms-interpolation-mode:bicubic;-webkit-font-smoothing:antialiased;Margin:0 auto;clear:both;display:block;float:none;margin:0 auto;max-width:100%;min-width:100;outline:0;text-align:center;text-decoration:none;text-rendering:optimizeLegibility;width:650px" width="650">

And, here’s a full example of the hero image working across all platforms (even outlook). You could add this element as a child of your template container.

                        <table align="center" class="container" style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;Margin:0 auto;background:#fefefe;border-collapse:collapse;border-spacing:0;margin:0 auto;padding:0;text-align:inherit;text-rendering:optimizeLegibility;vertical-align:top;width:650px">
                            <tbody style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility">
                                <tr style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:0;text-align:left;text-rendering:optimizeLegibility;vertical-align:top">
                                    <td style="-moz-hyphens:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding:0;text-align:left;text-rendering:optimizeLegibility;vertical-align:top;word-wrap:break-word">
                                        <table class="row" style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;text-rendering:optimizeLegibility;vertical-align:top;width:100%">
                                            <tbody style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility">
                                                <tr style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:0;text-align:left;text-rendering:optimizeLegibility;vertical-align:top">
                                                    <th class="small-12 columns no-pad fullwidth-image-wrapper" style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:0;padding-right:0;text-align:left;text-rendering:optimizeLegibility">
                                                        <table style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;text-rendering:optimizeLegibility;vertical-align:top;width:100%">
                                                            <tbody>
                                                                <tr style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:0;text-align:left;text-rendering:optimizeLegibility;vertical-align:top">
                                                                    <th style="-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-rendering:optimizeLegibility"><img align="center" class="float-center full-width-image mso-full" label="Hero Image" src="{% image_src "img_01_herobanner" label="Hero Image" src="https://setyourdefaultheroimagehere.jpg" no_wrapper="true" %}" no_wrapper="true" style="-moz-osx-font-smoothing:grayscale;-ms-interpolation-mode:bicubic;-webkit-font-smoothing:antialiased;Margin:0 auto;clear:both;display:block;float:none;margin:0 auto;max-width:100%;min-width:100;outline:0;text-align:center;text-decoration:none;text-rendering:optimizeLegibility;width:650px" width="650" /></th>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </th>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>