Pour bien commencer avec les blocs de contenu : Image principale sélectionnable à partir d’une liste d’options

Quand l'utiliser ? — Lorsque l’image affichée dans le message dépend de la sélection d’une série d’options par l’utilisateur. Par exemple, l'image change en fonction de la saison choisie. Vous pouvez utiliser ce type de bloc de contenu lorsque vous souhaitez donner une liberté limitée à l’utilisateur et lui permettre de choisir parmi une série d’options prédéfinies.

Qu’utiliser ? - Cette solution nécessite l'inclusion de plusieurs éléments dans le bloc de contenu :

  • Une variable TEXT à choisir parmi plusieurs options. Dans cet exemple (plantopia-3c-hero-selectable), un choix d'images énumérées est présenté à l'aide d'une variable, de sorte que dans le message, le marketer sélectionne simplement une option parmi les choix proposés :

Copier
<!-- +++++++++++++++++++++ Images principale sélectionnables ici +++++++++++++++++++++++++++++++ --> 
<sg:var type="text" name="Seasonal_Hero_Image" value="spring-1"> 
<sg:option value="spring-1">Printemps</sg:option> 
<sg:option value="summer-1">Eté</sg:option> 
<sg:option value="autumn-1">Automne</sg:option> 
<sg:option value="winter-1">Hiver</sg:option> 
</sg:var> 
  • Utilisez cette variable dans la source de l'image. Comme l'image ne doit pas être modifiable dans les propriétés du bloc de contenu du message, une balise <img< normale peut être utilisée.

Copier
 <img id="hero-image" href="https://en.wikipedia.org/wiki/Plant" style="max-width:100%;display:block;width:600px" width="600" class="full" border="0" alt="Summer Image" src="https://classroom1.slgnt.eu/images/shared/cb/[%[VARIABLE.Seasonal_Hero_Image]%].png?no-cache=1" />

Lorsque ce bloc de contenu est utilisé dans le message, l’utilisateur se voit proposer une liste d’options :

En sélectionnant l'option dans la liste déroulante des valeurs, la source de l'image est modifiée dynamiquement et l'image correspondante est affichée. Par exemple, en choisissant Printemps dans le menu déroulant, l'image Printemps s'affichera.