I am using abracadalo for email verification and Password Reset. Both are working great. I am trying to add an image to the template by adding picture button but it make the size huge. Is there a way to resize while editor. I saw a good example @flawless tutorial that showed a full banner.
Have you tried reviewing Abracadalo’s documentation or getting in touch with them?
Your question is more for them.
1 Like
As far as I’m aware you need to resize it and then add it! I tried this but no option to resize it and it maybe a feature request!
But if you switch to the HTML mode you can set the the width and height!
Maybe @Abracadalo or @Flawless can add some more info here?
Yes. I always check for help before I go to forum. They usually respond here ins Adalo forum.
I check the html editor and this is all I can find for img
Simple Transactional Email img { border: none; -ms-interpolation-mode: bicubic; max-width: 100%;Here is the code for the template
<!doctype html>
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
.body {
background-color: #f6f6f6;
width: 100%;
}
.container {
display: block;
margin: 0 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
@media only screen and (max-width: 620px) {
table.body h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table.body p,
table.body ul,
table.body ol,
table.body td,
table.body span,
table.body a {
font-size: 16px !important;
}
table.body .wrapper,
table.body .article {
padding: 10px !important;
}
table.body .content {
padding: 0 !important;
}
table.body .container {
padding: 0 !important;
width: 100% !important;
}
table.body .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table.body .btn table {
width: 100% !important;
}
table.body .btn a {
width: 100% !important;
}
table.body .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
|
You need to go down a bit and add the image src tag!
<img src="https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-
nature-trail-doi-inthanon-national-park-thailand-36703721.jpg" width="500" height="200">
In here you can add the image tag after td.
<img src="https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-
nature-trail-doi-inthanon-national-park-thailand-36703721.jpg" width="500" height="200">
like this :
This is not linked photo. It is uploaded from my system
okay I added that but still no change. Check out image as it highlighted.
Here is what i added
|
Hello {{ name }}, welcome to our platform. Cheers, |
I don’t know if this helps but here is what I see when I right click on the image and choose inspect
Now you need to adjust this image’s height right?
Okay so I was able to resize image manually but it still does not show up on the sent email. I think i need to make the template bigger to accommodate space for the image? upon further review it does show up in preview screen in template editor in Abracadalo @Abracadalo. I have password reset template that is showing the logo without issue. Not sure of what I am doing wrong.
After adding the image did you save the work you have did?
Click this button? :
Yes
Hello 
Thank you @dilon_perera for all the support that you bring here!
We actually do not support to resize the images in our templates editor but it is something that we will add.
In the meantime, if you want to create better looking emails you can use a free email editor like Sendinblue. Then you can copy the html code and paste it in Abracadalo. The variables have to be added in the Sendinblue editor.
For the variables to be recognized, you need to write them with the correct format:
{{variable}}
The Abracadalo Team
1 Like
Thanks,
I was able to resize the image using adobe express and upload it into Adalo. It works great in Forgot password template but will not show up in the email when I use the email verification template.
I guess there are two things I can do, I can do the sendblue thing or what I might try is recreating the email template. it would seem to me if it worked in one it should work on the other. I will try that fitst and if no go then sendblue solution it is