Template Builder Questions: unable to change size of header image/logo in code

  • 1
  • Problem
  • Updated 2 years ago
  • Not a Problem
I am using the template builder to create an email template and when I input the clients logo as a header image, it resizes to fit within the pre-determined constraints listed in the template. I would like to make this section larger and have experience working in email template coding, HTML and CSS. 

In the code I can find the image here:

[% image url="http://cdn.e2ma.net/userdata/1759532/images/templates/y-and-s/y-and-s_03.png"; width="105" %]	
{
"url": "//s3.amazonaws.com/emma-assets/a/87fa0f81064c604df5b3e8cd6d2eaa7e/761510b935e6413998473a023f312904.png",
"assetId": 220941004,
"width": 328,
"height": 227,
"displayWidth": 105,
"displayHeight": 72.66768292682927,
"alt": "",
"href": null,
"filePath": "//s3.amazonaws.com/emma-assets/a/87fa0f81064c604df5b3e8cd6d2eaa7e/761510b935e6413998473a023f312904.png",
"source": "emma",
"forceEmpty": false,
"locked": false,
"type": "image"
}
[%/ image %]

The actual image I am trying to upload is (as shown) 328 px wide and 227 px high. It is displaying in the template at the "displayWidth" and "displayHeight" dimensions listed directly underneath the image dimensions within this snippet of code. I assumed that if I changed the "displayWidth" and "displayHeight" dimensions to fit the size that I want, this would reflect in my template. However after saving the page it reverts back to the original (small) dimensions of "displayWidth:" 105, "displayHeight": 72.66768292682927, ... I even tried deleting these rows of code altogether and they simply reappear the minute I save my changes. 

How can I make my logo/header image larger?

As an additional (but not insignificant) side note, several times that I have tried to change the code in template builder I loose all of the other content that I've put into the template leading up to that moment. Even for edits as small as changing a css class on a link to "underlined" (a previous example). This instance of trying to update code in the template builder was no exception. How can I make updates to my code without consistently (and seemingly randomly) loosing all of the other work that I've put in up until that point? As I'm sure you can imagine, this issue creates a consistently unreliable and inefficient work flow and puts strain on estimated time-tracking within my day's schedule, and by extension the schedule of my team.  

I am using Safari 9.0.3
Photo of Kelsy Postlethwait

Kelsy Postlethwait

  • 5 Posts
  • 1 Reply Like

Posted 2 years ago

  • 1
Photo of Drake University

Drake University

  • 7 Posts
  • 3 Reply Likes
Official Response
Yeah, don't touch that code, the template will explode. From my experience it doesn't work to modify. You should place a container around the space you want the image and have set to 100% width of that container. Then you can maintain the mobile responsiveness in the CSS through the @media query.

I use a full width image at the top of mine using this code:

[% image url="https://s3.amazonaws.com/emma-assets/5ay/968443cdb2eb1e9caaf8125cf90b7090/-cphs_main2_v4_header.gif&...; width="600" %] {
"url": "//s3.amazonaws.com/emma-assets/5ay/968443cdb2eb1e9caaf8125cf90b7090/-cphs_main2_v4_header.gif",
"assetId": 220381163,
"width": 600,
"height": 143,
"displayWidth": 600,
"displayHeight": 143,
"alt": "",
"href": null,
"filePath": "",
"source": "emma",
"forceEmpty": false,
"locked": false,
"type": "image",
"sizing": "original"
}
[%/ image %]

I only modify the top part: [% image url="https://s3.amazonaws.com/emma-assets/5ay/968443cdb2eb1e9caaf8125cf90b7090/-cphs_main2_v4_header.gif&...; width="600" %] 

The bottom part in brackets is touchy. This is what makes it explode.

Inset in HTML with the insert tool in the drop down at the top. It makes this, don't modify anything else that might get generated later:

[% image name="IMAGE_NAME" url="URL_VALUE" width="650" %][%/ image %]
^^^ THis might be all you need.


Then apply the styles to the <TD>, image just sets in this (This might get in the weeds a little): 
<td align="right" class="editable_image" valign="top">

CSS:

.e2ma-template .editable_image img {    display: block;
    border: 0
    }
@media screen and (max-width: 480px) {
   .e2ma-template *[class].center, .e2ma-template *[class].center img {        text-align: center !important;
        margin: 0 auto
        }
    .e2ma-template *[class].scale img, .e2ma-template *[class].editable_image img {
        max-width: 100%;
        height: auto;
        margin: 0 auto
        }
}
(Edited)