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/

Documentation

Helpers

Image Carousel

Usage

Attributes

Project Config

outlook-text-shadows

outlook-text-shadows

Credit