Rather than have to upload/copy across each individual image in my table, I want to display the images based on their image url (which I have). With ordinary images one can check "reduce or enlarge" (Inspector>Format) in order for images to fill the box (even if they are of different sizes). I can use the Web Viewer to create a box which includes the image, but I can't edit Format in the Inspector.
How can I fill the Web Viewer box with the image from a url (which ends in .jpg)?
You can specify the image height and with within the Web Viewer using either HTML or CSS. A simple example of this using inline CSS could be something like this:
"data:text/html,
<img src='" & Image::URL & "' style='width:100%; height:100%;' />"
You can specify the image height and width within the Web Viewer using HTML and CSS. If the ImageURL was referenced in Image::URL you could include it as follows:
"data:text/html, <style type='text/css'>
/* Remove margins from the 'html' and 'body' tags */
html, body {height:100%; margin:0; padding:0;} </style>
<img src='" & Image::URL & "' style='width:100%; height:100%;' />"
Uncheck "Allow interaction...", "Display progress bar" and "Display status messages" (in the Web Viewer Setup)
Related
While I have added inbox preview text for MailChimp, I would like to stop it also showing the 'view this email in your browser text' in the inbox preview text.
Is there a way to hide text from inbox preview in an html template for Mailchimp?
To fix this you will need a pre-header. A pre-header is a line of code you place just after the <body> opening tag which hides whatever is in it visually. Doing this - you can have what you want to display in the email preview without taking in any of the miscellaneous content (for example view in browser links).
<!--[if !mso]><!-->
<span style="display:none !important; visiblility:hidden; opacity:0px; color:transparent; height:0px; width:0px; mso-hide:all; max-height:0px; max-width:0px; line-height:0px; overflow:hidden;">Type your teaser content here.</span>
<!--<![endif]-->
In the above example of a preheader, you can see many different things going on. First up we have the <!--[if !mso]><!--> snippet. This will ensure anything encased between that and the <!--<![endif]--> statement will not be rendered in a Microsoft client. This is done because of Outlooks limited CSS support.
Next, we have a span stag with various CSS elements to hide the content within it. Then contained within the span tags is the content you'd want to appear in the preview of the email client.
I am using Tinymce as an email editor. When inserting an embedded image as attachment, the images are inserted as:
<img src="cid:mycid#sth" />
This works for the email sending part - but of course not for the editor. The image is not displayed...
Question: Is there a "content" and "display" layer in Tinymce where I can hook into?
My goal is to save the content as
<img src="cid:mycid#sth" />
and transform it in the editor window as
<img src="/mypreview/image/2000" />
I am using Tinymce 4.
The editor relies on the browser for the rendering of HTML so anything like your <img src="cid:mycid#sth" /> won't render in the editor - its simply not valid HTML.
What you can do is rely on data-xxx attributes in HTML to store the data you really want and transform the HTML when you go to load it into TinyMCE.
For example...
When someone inserts the image you could create the following HTML
<img data-src="cid:mycid#sth" src="/mypreview/image/2000" />
...this would allow the editor to actually render an image while you still keep the data you need. When you save the content you can strip out the existing src data and copy the data-src content back into the src if that is what your app needs for its server side processing.
If someone edits the content you can just reverse the process and change the src back to HTML that TinyMCE can render.
We're using Umbraco v7.2.1 to serve what is supposed to be responsive content.
When you add an image from the media library to the tinymce editor, this is the html that is inserted by tinymce:
<img style="width: 500px; height:500px;"
src="/media/1007/jobs-block.jpg?width=500&height=500" alt="undefined" rel="1097" />
I really don't want ANY w x h in the tag or image src.
I have found a couple of posts regarding the tinyMce.config file and the validElements node - i removed the height and width things from the img thing in there but that had no effect.
If you open the Data Type for the Richtext editor in question there is a setting called "Maximum size for inserted images". This is by default set to 500 pixels.
If you set it to 0 it will disable any resizing.
I think you can have your cake and eat it too, no need to restrict editor re-sizing.
Adding the following properties to your img elements: max-width: 100%; height: auto !important; will allow content editors to re-size their images while also making them responsive.
I processed the output. I removed the height and wrap images by a div by javascript and I can fully customize it via css
i am writing a google gadget for gmail. i am new to gadgets.for a gadget , i wirte first an html page then converted it into Module for google gadget.i used this module spec
<Module>
<ModulePrefs title="Cloud Factor Demo" scrolling="false" description="Cloud Factor Demo Design" author="Ritesh Mehandiratta" author_email="..." author_location="Mountain View, CA">
<Require feature="dynamic-height" />
<Require feature="google.contentmatch"></Require>
</ModulePrefs>
<!-- Define the content type and display location. The settings
"html" and "card" are required for all Gmail contextual gadgets. -->
<Content type="html" view="card"><![CDATA[
but when i goto my gmail page this html is in scrolling mode. i want to make its height same as the height it take how to remove this scrolling ?? here is screenshot of scrolling
By default, gadgets are 200 pixels high. If you want to use dynamic height feature, follow the steps below,
add <Require feature="dynamic-height" /> in ModulePrefs tag, which u already did. And whenever you feel, the height should be refreshed, call gadgets.window.adjustHeight();
example - If you want it to be done during page load,
<script>
function onPageLoaded() {
gadgets.window.adjustHeight();
}
</script>
<body onload="onPageLoaded()">
For more info, follow google developers link - https://developers.google.com/gadgets/docs/ui#Dyn_Height
I am creating an email template which has to display images from external website. I had placed some <img> tags for rendering the images and there are some <td> tags with background-image property set in inline css of the elements.
Now, when an email is received in outlook, the images are not displayed (this is expected as the images are not embedded). And I click the download images to see the images properly. The images in <IMG> tag are only shown and the background-image for the <TD> is not rendered.
Any views on solving this problem?
Thanks!
At last I found the answer.
Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.
Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.
More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx
Background images are not supported in Outlook. As a best practice, you should never use background images in HTML emails. If you must have a background, you can use and image PLUS a solid color. Those with email clients that support background images will get the images, and those that don't support it will fall back to the solid color.
There is actually a method to use background images in HTML emails in Outlook.
As Chaitanya mentions it can't be done with CSS, but it can be done via VML.
The technique is a bit more involved than using background: url(....) and I don't use it as frequently as I would use the CSS technique (if it worked in Outlook). But it is very useful.
I've used it successfully on a number of campaigns.
Full instructions here: including a list of email clients that support this technique.
http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197
Also, here's a guide from Campaign Monitor: http://www.campaignmonitor.com/css/ which proved super helpful for me.
There is a way of displaying HTML images.
Right html emails rendered as MSWord document in outlook.
I got the solution from this https://stackoverflow.com/a/12693917/413032 post.
So we need an alternate.
In fact you may open your html email in MSWORD and finding what seems wrong and considering what can be an alternate gives idea.
Here is what I did ;
Added v namespace to html tag
< html xmlns:v="urn:schemas-microsoft-com:vml"
Added v's style to head block
< head >
<style type="”text/css”">
v\:* { behavior: url(#default#VML); display:inline-block}
</style>
In table or where you need add your MSWord alternate
<table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody> ....
That is all.
Sure it will be a MSWord render. And more, as you notice we use absolute positioning...
Anyway this is a workaround and solves the issue in a way.
We hope one day MS-Outlook renders html e-mails with a web browser not with MS-Word.
This works in Gmail,
I tried this to show div with image in email newsletter, try inline css, sending email guidelines here