I have a issue related to adding image in email. I have added image in mail template and it is showing me in preview but while sending mail it is showing me broken image. When i am using it with base64 encoding then it is showing me in attachment not in mail body.
While doing R&D on this issue, I found that google block base64 encoding images and show them as attachment not as mail body. Based on that i have tried several solution found on google but couldn't solve this issue.
Below is my mail template where i am trying to add image in mail body:-
<record id="birthday_mail_template1" model="mail.template">
<field name="name">Email Notification 1</field>
<field name="model_id" ref="MODULE_NAMW.model_hr_employee"/>
<field name="email_from">${object.env.user.email}></field>
<field name="email_to">${object.name|safe} ${object.work_email}</field>
<field name="subject">Dear ${object.name}</field>
<field name="body_html"><![CDATA[
<head>
<meta charset="UTF-8">
<title>This is test mail ${object.name}</title>
<body>
<img src="/hrms_birthday/static/src/img/birthday.png" style="padding: 0px;
margin: 0px; height: auto; width: 80px;" />
<!-- alternative image added with base64 -->
<img src="data:image/png;base64,${object.image}" style="width:
150px;height: 80px;" />
</body>
]]></field>
</record>
I have tried implementing image with encoding base64 and with absolute path but both are not working for me.
Do any one have any idea how to solve this issue and can add image in mail body?
Related
Trying to find how to use mailto in material UI. I tried just using a simple tag within a ListItem, I tried using
<ListItem button component={Link} mailto='' />
I also tried
<ListItem button >
<i class="material-icons mail_outline">mail_outline</i>
<ListItemText primary="Support" />
</ListItem>
I tried to find information about this on material-UI's website & Github but nothing. I would really appreciate some help.
I based mine on #Gary Vernon Grubb's answer, and added it into a button.
<Button
variant="contained"
size="large"
color="primary"
target="_top"
rel="noopener noreferrer"
href={`mailto:test#example.com`}
>
<Typography variant="button" style={{ fontSize: '0.69rem' }}>
Send Documents
</Typography>
</Button>
If you set the component equal to a (the hyperlink tag), you can then use the href attribute to set the e-mail.
Thus, you'll get the following line.
<ListItem button key="Email" component="a" href="mailto:name#email.com">
Mailto is a Uniform Resource Identifier (URI) scheme for email addresses. It is used to produce hyperlinks on websites that allow users to send an email to a specific address without first having to copy it and enter it into an email client.
<ListItem>
Send Mail
</ListItem>
Above code works well for me in ReactJs with Material-UI library included.
This is how I do it with material-ui:
<FormControlLabel
control={
<a target="_top"
rel="noopener noreferrer"
href="mailto:test#example.com">
<IconButton color="primary">
<EmailOutline /> {/* icon */}
</IconButton>
</a>
}
label={"test#example.com"}
labelPlacement="end"
/>
For purposes of embedding very long Gists from Github in a Wordpress blog, what code will permit me to set the height so that vertical scroll-bars are generated? Something around 500px would be perfect.
EDIT: The issue is now resolved, but I spent so much time on this issue, I believe it would be helpful to have a thread dedicated to that issue. I've posted an answer below that is working.
<style type="text/css">
.gist {width:500px !important;}
.gist-file
.gist-data {max-height: 500px;max-width: 500px;}
</style>
<script src="https://gist.github.com/user-name/123456789.js"></script>
Example: Boilerplate webpage borrowed from : http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html [The answer works as advertised as of February 24, 2016 with Firefox 44.0.2 on OSX Snow Leopard 10.6.8.]
<html>
<!-- Text between angle brackets is an HTML tag and is not displayed.
Most tags, such as the HTML and /HTML tags that surround the contents of
a page, come in pairs; some tags, like HR, for a horizontal rule, stand
alone. Comments, such as the text you're reading, are not displayed when
the Web page is shown. The information between the HEAD and /HEAD tags is
not displayed. The information between the BODY and /BODY tags is displayed.-->
<head>
<title>Enter a title, displayed at the top of the window.</title>
</head>
<!-- The information between the BODY and /BODY tags is displayed.-->
<style type="text/css">
.gist {width:300px !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 300px;}
</style>
<body>
<h1>Enter the main heading, usually the same as the title.</h1>
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<ul>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
</ul>
<p>Improve your image by including an image. </p>
<p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite Web site.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>Finally, link to another page in your own Web site.</p>
<!-- And add a copyright notice.-->
<p>© Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>
None of the above answers work anymore. Here is the updated CSS that displays the gist correctly with visible scrollbars where needed.
.gist {
max-width:350px;
overflow:auto;
}
.gist .blob-wrapper.data {
max-height:200px;
overflow:auto;
}
See this blog post for example:
How to set custom height and width of embedded Github Gist.
They seem to have changed something, so now you need to do this:
<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>
If your gist is inside an iFrame, which is generated and you can't access since it's and embedded HTML, you might want to take a look at this.
I have a MailChimp template I am working on for a client. In Gmail only, I get some images that are much larger than the stated dimensions in the template. In this example, the image is shown in Gmail at 600px x 120px but the <td> is:
<td cellpadding="0" cellspacing="0" style="border-collapse:collapse;vertical-align:top" height="4px" width="600px">
<img src="http://www.marketingscience.co/boa/hero-header.png" style="display:block;border:0;min-height:4px;width:600px;background-color:#696969;color:white;font-size:18px;line-height:100%;outline:none;text-decoration:none">
</td>
Any suggestions would be greatly appreciated.
Try setting image dimesions in plain html, like this:
<img src="image.png" width="100px" height="300px" />
Also, you have no height set in 'style' attribute, so adding it may solve the issue
Add a style element in your email template and set some default styles for all images in your email, like this:
<style>
img {
display:block;
height:auto;
line-height:100%;
}
</style>
MailChimp will add these styles inline to every <img> element before it sends the email.
Then, when possible, add the height and width attributes to each image as Alex Ponomarev suggested.
This works for me in the editor but when you submit the post data it encodes certain < and > signs as html entities.
<p>
<object height="350" width="425" data="http://www.youtube.com/v/BUQ4kRw-P3o&feature;" type="application/x-shockwave-flash">
<param name="src" value="http://www.youtube.com/v/BUQ4kRw-P3o&feature;" />
</object>
</p>
Everything I've tried in terms of the extra init parameters won't get rid of this. Any tips?
Thanks so much
I am trying to troubleshoot this code and am running into a dead-end, so I thought I would ask my first question here. I have three questions:
1) What is the best approach to embed an mp4 for an iPhone specific view, preferably without using Javascript?
2) Are there any preferred practices to debug code on an iPhone?
3) Can anyone tell me what is wrong with my specific code below? I should mention upfront that the variable $fileName does indeed contain the correct info, I've just omitted that portion of the code. Also, the poster image does flicker for a brief moment before I receive the greyed out, broken QuickTime image so that is an indication that this is partially working.
Code:
<object width="448" height="335" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="/libraries/images/$fileName.jpg" />
<param name="href" value="/libraries/media/$fileName.mp4" />
<param name="target" value="myself" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="scale" value="aspect" />
<embed src="/libraries/images/$fileName.jpg" href="/libraries/media/$fileName.mp4" type="video/mp4" target="myself" width="448" height="335" scale="aspect" controller="false" autoplay="false"> </embed>
</object>
You don't embed it, you link to it. Usually, the link is a thumbnail from the video itself. iPhones don't support embedding of movie files directly in a site.
Clicking the link will open Quicktime on the user's iPhone, then return them to the web page when they're done.
Even if embed works, a linked image is going to be easier to remember:
<img src="/libraries/images/$filename.jpg" width="448" height="335" />
Starting with OS 3.0 you can use the <VIDEO> tag
Despite a common misconception, you can use a second object tag instead of the embed tag, while changing the parameters to elements and using type="video/quicktime". The result will be the same on practically all browsers (I have yet to see a problem, although I am told IE6 screws it up), and the page will validate. The result on iPhone will be a little different than on desktop browsers. Unless you explicitly set a poster frame, it will use a black one. It will also put it's own play button on top of the poster frame. (if anyone knows how to disable either of those, I would love to know how) By doing this, you can do the whole thing without any Javascript at all. If you want to see an example, here one is: http://www.cdjunior.com/CD_JR/view.php?name=jehovahs_witnesses. The relevent part of the source is lines 94-100. I don't know if you can use an embed tag and make it work. Now that I think of it, I think this may be how the Apple Javascript does it.
Here's an implementation of what AlBeebe mentioned (HTML 5 video tag).
This will take an mp4 and embed it inside an iPhone frame without JS. However, you will probably run into resizing problems, so set a min-width: 758px; for your body.
Adjust with the video coordinates if things are misaligned.
HTML
<div id='photo'>
<div id='phone'>
<img src='img/phone-border.png'/>
<video src='img/cloud.mp4' autoplay loop width="209" height="370" poster="img/first-frame.png"/>
</div>
</div>
CSS
#phone {
position: relative;
}
#phone img {
width: 300px;
height: auto;
}
#phone video {
position: absolute;
width: 209px;
height: 370px;
top: 50%;
left: 50%;
margin-left: -182px;
margin-top: -185px;
}