Inkcite 1.18.3

Image Carousel

Clickable, interactive and responsive image carousel for modern email clients with graceful fallback for older clients.

Usage

Example Inkcite markup:

 {carousel width=450 height=280 href="..."}
 	{carousel-img id="..." src="..."}
 	{carousel-img id="..." src="..." href="..."}
 	{carousel-img id="..." src="..."}
 {/carousel}

An example of the resulting email HTML output:

<table border=0 cellpadding=0 cellspacing=0 class="fill" style="width:450px" width=450>
  <tr>
    <td>
      <!--[if !mso]><!-- -->
        <input type=radio class="crsl-radio" style="display:none !important;" checked>
        <!--<![endif]-->
        <div>
          <!--[if !mso]><!-- -->
            <div class="crsl-wrap crsl-1" style="height:0;max-height:0;overflow:hidden;text-align:center;width:100%">
              <label>
                <input type="radio" name="crsl1" class="crsl-radio-3" style="display:none !important;">
                <span>
                  <label>
                    <input type="radio" name="crsl1" class="crsl-radio-2" style="display:none !important;">
                    <span>
                      <label>
                        <input type="radio" name="crsl1" class="crsl-radio-1" style="display:none !important;" checked>
                        <span>
                          <div class="crsl-content-1 crsl-content">
                            <a href="..." style="color:#0099cc;text-decoration:none" target=_blank>
                              <img alt="" border=0 class="fill" height=280 id="OWATemporaryImageDivContainer1" src="images/..." style="display:block;max-height:0" width=450>
                            </a>
                          </div>
                          <div class="crsl-content-2 crsl-content">
                            <a href="..." style="color:#0099cc;text-decoration:none" target=_blank>
                              <img alt="" border=0 class="fill" height=280 id="OWATemporaryImageDivContainer2" src="images/..." style="display:block;max-height:0" width=450>
                            </a>
                          </div>
                          <div class="crsl-content-3 crsl-content">
                            <a href="..." style="color:#0099cc;text-decoration:none" target=_blank>
                              <img alt="" border=0 class="fill" height=280 id="OWATemporaryImageDivContainer3" src="images/..." style="display:block;max-height:0" width=450>
                            </a>
                          </div>
                          <span class="crsl-thumb" style="display:none;">
                            <img alt="Click to see image" border=0 height=280 id="OWATemporaryImageDivContainer4" src="images/..." style="display:block;max-height:0" width=450>
                          </span>
                        </span>
                      </label>
                      <span class="crsl-thumb" style="display:none;">
                        <img alt="Click to see image" border=0 height=280 id="OWATemporaryImageDivContainer5" src="images/..." style="display:block;max-height:0" width=450>
                      </span>
                    </span>
                  </label>
                  <span class="crsl-thumb" style="display:none;">
                    <img alt="Click to see image" border=0 height=280 id="OWATemporaryImageDivContainer6" src="images/..." style="display:block;max-height:0" width=450>
                  </span>
                </span>
              </label>
            </div>
            <!--<![endif]-->
            <div class="fallback">
              <div class="crsl-content">
                <a href="..." style="color:#0099cc;text-decoration:none" target=_blank><img alt="" border=0 class="fill" height=280 id="OWATemporaryImageDivContainer7" src="images/..." style="display:block" width=450></a>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>

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

Attributes

Attributes in bold are required.

bgcolor
Specifies the background color for all images in the carousel
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.
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
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-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-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.
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 (in pixels) of the primary image in the carousel
href
When specified, make each image in the carousel clickable and, when clicked, will open this URL
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.
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.
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.
outlook-alt
Specifies an alternate alt text for the fallback image displaye in certain versions of Outlook. Defaults to the alt text of the first frame or the alt text specified on the parent image carousel tag.
outlook-height
Specifies an alternate height for the fallback image displayed in certain versions of Outlook.
outlook-src
Specifies the image to use as a fallback in Outlook and other clients that don’t support the carousel. The first frame in the carousel is used when this attribute is omitted.
outlook-width
Specifies an alternate width for the fallback image displayed in certain versions of Outlook.
shadow
Enables text shadowing in the specified hex color. By default the shadow is offset directly below the text by one pixel.
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-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.
shadow-offset
When shadow is enabled, overrides the vertical CSS shadow offset, set in pixels.
width
The width (in pixels) of the primary image in the carousel

Project Config

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

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.

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.

Credit

Interactive image carousel based on FreshInbox’s technique http://freshinbox.com/resources/tools/carousel/