I have written the following html to add a image to a script that is being used to generate a email
<a href="http://www.marshalls-seeds.co.uk/" target="_blank">
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png" alt="Marshall seeds logo"></a><br/>
If I check that in MS expression and outlook it works fine. But if I use hotmail or gmail the result look like this.
[Marshall seeds logo]<http://www.marshalls-seeds.co.uk/>
When I inspect the element I can see that the <img> has 'disappeared' and been treated as if it was text. But I cannot see why.
It is built-in security in gmail and Hotmail which removes the images.
Btw, you should always add width and height and en / in your <img>-tags.
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png" width="XXX" height="XXX" alt="Marshall seeds logo" />
You have forgotten to close your <img> tag; now you can put / at the end of your <img> tag like this:
<img src="http://www.marshalls-seeds.co.uk/images/global/logo.png"
alt="Marshall seeds logo"/>
Related
I know, I should use something like Bulletproof Email Buttons service for such purposes, but I have a case, where I need to use an image wrapped with an <a> tag to represent a link in my email template. I ran a test with testi.at and it appears to be represented correctly for almost 100% of clients (up to Outlook 2007). I cannot check if such image link is 100% clickable though. My question is if there are any known issues with this approach?
<tr>
<td style="text-align: center;">
<a href="http://example.com">
<img src="https://some-image-src.png" width="100" height="50" alt="Sample image" />
</a>
</td>
</tr>
This is a very common practice and there is no downside that I can think of. One recommandation I'd make is to add the following styles on your image element:
vertical-align:middle; This prevents a small gap to appear below images in email clients using an HTML5 doctype.
border:none; This prevents a blue outline to appear on older email clients running on Internet Explorer’s rendering engine (like Outlook 2003 for example).
Also, be careful, there's a typo in your code (scr instead of src).
My HTML email template has a few images. All images are saved and served from the same Google Cloud Platform Storage Bucket and all images are set to be publicly available.
When the email is delivered, Gmail only loads half the images. In the other half, it removes the src attribute altogether! The same template works fine when I open it in Chrome and the same emails works great on Outlook.com as well. See the example of what the <img> tag looks like in Gmail below:
<img alt="image" style="display:block" width="191">
The HTML block for that specific image looks like this:
<td align="center">
<a href="#" target="_blank">
<img src="http://storage.googleapis.com/tripcloud-email-assets/campaigns/1-holidays-2016/banner-content-1.png" alt="image" border="0" height="67" width="199">
</a>
</td>
The only other thread I found about this subject was this but I did not have a similar error and so, it was unrelated. Can someone please tell me why this might be happening?
I can suggest you two options-
Don't use imagenames like googleads or googleadspreview. Just avoid 'ads words'.
If it removes src attribute, you can add it with jQuery.
I have a product page that uses Microdata. At the moment the itemprop="image" attribute is specified on the first thumbnail from my thumbnail gallery. What I'd like to do is specify it for the high-res image I have.
The trouble is, that's not actually displayed on the page, it's loaded via JavaScript using a lighbox. I know I can do something like:
<img itemprop="image" src="/img/high-res.jp" style="display:none" />
and the image won't show and it's tagged as the product image. But, of course the image is still download.
Any way I can specify itemprop="image" on an image but not actually download the image?
I tried changing <img> to <span> but the testing tool didn't recognise it.
Perhaps the link element would be useful here - it's not displayed in the rendered HTML, but it is available in the HTML source and therefore available to JavaScript:
<link itemprop="image" href="/img/high-res.jpg">
My html anchor tags work in chrome and IE but in Firefox, Safari, iPad and iPhone they do not work, how come? and what can I do to fix it?
Underpinning
Any help would be appreciated.
Thanks.
This is what I am trying to link it to on the services page:
<h1 id="#underpinning" name="underpinning">Underpinning</h1>
This is where I left off:
This is my link:
<li><h2 id="underpinning">Underpinning<a href="services#underpinning"><img class="alignnone size-full wp-image-127" alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg" width="500" height="337"></h2></a></li>
This is where on my services page I want the link to goto:
<a name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a>
If I goto the url directly: http://powellgroupconstruction.com/services/#underpinning into safari or firefox, it works.
There are several issues in your code.
On your example website you're using HTML5 Doctype, so I'm just answering respectively with HTML5 in mind:
Forget about name attribute in general and <a name> markup as link target in particular. As the HTML5 Candidate Recommendation spec states: "An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS." That means, you can use any id as a link target.
As Itay Gal has already stated in his answer, don't use the same id more than once. From the HTML5 spec again: "The id attribute specifies its element's unique identifier (ID)".That said, change your current code: <a id="underpinning" name="underpinning"><h1 id="underpinning" name="underpinning">Underpinning</h1></a> to <h1 id="underpinning">Underpinning</h1>
You're using as link address currently /services#underpinning. As you're going with the WordPress rewrite functionality, entering http://powellgroupconstruction.com/services gets redirected to http://powellgroupconstruction.com/services/.Therefore you should better put a slash at the end of your pages' names, so the link address should be Underpinning
You are using the same id in multiple elements. The id needs to be unique, make sure you use each id only once and it should work.
Are href for both h2 and img tags are same? then have you tried this one:
<a href="services#underpinning">
<h2 id="underpinning">Underpinning
<a href="services#underpinning"><img class="alignnone size-full wp-image-127" alt="home" src="http://powellgroupconstruction.com/wp-content/uploads/2013/12/home.jpg" width="500" height="337">
</a></h2>
</a>
I had an issue very similar to this. I believe your problem is that Firefox and Safari do not like an <h2> tag inside an anchor <a> tag. Try :
<span id="underpinning">Underpinning</span>
I was wondering what exactly would happen if you output <img src="#"/>? Does the browser essentially try to submit the same URI twice?
It attempts to load the current page (#) as an image. This will almost always fail, as the current page is HTML, not an image.
The same thing will happen for all of the following HTML tags as well:
<img src="?"> (more or less)
<img src="">
<img> (under some browsers!)