Template Builder and "editable_image" class

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: resolved

I have been working on a new base template for all our Agency Accounts with the new Template Builder. I am experience with Media Queries and CSS, but am stuck with making an editable images responsive for mobile.

I placed the following code in template for an editable header image:

[% image name="IMAGE_NAME" url="URL_VALUE" width="600" %][%/ image %]
This is the exact code the template editor generates via the template tag selector, with one modification from 650 to 600.

Per the CSS descriptions earlier on the page I added the following code for class "editable_image" to the previous table that this image selector is located:

<td align="left" valign="top" style="background-color:#ffffff;" class="editable_image">[% image name="IMAGE_NAME" url="URL_VALUE" width="600" %][%/ image %]</td>

I have tried several different options, with <span> tags and <div> tags also adding class to the JSON code, but the end result is the responsive code never takes effect and the image is not responsive on mobile devices. The image stays at 600px and causes the user to either see very small text, or scroll side to side. 

If you don't select this header image in my template and included images and text, everything else works perfectly and scale to mobile device, so I have isolated this issue to this specific block of code.

If anyone has some sample code where they have added a image selector outside the main flexible layout area and were able to get the images to scale for the mobile media quere I would love to see your code. Thanks.
Photo of Jeremy Sievers

Jeremy Sievers

  • 13 Posts
  • 5 Reply Likes

Posted 5 years ago

  • 0
  • 1
Photo of Jeremy Sievers

Jeremy Sievers

  • 13 Posts
  • 5 Reply Likes
This reply was created from a merged topic originally titled
Template Builder, editable image selector issue, plus default image value?.


This is a mix of a problem/question/idea. 

I have been working on a new base template for all our Agency Accounts with the new Template Builder. I am experience with Media Queries and CSS, but am stuck with making an editable images responsive for mobile.

I placed the following code in template for an editable header image:
[% image name="IMAGE_NAME" url="URL_VALUE" width="600" %][%/ image %]

This is the exact code the template editor generates via the template tag selector, with one modification from 650 to 600.

If I save this and go into an account and create a campaign, I get the following result:

 

The images appears as a large 600x600 broken image. If I click on the Trash can icon at lower right of space in yellow, I get more of what I would have expected from placing that editable image selector in my template:



So, my question has several parts: 
  • Is something wrong with the tag and is this a bug?
  • Am I just using the editable image tag incorrectly, there is zero documentation on this?
As a follow up question:
  • Is there a way to place an editable image in a template with a default value, just like the editable text has an option in the documentation for a default value?

    (if this feature did exist, it would same me the template developer within our agency from creating the vast majority of our templates, one single default template would work for every office, rather then the multitude of template that become single use.)
Thanks,

Jeremy
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hey Jeremy! Thank you for all of the detailed info. We're not HTML coders here, but I'm going to have one of my colleagues take a look who is a little bit more well versed to see if anything sticks out to her on that template. I'll be sure to give you a shout once I hear back from her.

Thanks again!
Photo of Jeremy Sievers

Jeremy Sievers

  • 13 Posts
  • 5 Reply Likes
Thanks Tyler, I am a little frustrated with the lack of support for the template editor. I have been doing this type of work for quite a while and there isn't any complete documentation available for the template builder and there also doesn't seem to be much of a community around this, although there have to be a good number of people using it.

It is very frustrating, particularly with all our old templates being turned to read only. The flexibility of the new template system is great, but there these two items that are holding us back from full implementation. I have probably 30 users waiting on me.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hi Kelsey -- Since this thread is a few years old, I'd love to know more about what specific frustrations you're running into with the Template Builder. We've recently update our Template Builder help documentation in light of the drag and drop functionality updates. Have you had a chance to check out that resource? We also had our design team put together these video tutorials, which you might find helpful as well.

If you're encountering some recurring issues, I'd love to dig in and see how I can help! 
(Edited)
Photo of Kelsy Postlethwait

Kelsy Postlethwait

  • 5 Posts
  • 1 Reply Like
Hi Emily, 

Thank you for your quick and detailed response. I have referenced the Template Builder help documentation and am familiar with the video tutorials as well. I noticed that this thread was an older one, and have created my own thread/question for the current problem that I am experiencing. My post includes a note on the recurring issues that I have dealt with over the past couple of months as well - it can be found here: https://community.myemma.com/emma/topics/template-builder-questions-unable-to-change-size-of-header-... 

- Kelsy 
Photo of Drake University

Drake University

  • 7 Posts
  • 3 Reply Likes
I think everyone on this tread should note, after this original post I made here, the template build has completely changed. I personally started from scratch and rebuild all my templates after this a few months ago. It is still very important to do your testing on different platforms, especially the older outlook on PC and the web version of office 365.
  1. The "padding" css is ignored in some instances and "margin" needs to be relied on quite often. 
  2. The background color has move into the template settings, but doesn't work all the time, this is another glitch with Microsoft and Outlook. Especially the 365 web applications that strip and change the code significantly.
  3. There some some occasions that there were genuine errors in the display of the rendered code and subsequent flipping back and forth would break and then strip out your work, so save your templates externally. VERY IMPORTANT!
My best advice is that unless you know how to code css and have experience with coding for html email. Don't pretend that you do. It is not standard HTML and not all the rules apply. Everyone experiments and sometimes it would just be worth you time to have Emma professional services build and manage your templates.
Photo of Drake University

Drake University

  • 7 Posts
  • 3 Reply Likes
Oh yeah...."Jeremy Sievers" and "Drake University" are the same person, Me!

-Jeremy 
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Thank you Kelsey and Jeremy for the updates!

Kelsey, our support team will be addressing your new post very soon!
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Good morning Jeremy! Sorry for the frustrations and I'll be sure to share your feedback with our team regarding the need for a more in-depth template builder resource guide. I'm glad you've jumped into our Community though as this is a great arena where other customers can chime in, while perhaps helping each other. Especially with these more technical and code driven conversations.

On to the good stuff! So my colleague noticed that you don't need to add url="URL_VALUE" unless you're actually inserting an image source URL there. This is what was causing the broken image. So you can either remove the insert url="URL_VALUE" or insert a real image url there, so an image appears by default.

With the mobile optimization, are you by chance working in Firefox? FF currently has a weird issue with mobile preview (in the app only), not in the actual inbox. Our design team has been looking into this, but I do not have an exact timeframe of when this may be resolved. We've saved a template, titled .07.10.14, in your account which we removed that url="URL_VALUE" to get rid of the broken image. Looking at a new mailing with this template in Chrome (in the app) and the inbox, the template is indeed mobile optimized. 

Hopefully this helps get you rolling in the right direction, but please let us know if we can assist further.
Photo of Jeremy Sievers

Jeremy Sievers

  • 13 Posts
  • 5 Reply Likes
I have been using Chrome.  I will take a look and report back. 

Thanks!
Photo of Jeremy Sievers

Jeremy Sievers

  • 13 Posts
  • 5 Reply Likes
I am super happy!!! Works absolutely perfect. Everything I need. 

For documentation sake and others that stumble on this.

The CSS in media area:

*[class].scale img, *[class].editable_image img {		max-width: 100%;
height: auto;
margin: 0 auto;

My table row header:

<tr>                      <td align="left" valign="top" style="background-color:#ffffff;" class="editable_image">[% image url=" http://cdn.e2ma.net/userdata/39593/assets/maindraketempateheader.gif"; width="600" %][%/ image %]</td>
                    </tr>

This put in my default image for a given template, is replaceable if the users wants and is mobile optimized.

Perfect!

Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hey Jeremy! Glad to hear that did the trick!
Photo of whitney

whitney

  • 8 Posts
  • 0 Reply Likes
Having a similar issue! I'm using a flex image tag in a template that I've built, and it's sending out with a little 3px; space between rows of images. Here's my issue: https://community.myemma.com/emma/topics/template_builder_tool_space_between_rows_of_images?rfm=1&am... Tyler, I would be so happy if you could take a look and let me know how to resolve! Syle="display:block" is not helping. Thanks, my clients and I are waiting patiently :)
(Edited)
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hey Whitney! I wanted to close the loop here as I just posted on your original conversation.

Thanks again!
Photo of WWC

WWC

  • 51 Posts
  • 5 Reply Likes
Thank you to Jeremy for posting the code that worked for him. I was very excited to find this because like him I am also frustrated by the lack of support for the template builder. Unfortunately his code did not work for me.

According to the template builder help in the account resources and the notes that are included in the code when I start a new template, adding class="scale" should force what's included in the header td to scale. However it does not.

There should be an easy way for those of us comfortable with working with the code to be able to create mobile responsive templates from the stationery that had been created in the stationery builder (that when converted to templates for use in the drag & drop editor did not become mobile responsive) without having to pay extra to have it done or to have a tutorial session. While I do understand that people to be paid for their expertise & personal support, I'm not yet generating a profit that makes it easy for me to pay an additional several hundred dollars for that help.

Are there any additional resources you can point me to so I can figure out how to get those templates that were created from stationery created in the stationery builder to be mobile responsive?

Thank you.
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hello! Can you please let me know which template you're currently working in? I can then dig in there to see if anything jumps out at me.

Thanks!
Photo of WWC

WWC

  • 51 Posts
  • 5 Reply Likes
Hi Tyler,
Can I email you with that info?
I think I got it to display well on the phone & tablet. It's not completely mobile responsive but it does size down well.
Thank you!
Photo of WWC

WWC

  • 51 Posts
  • 5 Reply Likes
Hi Tyler,
Can I email you with that info?
I think I got it to display well on the phone & tablet. It's not completely mobile responsive but it does size down well.
Thank you!
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Good morning! Sure thing and you can send that over to support at myemma dot com. Please just go ahead and make it to my attention.

Thanks!
Photo of WWC

WWC

  • 51 Posts
  • 5 Reply Likes
Hello!

Are changes being made to the template builder? Over the past week or so when I create a new template the notes are gone from the code.

Also, is the basic template that we start with when creating a new template mobile responsive?

Thank you!
Debbie
Photo of Katie Lewis

Katie Lewis, Official Rep

  • 3414 Posts
  • 309 Reply Likes
Hi Debbie! I'm forking your questions into a new post so others wondering the same can easily find them. :) Please reference the new topic here: Template Builder questions: Notes and mobile responsiveness