{"id":2129,"date":"2015-08-25T18:09:13","date_gmt":"2015-08-25T18:09:13","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=2129"},"modified":"2016-10-19T02:42:14","modified_gmt":"2016-10-19T02:42:14","slug":"image-carousel-for-email-tool","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/image-carousel-for-email-tool\/","title":{"rendered":"Image Carousel for Email Tool"},"content":{"rendered":"

Update Oct 2016:<\/B> With the new responsive email update, the carousel no longer works in Gmail<\/I>

<\/p>\n

Here’s a tool that lets you build an image carousel<\/a> for email that displays up to five images. In addition to the modern mobile clients such as the iOS Mail and Android 4.x Mail clients, the generated carousel works in Yahoo! Mail and Gmail webmail as well.<\/p>\n

Unsupported clients are Outlook.com and the usual culprits Outlook 2007-2013, Gmail mobile app and Gmail for Business. These clients will only display the first image without thumbnails.

<\/p>\n

\n\"carousel-tool\"<\/a><\/div>\n

Try the carousel builder tool<\/b><\/a><\/center>

<\/p>\n

Details<\/h4>\n

The technique behind this image carousel is very similar to the Tabs for Email<\/a> example, the difference being the “tabs” are thumbnails and they are placed after the content. I wrote an earlier carousel example<\/a> that uses the :hover selector that works with more clients, however that example is a lot more difficult to implement. Since this example uses the :checked selector, it won’t work in Outlook.com, unfortunately.

<\/p>\n

Fallback<\/h4>\n

In the generated code, there’s a fallback section with a fallback<\/code> class. The content here gets displayed to any client that does not support the carousel. The tool puts the first image there as fallback but you can swap it out with any other content such as a table displaying all images in a grid<\/a> or an animated gif like the fallback for Nest’s carousel<\/a>.<\/p>\n

\"car-fallback\"

<\/p>\n

Customizations<\/h4>\n


1) More than one carousel per email.<\/b><\/p>\n

If you want to have more than one carousel in a single email you need to ensure that each set of radio buttons have their own unique name. For each set, change the radio input names from car-rd1<\/code> to another value such as car-rd2<\/code>.<\/p>\n

\"car-name\"

<\/p>\n

2) Adjust thumbnail size.<\/b><\/p>\n

The thumbnail size was set to accomodate five thumbnails in a row. It was also set using percentages so the carousel can be responsive – it can scale with the width of its container. You can change the size and spacing of the thumbnails by changing the width and margin of the thumb<\/code> class.<\/p>\n

\"car-width2\"

<\/p>\n

3) Change thumbnail border color.<\/b><\/p>\n

Here’s where you need to edit to change the default, hover and selected thumbnail border colors:<\/p>\n

\"car-border2\"

<\/p>\n

4) Inset thumbnails.<\/b><\/p>\n

\"car-inset-pic\"<\/p>\n

You may prefer the thumbnails to appear over the images in the carousel. I haven’t found a way to make this responsive, but if you are happy with a fixed width carousel (uncheck the responsive checkbox), you can set the the max-height of the divs enclosing the images so that the thumbnails overlay part of the image.<\/p>\n

You can do this by replacing the max-height value from none<\/code> to a value that is smaller<\/b> than the actual height value of the image. Also, set the height of the carousel to the height of the image.<\/p>\n

\"car-inset-code1\"<\/p>\n

\"car-inset-code2\"<\/p>\n



<\/p>\n

Next Steps<\/h4>\n

If enough folks find this useful, I have a few things that I’d like to add to this tool in the future such as the ability to specify fallback content, change thumbnail border colors, alternate carousel layout options and more!<\/p>\n





\n

\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n

<\/p>\n