Image

Responsive-ready images and placeholders for rapid prototyping

Inkcite’s Image Heper makes it easy to add images to your email. It simplifies your code by minimizing the data you need to provide.

An advanced styling technique for images-off emails is to break your alt text into multiple lines. Inkcite allows you to do this easily by adding \n anywhere in your alt text. Those two characters will be converted into line breaks in your email’s HTML and many email clients will display the alt text broken into multiple lines.

Usage

Example Inkcite markup:

 {img src=brand-logo.jpg mobile-src=brand-logo@2x.jpg height=75 width=300 font=small alt="Our Brand"}

An example of the resulting email HTML output:

 <img alt="Our Brand" border=0 class="i01" height=75 id="OWATemporaryImageDivContainer1" src="images/brand-logo.jpg" style="color:#cccccc;display:block;font-size:11px" width=300>

Inkcite’s markup is 43% shorter than conventional HTML.

Attributes

Attributes in bold are required.

alt: Alternate text to display when images are disabled. Must be present to use the font-related attributes.
background-gradient: The background gradient color for this element or none to disable an inherited gradient
background-gradient-position: Controls the position of the background gradient - accepts standard CSS background positions such as top left, bottom and center. The default depends on the shape of the gradient. radial gradients default to center whereas linear gradients default to the bottom.
background-gradient-shape: Controls the shape of the background gradient - either liner or radial.
bgcolor: The background color for this element
border: Specifies a CSS border that appears on all sides of this element - e.g. 2px solid #445566. You can also the border for a specific direction on the element using a direction like border-top.
color: Specifies the color of the text on or inside this element. Colors specified in CSS shorthard (e.g. #345) will automatically expand to the full declaration (e.g. #334455) to maximize compatibility.
font: Specifies the named font style corresponding to one or more values set in the helpers.tsv file describing the font.
font-family: Specifies one or more font familes for this element in the order they will be used per CSS standards.
font-size: Specifies the size of the font in pixels for text on or inside of this element.
font-weight: Specifies the font weight for this element’s text either as a weight (e.g. 400) or simply as bold. Overrides the font weight attribute of the named font style if it is applied to this element.
height: The height of the image in pixels
letter-spacing: Specifies the spacing in pixels between the letters on this element. Overrides the letter spacing if a named font style is applied to this element.
line-height: Specifies the line height in pixels by default, or if units are provided (e.g. 1.5em) they will be converted to pixels to maximize compatibility. Overrides the line height of the named font style if it is applied to this element.
margin: Specifies margin (in pixels) around this element. Supports directional margin (e.g. margin-left).
mobile: Specifies one of several built-in mobile Apply the “mobile” attribute or use the override if one was provided.
mobile-border: Specifies the border for this element when it appears on mobile devices. You may also specify side-specific border such as mobile-border-top.
mobile-display: Allows you to override the CSS display attribute for this element on mobile devices.
mobile-max-width: Specifies the maximum width in pixels of this element when viewed on a mobile device.
mobile-src: Specifies the source of the image to display at this location when the email is viewed on a mobile device - e.g. a 2x retina image.
outlook-height: Specifies an alternate height for the image if an outlook-src has been specified and the image has a different height than the non-Outlook image.
outlook-src: Specifies a different source image to show in Outlook 2007+ email clients useful typically when the original src image is an animated GIF and you want to show a different, faster-loading image in email clients that don’t support animated GIFs.
outlook-width: Specifies an alternate width for the image if an outlook-src has been specified and the image has a different width than the non-Outlook image.
scale: Allows you to easily scale the dimensions of the image while maintaining the aspect ratio of the image. Note! This only affects the display dimensions, not the original size of the image. This is particularly useful if you are prototyping an email and want to see how a different size of the image would appear.
shadow: Enables text shadowing in the specified hex color. By default the shadow is offset directly below the text by one pixel.
shadow-blur: When shadow is enabled, overrides the CSS blur default value in pixels.
shadow-offset: When shadow is enabled, overrides the vertical CSS shadow offset, set in pixels.
src: The source of the image to be displayed
text-align: Specifies the alignment of the alt-text on this image and is honored by many email clients - e.g. center or right
width: The width of the image in pixels

Project Config

Set the default values for all {Image} Helpers by setting these attributes in helpers.tsv:

copy-alt-to-title

If this boolean attribute is set to true, image alt text will be copied to the title attribute of images.

outlook-text-shadows

When set to true enables verbose MSO-specific styles enabling text shadows in certain versions of Microsoft Outlook (e.g. 2007-2016) whenever shadow is applied to an element.