How can I add a photo/image to a message template?
I’d like to include an image in a message template. I know that I can use an HTML code line in the message to display an image, but where do I store the image for MyVR to include it?
Try using this: http://www.askapache.com/online-tools/base64-image-converter/
It will convert your image to text that will load inline in the email. I haven’t tried this tool personally, but it should work. You’d paste it in as HTML code.
Be sure your images are small, some emails will get rejected if you have massive images included!
@Tristan-Brotherton - It’s creates a long HTML code as well as a CSS and raw code. Do I need all of that?
@Jenny-Oest - Yes you would need all of it. The long string of characters is your picture, converted to text.
@Tristan-Brotherton so when I place the HTML in the message, where do I put the other two blocks? Just add them to the end?
@Jenny-Oest I just checked out that tool, and its providing you three different types of block, you would copy the HTML block - place it where you want your image and ignore the other two.
@Tristan-Brotherton - Just tried that out. It’s a lot of code to put directly into the message template, and since scrolling isn’t working well there, I recommend putting your HTML code into a text file and then copying it into the message template.
I also noted that the picture will need to be cropped to the correct size (gotta figure out what that size is still) or it will run off the side of the page. It doesn’t adjust to the size of the window nicely.
I’ll keep playing with this… Thanks for the tool!
You have to be very careful with image sizes, because of iPads, mobile phones etc… An image thats too big can mess up the way you render your emails on those devices.
You could modify the image in the code that utility provides to have these parameters instead.
Make sure that it replaces the values it provides. In this example an image will always stretch proportionately to fill the screen width 100% but never over it.
<img style=“max-width: 100%;” width=“100%” height=“auto” … rest of stuff here
and in this one will never be more than 100% of the screen width, but will try and display at its “natural” size:
<img style=“max-width: 100%;” height=“auto” … rest of stuff here
@Tristan-Brotherton - SWEET! That worked BEAUTIFULLY on all devices! I did note that on my phone the email takes longer to load/display, so it’s probably best to use low-res photos.
@Tristan-Brotherton - I just want to bump this up to make sure others see this.
This is a GREAT way to make your template messages visually appealing, and professional.
It’s SO SO SO easy to get the HTML code for the image and drop it into the message. Then be sure to drop the code: <img style=“max-width: 100%;” width=“100%” height=“auto” in place of the height and width settings, and VOILA - great template!!!
Thank you SO MUCH for this idea!!!
How do I recommend this as a featured post?
@Jenny-Oest How about a screenshot for us visual thinkers?
Here’s one I did today - quick and easy