I have a HTML email designed in tables to support older email clients. I am using sendgrid so the image value is displayed using an {{#each}}
This works fine on most newer clients and browsers but on Mac Mail and Outlook up to 2016 the main image does not show the first time you view the email. If you view another email in your inbox and go back to that one it magically appears. Also once its cached it will appear every time.
This is how I am displaying the image.
<td class="img-container">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
Im adding this here because I couldnt find any way to solve this by searching. I hope this helps you. To solve this weird bug you need to reserve the space in your HTML for the img. You can do that with a width and height style on the td
<td class="img-container" style="width: 100%; height: 380px;">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
Related
I have to build a template to send for mail using mjml with jinja2 template. I have inserted an image. After sending the mail the image only shows up in the Gmail web version, mobile version (Gmail app) the image can't load (it display a blue box with a question mark). I got the same problem with outlook. The image was stored in google photoes. I wonder why I have tried , the image inside raw with all attributes image as background-url inside a div but nothing worked for me!! How could I possibly encounter this issue?
<!--chart-->
<mj-section border-left="solid 2px #bebebe" border-right="solid 2px #bebebe">
<mj-column>
<mj-text align="center">
<!--Svg have not worked for me since it is not supported-->
<!-- <mj-raw>
<div class="chart flex col center">
{{data.chart|safe}}
</div>
</mj-raw> -->
<!-- mj-image does not display in mobil-->
<!-- <mj-image align="center" src="{{data.chart}}" /> -->
<!-- background URL also -->
<mj-raw>
<div class="chart flex col center" style="width: 100%; height:350px; display: block; background: url({{data.chart}}); background-size: contain; backgound-repeat:no-repeat; background-position: center;">
</div>
</mj-raw>
<!-- Simple image also-->
<!-- <mj-raw>
<div class="chart flex col center">
<img src={{data.chart}} width="200" alt="report" title="report" height="400px" style="display:block">
</div>
</mj-raw> -->
</mj-text>
</mj-column>
</mj-section>
<!--/chart-->
I have a header in my email with a logo on the right and some links on the left (all on one line). Works fine, but when viewed on a mobile device, the links on the left overflow to two lines.
I'd ideally like to have the mobile version display the logo on the top line and the links below it like the following:
DESKTOP:
Logo Link 1 Link 2 Link 3
MOBILE:
Logo
Link 1 Link 2 Link 3
How would I achieve this?
My code:
<table class="row header">
<tr>
<td class="center" align="center">
<center>
<table class="container" style="border-bottom: 1px solid;border-bottom-color:#bdc3c7">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="four sub-columns full-size">
<img class="left" style="float:left;width:180px !important;" src="#" width="180px">
</td>
<td class="eight sub-columns last full-size" style="text-align:right; vertical-align:middle;">
Link1</span> <span style="color:black;font-weight:100">Link2</span> <span style="color:black;font-weight:100">Link3</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
I'm not really sure what certain classes do in your html as I'm used to working with Inky, the templating language of Foundation for Email 2 but the work-around should be sort of the same.
Because of the way css works (cascading style sheets) you'll need to override the inline styles and the wrapping with a few !important lines in a media query at the top of your mail in the style tag.
For example:
#media only screen and (max-width: 480px){
td .example-class { width: 100% !important };
}
Or if you're using Inky only use the attribute large on your <columns> tag. Consequently, the small attribute will copy the value of the large attribute.
Your links'll be pushed under your logo as its container is taking up the full width.
To display your logo in the center (if you are using Foundation for Email 2):
.float-center class on the <img> element
align="center" attribute on the <img> element
Wrap the <img> with <center> tags (needed for Outlook 2007, 2010, and 2011)
Or when using Inky: A center tag around your img would be enough to do the job.
Source for aligning an img: https://foundation.zurb.com/emails/docs/alignment.html
Lately me and my QA buddies are trying to find a way to make Selenium IDE (v2.2 with FireFox v22) type a text into NicEdit's textarea, but without success.
We took a look on the internet for the past few days, and so far we discovered, among other things, that NiceEdit is not an iFrame (I think many here already know that).
We're not using code nor any other webdrive, just Selenium IDE, which makes things a bit harder, I guess.
We've tried xpath, class, id etc... no success.
But in these cases, the Find button in Selenium highlights the area.
So, is there a way to make Selenium IDE type in the NiceEdit's textarea without code?
Here's the html code of NicEdit's textarea provided by FireBug.
<div contenteditable="true" class="span12 " data-bind="html: Conteudo" id="conteudo" style="background-color: rgb(255, 255, 255);">
</div>
And the rest before it:
<div id="editorPanel" style="width: 100%;" unselectable="on">
<div class=" nicEdit-panelContain" style="overflow: hidden; width: 100%; border: 1px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239);" unselectable="on">
<div class=" nicEdit-panel" style="margin: 0px 2px 2px; overflow: hidden;" unselectable="on">
</div>
</div>
<div id="conteudo" class="span12" contenteditable="true" data-bind="html: Conteudo">
</div>
EDIT: I've found out that NicEdit turns the textarea into a div, so Selenium is not able to focus on the area.
Anyone has any sugestions about how can I make Selenium put some text on NicEdit?
Thanks!
<tr>
<td>storeEval</td>
<td>this.browserbot.findElement("id=someID").innerHTML='fillerText'</td>
<td></td>
</tr>
Does the above work for you?
I'm creating a newsletter and I observed that in Yahoo mail a blue border is added to the images inside a link. I already checked other forums and you can solve this by applying any of these two options in the CSS inline:
border:none;
border:0;
This does work and you wont see the blue border on yahoo mail. The problem is that for my design I want to add a border-color to the image as link. So if I apply this solution for Yahoo mail I will have no border on the images.
Is there any way which I can solve this issue?
Here you have my code:
<tr>
<td width="260px">
<a href="#">
<img alt="" src="link-to-image/pic1.jpg" style="width:258px;border: rgba(235, 173, 21, 0.5) 1px solid;display:block;" />
</a>
</td>
</tr>
try border="1" border-color="#005288" in your image tag. Always use the 6-digit hex code also.
I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.