How does one embedd an image in HTML so that the image is delivered with the html file content and does not need a separate trip to the server to retrieve the image? We need this to embed company logo's into signatures before they leave the mail server. We don't want to use a client side solution like thunderbird's or outlook's functionality to add signatures.
thanks
What you need to do is encode the file to Base64, and include it like this:
<img src="data:image/gif;base64,R0lGODlhUAA..(the rest of your base64 encoded file)..">
http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html
http://dean.edwards.name/weblog/2005/06/base64-ie/
The standard solution for that is to add the image as an attachment. Every attachment has a ContentID, so you can embed the image using: <img src="cid:ContentID" />.
This will embed the image in the email, not in the html.
I don't think the W3C HTML specs really allow you to do this.
But if you really want to, you could create a pixel-width by pixel-height table, and set the cell background colors one by one to create your image.
It can't be done, but that's OK because modern browsers use a KeepAlive feature so that the connection to the server is retained for image loading.
Here's a handy Image to HTML converter - warning creates NASTY HTML! :)
The question that comes to my mind is - why you don't want a normal <img> tag in your html?
Attaching a image to the body of html might sound tempting, but it will definetly slow down the email downloading times, and some people use stuff like gprs connection so they want to limit their bandwidth.
IMO having images inside your html is pure evil. But that's just out of curiosity, to ask why you want such a solution - seems #nickf alredy gave you a good one :)
I reevaluated solutions for this recently.
According to this blog the support for inline attachments has been improved, new stuff was pushed to the mainline Rails repo.
I didn't check which Rails version is lucky enough to contain this change, though.
For my 2.3.x deployments I used the inline_attachment gem.
Related
Is there a way that could convert all mailto:example#exapmle.com email links in a html page to images showing same content/email address (I didn't have reputation to post images, an example image ). I knew some website provide such kind of service, but it could be done one by one. I have a webpage have many email links, so want to ask a better or smarter way to do that.
Any response would be appreciated. Thanks.
Yes. One way to do this is using PHP. Basically, what you are describing is writing text to an image. This can be done using the PHP imagettftext() function. See http://php.net/manual/en/function.imagettftext.php for more info.
I'm designing an html email to be read using Outlook 2007.
I want to add an image, a logo, positioned first thing on the email.
How do I include an image? I feel like I need a path to do the usual:
<img src=”mypath/image.gif”>
But I don’t think I can include paths to anything. What should I do?
Thanks a ton
You can reference an attached image using the cid: scheme.
In general, you would let a tool handle this for you. Last time I had cause to do this, I write the program that sent the mail in Perl and used the Email::MIME::CreateHTML module.
I am using HTML5, and would like to speed up the creation and editing of my standard HTML template by splitting it into three separate HTML files.
header.html
content.html (this will be edited and will have other names e.g. home)
footer.html
I have looked at the following resources, but I am not sure if this is possible or how to go about it.
http://www.w3schools.com/html/html_head.asp
http://www.w3schools.com/tags/tag_link.asp
In PHP I would just include the files in the right order. Is there an equivelant in just a plain HTML site?
I have googled this, but I don't think Im searching for the right term. I would appreciate any information, or resources available!
Thanks for your time!
For just a static HTML site, there is no html-only way to include files the way you are trying to. You may be able to use server-side includes depending on your server, but by that point, you might as well just use PHP.
Another option would be to make extensive use of Javascript to load the page pieces after the main part of the page is already loaded.
In all cases, though, you will have a major reduction in performance, since a server request is slow. If you need to use templates, just use a dynamic language like PHP.
You can't do it cleanly with HTML. You could use iFrames, but that's far from clean. The optimal solution would be to use PHP. It will also save you the requests from the browser.
You can do it via include files in SHTML or through some server-side processing which can combine the files into one HTML output stream when a user requests the URL. Standard HTML isn't processed on the server so you'll need to use some server-side technology such as .NET, ASP, PHP, CGI, etc.
There is no way to do this with plain HTML. You could do it using JavaScript to load the different pages into their place after loading the main page. But that seems somewhat stange and unnecessary.
The easiest way that I know how to do this is to use a Model-View-Controller (MVC) style framework of some sort. I would use CodeIgniter, which is created with PHP. It's light (2.1 is VERY fast), has incredible documentation, is super easy to understand (even if you don't know much about PHP), creates clean URIs, and will allow you to build dynamic websites (which is what you're wanting to do) with great ease. Your separate pages (called "views" in MVC terminology) will be able to load in the order you choose; in as many controller methods as you need. It's fantastic!
The following are some resources that will help explain what I'm talking about:
CodeIgniter User Guide - Model-View-Controller:
http://codeigniter.com/user_guide/overview/mvc.html
CodeIgniter User Guide - Views
http://codeigniter.com/user_guide/general/views.html
Here are some resources to help you get started with CodeIgniter:
CodeIgniter User Guide:
http://www.codeigniter.com/user_guide
CodeIgniter From Scratch Series by Nettuts+:
http://net.tutsplus.com/sessions/codeigniter-from-scratch/
Here are some resources that you may want if you need to learn more about PHP to start:
http://www.php.net
http://net.tutsplus.com/tutorials/php/the-best-way-to-learn-php/
I hope this helps, and let me know if you need any more help or a clearer explanation. Good luck!
The question is what kind result are you expect? Your question looks like you don't have experience but you feel that is something wrong with your architecture. Do you need it for any bigger webpage or for something smaller? Try to find any CMS and it will have solution to make your work more clear:) If you want to make any experiments, start from begin. You can have one layout and more content files. If your website is simple try with
<body><div>header</div><div><?php include('content'.addslashes($_GET['id']).'.php') ?></div>
<div>footer</div></body>
Don't use iframe, this is deprecated solution:)
In HTML5, you can embed (but not include) HTML documents with the object element, with the iframe element, and with the embed element.
<object data="include-me.html" type="text/html"><!-- fallback content --></object>
<iframe seamless src="include-me.html"></iframe>
<embed src="include-me.html" type="text/html"></embed>
embed
Using embed might be a bit shaky, not least because it’s intended "for an external (typically non-HTML) application or interactive content". When it doesn’t render the HTML document, try to remove the type attribute (at least it then worked in Chromium).
iframe
Using iframe might work for you in combination with the seamless attribute (beware of browser support). The HTML5 (CR) spec has an example:
An HTML inclusion is effected using this attribute as in the following example. In this case, the inclusion is of a site-wide navigation bar.
<!DOCTYPE HTML>
<title>Mirror Mirror — MovieInfo™</title>
<header>
<h1>Mirror Mirror</h1>
<p>Part of the MovieInfo™ Database</p>
<nav>
<iframe seamless src="nav.inc"></iframe>
</nav>
</header>
...
object
The HTML5 (CR) spec has an example:
In this example, an HTML page is embedded in another using the object element.
<figure>
<object data="clock.html"></object>
<figcaption>My HTML Clock</figcaption>
</figure>
In my rails app I have a need to save some webpages and display them to the user as images. For example, how would I save www.google.com as an image?
There is a command line utility called CutyCapt that is using the WebKit-Rendering engine to render HTML-Pages into various image formats. Maybe this is for you?
http://cutycapt.sourceforge.net/
Prohibitively difficult to do in pure Ruby, so you'd want to use an external service for this. Browsershots does it, for example, and it looks like they have an api, although I haven't used it myself. Maybe someone else can chime in with alternative but similar services.
You'll also want to read up on delayed_job or something similar, to make sure you're accessing those page images as a background task and that it doesn't interfere with your actual application.
You can't do it easily (probably can't do it at all).
Each page is just a text - html data. The view you want to make an image of is a rendered page. Browser renders the page using tonns of techniques like html parsing, javascript parsing, css parsing, font rendering, etc.. To make the screenshot of google page - you would need to do all the rendering somewhere in memory and then take a screenshot of rendered page.
That task is almost impossible (there is nothing fully impossible).
If you are really eager to donate tonns of time to accomplish that task - you should do this steps:
1) Find some opensource rendering engine. Firefox would do.
2) Find some way to communicate between ruby-on-rails and that engine.
3) Wire it all together and see the results.
However, I see steps 1 and 2 as nearly impossible.
Firefox addon:
https://addons.mozilla.org/en-US/firefox/addon/1146/
Do you attach the images?
Use absolute urls?
How do you best avoid getting flagged as spam?
One of the biggest causes, that I have found, for email to be flagged as spam is DNS. Make sure the domain / MX records from which you are sending the email actually resolve correctly back from the server used for sending.
As for images, you could attach them, but the most common way is to host them and use absolute urls. Primarily this is a bandwidth issue - you have to figure you're going to get an open rate of 10 - 15%: if you have to attach all the assets to every email, 85% of the bandwidth you'll use will be wasted.
You attach the emails then reference them in your HTML like so:
<img src="cid:imagefilename.jpg" />
Outlook, at least, recognizes this as a reference to an attached image and dumps it in appropriately.
You'll want to use absolute URLs to link out to images on a server. Users won't want to download your attachments. Also most email clients will not displays images by default, so it's a good idea to keep the really important content as text.
Email clients generally all use very different rendering methods. For example, Outlook 2007 uses Word's HTML rendering engine, whereas previous versions used Internet Explorer.
Do be aware that CSS support is also very limited to in emails. Most clients, especially web mail, will strip out everything outside of the <body> tag, as well as <style> tags. This means that external or embedded CSS will not work, and that inline styles are the safest bet (the style="" attribute). There is also poor support for many CSS rules in Outlook 2007. This means that a lot people have returned to using tables for laying out email.
As it was pointed out, Campaign Monitor is an excellent resource, and I especially recommend their CSS Compatibility Chart
Campaign Monitor is a great resources for html email:
http://www.campaignmonitor.com/resources/#building
Also http://www.email-standards.org/, but seems down right now.