I recently wanted to innovate and offer a client a Carousel (with two "r" and only one "s", word that comes from the Italian carosela which is a game of horsemen, it's amazing what you can learn every day) within a campaign. That'll teach me! Bad Dobby, bad! A carousel, also called Slider, Slideshow or Animated Banner, is a visual and graphic element that consists of a set of images or photos that scroll.
It is about presenting content in an ergonomic way. In general, it is a slideshow using an easy and efficient navigation. Not to be confused with a gallery, which is made up of fixed visuals.
Is a Slideshow in an email possible?
This technique in email marketing is not interpreted by all email clients, hence its limited use (and its appearance rather weak). However, it allows, for an online sales site for example, to promote several products, or several visuals of the same product (front view, profile view, worn, etc.) Freshinbox has put online a very practical carousel generatorwhere you only need to fill in a few parameters and the urls of the images called to obtain a rather simple code to set up.
And if its support is not totally convincing (works mainly on iOS Mail, Samsung Mail, Apple Mail, Yahoo! Mail, AOL, SFR, La Poste and Outlook 2003)the technique has the merit if it is well thought (and it is almost the case of Freshinbox)In the case of a carousel, you can offer a backup solution by displaying at least one of the visuals present in the carousel. Often, this will be the visual contained in the first thumbnail. At least, that's what's supposed to happen. Because, during the email preview tests, I quickly realized that Orange did not display anything at all. Bug. No post or comment either on the Freshinbox blog which deals more in depth with the possibilities of this solution and its extensions.
Orange would cause problems on an email?
By inspecting the generated HTML code (I insist once again on trying to understand the HTML codes of the generators)While debugging and proceeding by deduction, I noticed that two elements located at the top of the generated HTML code seemed to cause problems on Orange. When I removed these elements, the main image appeared fine, but then the carousel was off. And since "Google is my friend as my colleagues say so well, I looked for results on the combo input + webmail + orange.
Well, no suspense, I think you know in advance that I have arrived on Rémi Parmentier's website as usual, I'd like to say. Rémi was just saying that Freshinbox's email carousel generator did not work in Orange's webmail, which replaces with tags. However, Remi did not detail (for once) no solution to this problem (it's nice to leave some work for others, it's called altruism 😉 ).
Need help?
Reading content isn't everything. The best way is to talk to us.
I coupled this with another info found on another article of Rémi : Since the tag does not exist, when a modern browser encounters a self-closing tag it is not familiar with, it will act as if it were a block tag and will enclose all the following content. In other words, the following code :
<input type="checkbox" class="h8u-checkbox" style="display:none;" />
<div class="h8u-menu-wrapper">
<a class="h8u-nav-item h8u-nav-item--1">...</a>
<a class="h8u-nav-item h8u-nav-item--2">...</a>
<a class="h8u-nav-item h8u-nav-item--3">...</a>
</div>Will be converted to:
<noinput type="checkbox" class="h8u-checkbox" style="display:none;">
<div class="h8u-menu-wrapper">
<a class="h8u-nav-item h8u-nav-item--1">...</a>
<a class="h8u-nav-item h8u-nav-item--2">...</a>
<a class="h8u-nav-item h8u-nav-item--3">...</a>
</div>
</noinput>In other words, my elements in display:none !important came to apply this style on the following elements... Problem (and you will have understood it): my visual products are included in this case. So how do you change the course of things without changing the structure of the code?
How to make the carousel backup appear on Orange?
This had to be done in stages:
- First, remove the "!"important"" assigned to the display:none of my two elements. Without this, it is impossible to overwrite the style (and it seems that this does not change the behavior of the carousel).
- Next, you need to assign a proper id to each element, so you can better target them in the styles at the top of the email.
- Finally, you must add the following code at the top of the email:
noinput#id_01 {display:block !important;} noinput#id_02 {display:block !important;} Thus, I target elements only on the Orange mail client, since it is the only one to transform into. So I force Orange to display:block the elements included in these , in other words the main visual (thus, the backup solution). And the loop is closed. This gives us, in the end, the following code:
<style>
noinput#cible_01 {
display:block !important;
}
noinput#cible_02 {
display:block !important;
}
input {
display: none;
}
@media screen and (max-width:9999px) {
.cboxcheck:checked + input + * .thumb-carousel {
height: auto !important;
max-height:none!important;
max-width:none!important;
line-height:0;
}
.thumb-carousel span {
font-size:0;
line-height:0;
}
.cboxcheck:checked + input + * .thumb-carousel .car-content {
display:none;
max-height:0px;
overflow:hidden;
}
.cbox0:checked + * .content-1, .thumb-carousel .cbox1:checked + span .content-1, .thumb-carousel .cbox2:checked + span .content-2, .thumb-carousel .cbox3:checked + span .content-3, .thumb-carousel .cbox4:checked + span .content-4, .thumb-carousel .cbox5:checked + span .content-5 {
display:block!important;
max-height:none!important;
overflow:visible!important;
}
.thumb-carousel .thumb {
cursor:pointer;
display:inline-block !important;
width:17.5%;
margin:1% 0.61%;
border:2px solid #bbbbbb;
}
/* hide for thunderbird as it doesn't support checkbox toggling */
.moz-text-html .thumb {
display:none !important;
}
.thumb-carousel .thumb:hover {
border:2px solid #444444;
}
.cbox0:checked + * .thumb-1, .thumb-carousel .cbox1:checked + span .thumb-1, .thumb-carousel .cbox2:checked + span .thumb-2, .thumb-carousel .cbox3:checked + span .thumb-3, .thumb-carousel .cbox4:checked + span .thumb-4, .thumb-carousel .cbox5:checked + span .thumb-5 {
border-color: #333333;
}
.thumb-carousel .thumb img {
width:100%;
height: auto;
}
.thumb-carousel img {
max-height: none !important;
}
.cboxcheck:checked + input + * .fallback {
display:none !important;
display:none;
max-height: 0px;
height: 0px;
overflow: hidden;
}
}
@media screen and (max-width:600px) {
.car-table.responsive, .car-table.responsive .thumb-carousel, .car-table.responsive .thumb-carousel .car-content img, .car-table.responsive .fallback .car-content img {
width:100% !important;
height:auto;
}
}
/* Hide interactive from Yahoo! Mail iOS since it doesn't support nested label interactivity */
.yfix {
}
@media screen yahoo and (max-width:600px) {
.thumb-carousel {
display:none!important;
}
.fallback {
display:block!important;
height:auto!important;
max-height:none!important;
}
}
</style>
<!--[if !mso]><!-- -->
<!-- do not wrap with a form tag - prevents bottom thumbnails from working in IE -->
<input type="radio" class="cboxcheck" style="display:none" id="cible_01" checked>
<input type="radio" name="car-rd1" class="cbox0" style="display:none" id="cible_02" checked>
<!--<![endif]-->
<table class="car-table" cellpadding="0" cellspacing="0" border="0" width="300">
<tr>
<td><div>
<!--[if !mso]><!-- -->
<div class="thumb-carousel" style="width:300px;height:0px;max-height:0px;max-width:0px;overflow:hidden!important;text-align:center">
<label>
<input type="radio" name="car-rd1" class="cbox3" style="display:none !important;">
<span>
<label>
<input type="radio" name="car-rd1" class="cbox2" style="display:none !important;">
<span>
<label>
<input type="radio" name="car-rd1" class="cbox1" style="display:none !important;">
<span>
<div class="content-1 car-content"><a href="https://www.badsender.com/en/"><img src="https://dummyimage.com/300x200/cccccc/000000.jpg" width="300" height="200" alt="" style="display:block;max-height:0" border="0"></a></div>
<div class="content-2 car-content"><a href="https://www.badsender.com/en/"><img src="https://dummyimage.com/300x200/999999/000000.jpg" width="300" height="200" alt="" style="display:block;max-height:0" border="0"></a></div>
<div class="content-3 car-content"><a href="https://www.badsender.com/en/"><img src="https://dummyimage.com/300x200/000000/ffffff.jpg" width="300" height="200" alt="" style="display:block;max-height:0" border="0"></a></div>
<span class="thumb thumb-1"><img src="https://dummyimage.com/300x200/cccccc/000000.jpg" width="50" style="display:block;max-height:0" border="0"></span>
</span>
</label>
<span class="thumb thumb-2"><img src="https://dummyimage.com/300x200/999999/000000.jpg" width="50" style="display:block;max-height:0" border="0"></span>
</span>
</label>
<span class="thumb thumb-3"><img src="https://dummyimage.com/300x200/000000/ffffff.jpg" width="50" style="display:block;max-height:0" border="0"></span>
</span>
</label>
</div>
<!--<![endif]-->
<div class="fallback">
<div class="car-content"><a href="https://www.badsender.com/en/"><img src="https://dummyimage.com/300x200/cccccc/000000.jpg" width="300" alt="." style="display:block;" border="0"></a></div>
</div>
</div></td>
</tr>
</table>
