I've wrote a HTML Newsletter and have a link (a href) around my image.
It's typical and valid HTML code.
But if I test my newsletter on iPhone and try to click on that image to follow my link.
iphone menu pops out and I can share the link, save the image .. etc. but I cannot open the Link!
I don't know why?! AAaargh.
It's a HTML Newsletter, I can't use JavaScript.
<td width="253" valign="middle">
<a href="http://mydomain.com/mydocument.pdf" target="_blank">
<img src="http://mydomain.com/button.png" width="253" height="39" alt="My Image" style="display:block;" border="0" />
</a>
</td>
The solution is ...
Make a Imagemap over the graphics-element It' works
<img src="button.png" width="253" height="39" alt="" style="display:block;" border="0" usemap="linkmap" />
an then .
<map name="linkmap">
<area shape="rect" coords="0,0,253,39" href="http://mydomain.com/mydocument.pdf" target="_blank" alt="" />
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
I have tried searching for a solution everywhere but could not find it. Hence posting a request here.
We have a website built on php code-ignition MVC framework, but the issue is with HTML rendering over various devices imo. a certain section on the bottom of the a rendered page disappears on iphone, it renders fine on ipad and normal browser. I have saved the page as HTML and am able to successfully reproduce it via chrome for devices (from developer tools), by switching over various devices.
The designer who helped create these templates are not accessible anymore, so I am not able to get any further help. I suspect it to be a CSS issue. The website uses twitter-bootstrap.
Screenshots:
Normal Browser & Iphone redering comparison:
(the div in question is marked by the arrow)
I have looked into the view source and the div in question appears on both versions in the HTML source:
<div class="button-holders button-overlay" id="button_holder">
<div class="col-sm-3 col-xs-3 noway" id="noway" style="display: block;">
<a id="noway1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/button.png" width="70" height="70"></a>
<a id="noway1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('1', '0')"> NO WAY</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 nah" id="nah" style="display: block;">
<a id="nah1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/nah.png" width="70" height="70"></a>
<a id="nah1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('2', '0')"> NAH</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 sure" id="sure" style="display: block;">
<a id="sure1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/sure.png" width="70" height="70"></a>
<a id="sure1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('3', '0')"> SURE</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 ohyeh" id="ohyeh" style="display: block;">
<a id="ohyeh1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/heart.png"></a>
<a id="ohyeh1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('4', '0')"> OH YES</a>
</div><!--noway-->
<div class="report_abouse_style" id="report_abouse" style="display: block;">
<a class="badge badge_edit" id="report_abouse1" style="cursor:pointer;text-decoration: none;"> Report Abuse</a>
</div>
Could it be something that can be fixed via modifying the CSS?
I am attaching the html files to reproduce the issue locally: http://filenurse.com/download/c5d96491585893ee917842a6f11f8166.html
Any help in the right direction would be greatly appreciated.
Thanks in advance,
AD
I am trying to add a listen live button to my facebook page i have made a picture and have used the code below but where do i add hyperlink code?
<img src="my picture link"width="500" height="100" border="0" alt="" />
Thanks
Around the image I imagine?
<img src="my picture link"width="500" height="100" border="0" alt="" />
Otherwise please add details its very hard to guess your question.
I am using Addthis service in my email marketing. It works fine but I would like to change one thing. When you Click the Tweet Button You get a screen that says:
http://bit.ly/... via #addthis
My question is can I change the "via" from #Addthis to my username? Also is there a way to pull the subject into the text? Here is the code for just the tweet part of the overall button:
<a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?pco=tbxnj
-1.0&url=http%3A%2F%2Fwww.example.com&pubid=ra-"
target="_blank" ><img src="http://cache.addthis.com/icons/v1/thumbs/
twitter.gif" border="0" alt="Twitter" /></a>
The code below is the full code for the Addthis button:
<!-- AddThis Button BEGIN -->
<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbxnj
-1.0&url=http%3A%2F%2Fwww.example.com&pubid=ra-"
target="_blank" ><img src="http://cache.addthis.com/icons/v1/thumbs/
facebook.gif" border="0" alt="Facebook" /></a>
<a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?pco=tbxnj
-1.0&url=http%3A%2F%2Fwww.example.com&pubid=ra-"
target="_blank" ><img src="http://cache.addthis.com/icons/v1/thumbs/
twitter.gif" border="0" alt="Twitter" /></a>
<a href="http://www.addthis.com/bookmark.php?source=tbxnj-1.0&=250&
pubid=ra-&url=http%3A%2F%2Fwww.example.com " target="_blank"
><img src="http://cache.addthis.com/icons/v1/thumbs/more.gif" border="0"
alt="More..." /></a>
<!-- AddThis Button END -->
Thanks for the help.
My question is can I change the "via" from #Addthis to my username?
Here you go :
<a href="http://api.addthis.com/oexchange/0.8/forward/twitter/offer?pco=tbxnj
-1.0&url=http%3A%2F%2Fwww.example.com&pubid=ra-4dfb00d56c76d2a5&via=Lynda"
target="_blank" ><img src="http://cache.addthis.com/icons/v1/thumbs/
twitter.gif" border="0" alt="Twitter"/></a>
I added
&via=Lynda
to the end. You would change "Lynda" to be whatever you want.