I am having an issue while trying to send an email containing html and an image, through mailgun, using the anymail library.
This is my code:
url_formulario = CLIENT_URL + str(token.key)
email = EmailMultiAlternatives('Confirmación Vacante', to=emails)
cid = attach_inline_image_file(email, '/var/www/static/icons/ba_logo.png')
contexto = {'nombre_contacto': contacto.responsable_nombre,
'nombre_alumno': contacto.alumno_nombre,
'url_formulario': url_formulario,
'imagen':cid}
mensaje = render_to_string('email.html', context=contexto)
email.attach_alternative(mensaje, "text/html")
email.track_clicks = True
email.send()
I have also tried doing it like this:
url_formulario = CLIENT_URL + str(token.key)
contexto = {'nombre_contacto': contacto.responsable_nombre,
'nombre_alumno': contacto.alumno_nombre,
'url_formulario': url_formulario}
mensaje = render_to_string('email.html', context=contexto)
content = strip_tags(mensaje)
email = EmailMultiAlternatives('Confirmación Vacante', content,to=emails)
email.attach_alternative(mensaje, "text/html")
email.track_clicks = True
email.send()
Here are the two corresponding versions of the html file I am using:
<html>
<head>
<title>Ingresa al formulario</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Bastrap CSS -->
<link rel="stylesheet" href="/static/css/bastrap.css">
<style>
.contenedor-general{
background:#e5e5e5;
padding-top:3em;
}
.contenedor-general img{
padding-bottom:3em;
}
.contenido-mensaje{
background:white;
margin-bottom:calc(43px + 6em);
}
.contenido-mensaje p{
font-family:"CHANEWEI", Helvetica, Arial, sans-serif;
margin:7%;
color:#717170;
}
.contenido-mensaje h1,
.contenido-mensaje a{
margin: 0 7% 0 7%;
}
.contenido-mensaje h1{
padding-top:7%;
color:#717170;
}
.contenido-mensaje a{
color:#333;
}
.btn-primary{
background-color:#fcda59 !important;
color:#685723 !important;
box-shadow:none !important;
}
.btn-primary:hover{
background-color:#fdd306 !important;
border-color:#fdd306 !important;
color:#685723 !important;
box-shadow:none !important;
}
</style>
</head>
<body>
<div class="container">
<div class="contenedor-general col-lg-8 col-lg-offset-2">
<img src="{{imagen}}" alt="Logo Buenos Aires" class="center-block"/>
<div class="col-lg-8 col-lg-offset-2 contenido-mensaje">
<h2>Hola {{nombre_contacto}},</h2>
<p>Tenemos una vacante escolar pendiente para {{nombre_alumno}}</p>
Confirmar vacante
<p>Si tenés problemas para ingresar comunicate al XXXX-XXXX (Número de télefono)</p>
<p>Muchas gracias</p>
</div>
</div>
</body>
</html>
Another version of the tag without passing the image:
<img src="" alt="Logo Buenos Aires" class="center-block"/>
This is the resulting email:
Is there a way to attach an html file after rendering it to a string with an specified context and an image attached?
Thanks.
It looks like your template is missing the cid: part of the <img src>. You have:
<img src="{{imagen}}" alt="Logo Buenos Aires" class="center-block"/>
But that would need to be:
<img src="cid:{{imagen}}" alt="Logo Buenos Aires" class="center-block"/>
The cid: scheme is how the email client knows to treat the value of {{imagen}} as an inline Content-ID. Without it, the client doesn't know where it's supposed to look for that image source, so you get a broken image icon instead.
There's a little more detail in the Anymail docs
Related
Am still learning on Django and wkhtml2pdf using and I need some help please, I have searched and try much solutions but they don't work with me, I want to set a background image and page number in the footer(I Have use wkhtml2pdf library):
Here it's the code
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
body{
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/...');
margin:0px;
background-size: cover;
background-position: left top;
padding-top:0px;
height: 1100px;
width: 900px;
}
#divb
{
font-size: 12px;
font-family: Arial;
}
div.footer {
display: block; text-align: center;
position: running(footer);
#page {
#bottom-center { content: element(footer) }
}
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="border:0; margin: 0;">
<div id="divb">
<p><strong>Materials :</strong> {{ materiel }}</p>
.........(the rest of calling the data)
</div>
<div class='footer'>
Page <span id='page'></span> of
<span id='topage'></span>
<script>
var vars={};
var x=window.location.search.substring(1).split('&');
for (var i in x) {
var z=x[i].split('=',2);
vars[z[0]] = unescape(z[1]);
}
document.getElementById('page').innerHTML = vars.page;
document.getElementById('topage').innerHTML = vars.topage;
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
window.load = function() {
window.status = 'render-pdf';
};
</script>
</body>
</html>
and here it's the result :
the was a white space between the background image and the origin page , also the number of page appear to me (Page undefined of undefined), How i can adjust the background-image correctly to filled out all the page without white space , also what' wrong with page number in the footer.
see the screenshoot please.
enter image description here
.Thanks In Advance for everyone here.
Following this, I've created html to pdf converter and it works fine with english language, but I have some russian symbols that I cannot decode. Instead of normal russian words I get:
тут должен быть текÑ■Ñ
template:
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>MC-report</title>
</head>
<body>
<div style="align:center"> тут должен быть текст {{ today }}</div>
</body>
</html>
I have same code (plus some code just to get needed data) as in this manual, instead of playing with html.encode and template:
pdf = pisa.pisaDocument(BytesIO(html.encode("UTF-8")), result) #for decoding data, not template text
None of cp1251/2/866 and UTF-8 won't work
add to your html (Alice-Regular.ttf) is Russian fonts
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#font-face {
font-family: "Alice-Regular";
src: url("/fonts/Alice-Regular.ttf") format("truetype");
}
body {
font-family: "Alice-Regular";
font-size: 20px
}
</style>
Very new to Django I am trying to follow along a tutorial by sentdex over on youtube.
Django version 1.9
Chose this version as that is being used in the tutorial.
I can't seem to figure out how to get the css file to load.
The location of the css file
/media/xxx/django tutorial/mysite/personal/static/personal/css
I assume the BASE_URL is referencing till:
/media/xxx/djangotutroial/mysite
This is the location of the manage.py. Or am I wrong?
The css file is reference in header.html:
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
I read through a lot of the answers and if I understand correctly I have to change settings.py in mysite folder.
This is what I have at the moment:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'personal'),
]
I have tried a lot of combinations in the os.path.join I still can't get the file to load.
Thank for your help.
Project Structure:
django tutorial
--mysite
--mysite
---------__pycache_
---------__init__.py
---------settings.py
---------urls.py
---------wsgi.py
--personal
---------migrations
---------__pycache_
---------static
------personal
------css # has the bootstrap.min.css
------js
---------templates
---------admin.py
---------apps.py
---------init.py
---------models.py
---------tests.py
---------urls.py
---------views.py
If someone can tell me the right command to get the directory structure in ubuntu I would be happy to show that here.
Template:
In home.html:
{% extends "personal/header.html" %}
{% block content %}
<p>Hey, welcome to my webpage. We are testing.<p>
{% include "personal/includes/htmlsnippets.html" %}
{% endblock %}
Error message in view page source
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page not found at /static/personal/css/bootstrap.min.css</title>
<meta name="robots" content="NONE,NOARCHIVE">
<style type="text/css">
html * { padding:0; margin:0; }
body * { padding:10px 20px; }
body * * { padding:0; }
body { font:small sans-serif; background:#eee; }
body>div { border-bottom:1px solid #ddd; }
h1 { font-weight:normal; margin-bottom:.4em; }
h1 span { font-size:60%; color:#666; font-weight:normal; }
table { border:none; border-collapse: collapse; width:100%; }
td, th { vertical-align:top; padding:2px 3px; }
th { width:12em; text-align:right; color:#666; padding-right:.5em; }
#info { background:#f6f6f6; }
#info ol { margin: 0.5em 4em; }
#info ol li { font-family: monospace; }
#summary { background: #ffc; }
#explanation { background:#eee; border-bottom: 0px none; }
</style>
</head>
<body>
<div id="summary">
<h1>Page not found <span>(404)</span></h1>
<table class="meta">
<tr>
<th>Request Method:</th>
<td>GET</td>
</tr>
<tr>
<th>Request URL:</th>
<td>http://127.0.0.1:8000/static/personal/css/bootstrap.min.css</td>
</tr>
</table>
</div>
<div id="info">
<p>'personal/css/bootstrap.min.css' could not be found</p>
</div>
<div id="explanation">
<p>
You're seeing this error because you have <code>DEBUG = True</code> in
your Django settings file. Change that to <code>False</code>, and Django
will display a standard 404 page.
</p>
</div>
</body>
</html>
In the terminal where runserver:
[24/Feb/2019 06:19:32] "GET /static/personal/css/bootstrap.min.css HTTP/1.1" 404 1703
Error when running using #bkawan code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page not found at /static/personal/css/bootstrap.min.css</title>
<meta name="robots" content="NONE,NOARCHIVE">
<style type="text/css">
html * { padding:0; margin:0; }
body * { padding:10px 20px; }
body * * { padding:0; }
body { font:small sans-serif; background:#eee; }
body>div { border-bottom:1px solid #ddd; }
h1 { font-weight:normal; margin-bottom:.4em; }
h1 span { font-size:60%; color:#666; font-weight:normal; }
table { border:none; border-collapse: collapse; width:100%; }
td, th { vertical-align:top; padding:2px 3px; }
th { width:12em; text-align:right; color:#666; padding- right:.5em; }
#info { background:#f6f6f6; }
#info ol { margin: 0.5em 4em; }
#info ol li { font-family: monospace; }
#summary { background: #ffc; }
#explanation { background:#eee; border-bottom: 0px none; }
</style>
</head>
<body>
<div id="summary">
<h1>Page not found <span>(404)</span></h1>
<table class="meta">
<tr>
<th>Request Method:</th>
<td>GET</td>
</tr>
<tr>
<th>Request URL:</th>
<td>http://127.0.0.1:8000/static/personal/css/bootstrap.min.css</td>
</tr>
</table>
</div>
<div id="info">
<p>'personal/css/bootstrap.min.css' could not be found</p>
</div>
<div id="explanation">
<p>
You're seeing this error because you have <code>DEBUG = True</code> in
your Django settings file. Change that to <code>False</code>, and Django
will display a standard 404 page.
</p>
</div>
</body>
</html>
Please check if you have done first step as below
Official Documentation link for Django 1.9 link
This document is for an insecure version of Django that is no longer
supported. Please upgrade to a newer release!
Try to move on new release since documentation 1.9 is no longer supported.
Configuring static files
Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
Check If your folder structure is similar as below
Project Structure image Link
You do not need to add code below unless if personal folder is same level as BASE_DIR
os.path.join(BASE_DIR,'personal')
Your code below is fine if you have personal app and then static folder inside personal app and then personal folder inside static folder ie personal/static/personal
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
In Case if Page not found error.
Check if bootstrap.min.css exists in path personal/css/bootstrap.min.css
Check spelling as well.
Check your app ie personal in this case is included in INSTALLED_APPS
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'personal'
]
You should serve them during development. Check this part.
Edit your main urls.py(you'll find it in same folder as settings.py).
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Make sure that your app is listed in INSTALLED_APPS in django settings.
Remove /personal from your style sheet import. Instead, just have:
{%load static%}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type = "text/css"/>
I am not sure if you copied and pasted exactly the same code but the p closing tag is out of syntax in home.html.
I am trying to get password pattern work with data binding. In the below jsbin, the password Pass5678 is accepted when the pattern is provided in the html. However when I bind the pattern using a property that password fails
http://jsbin.com/posojodozu/edit?html,output
code:
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-form/iron-form.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<x-example></x-example>
<dom-module id="x-example">
<style>
:host {
display: block;
padding: 36px;
}
</style>
<template>
<form is="iron-form"
id="form"
disable-native-validation-ui
action="/">
<paper-input
name="password"
required
type="password"
pattern="[[passwordPattern]]"
label="Enter Password"></paper-input>
<br>
<button type="submit">SUBMIT</button>
</form>
</template>
<script>
// only need this when both (1) in the main document and (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
properties: {
passwordPattern: {
type: String,
value: '(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}'
}
}
});
});
</script>
</dom-module>
</body>
Looks like slash is got stripped somehow, so value should be:
value: '(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}'
I want to create a list which dinamically grows after an event (take a shoot) I mean adding each picture on real time to the list, this is my method...
//Invoke the camera capture UI for snapping a photo
function imageCapture() {
...
//Creates the array, datalist and the namespace for making this data public
if (dataArray == null) { dataArray = new Array(); }
dataArray[captureCount] = { title: capturedItem.name, id: "img" + captureCount, picture: photoBlobUrl };
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = { itemList: dataList };
WinJS.Namespace.define("DataExample", publicMembers);
}
And this is the HTML page which loads the content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>eCamera</title>
<!-- Referencias de WinJS -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Referencias de eCamera2 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body >
<div id="content">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div style="width: 150px; height: 100px;">
<!-- Displays the "picture" field. -->
<img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" />
<div>
<!-- Displays the "title" field. -->
<h4 data-win-bind="innerText: title"></h4>
<!-- Displays the "id" field. -->
<h6 data-win-bind="innerText: id"></h6>
</div>
</div>
</div>
<div id="basicListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
itemTemplate: select('#mediumListIconTextTemplate'),
itemsDraggable: true,
itemsReorderable: true }"></div>
</div>
</body>
</html>
If I load all the content in a fixed dataArray at first it works perfect, but dinamically adding elements and setting it all each time I take a picture so far doesn't work, how to make it work???
thanks in advance for the support
The app should not create new list each time. Use the WinJS.Binding.List.push method to append or splice can be used to insert. Since the list is observable, UI will autoupdate on changes (delete/add) to the list.