Configurer la permutation de logo dans les modèles

Ce guide explique comment configurer des espaces réservés de logo de marque dans vos modèles afin d’activer la fonctionnalité remplacement de logo dans GenStudio for Performance Marketing. Appliquez ces instructions pour vous assurer que l’espace réservé s’affiche correctement dans différentes tailles d’image et proportions.

Configuration rapide

Utilisez le code de modèle de base suivant pour votre image de logo :

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="my-logo"
>

Obligatoire :

Facultatif :

Comprendre la bordure de l’espace réservé

Si aucun logo n’est sélectionné, {{brand_logo}} contient une image transparente de 1×1 pixel. Le style {{defaultLogo}} applique automatiquement un contour pour que l’espace réservé soit visible :

outline: clamp(1px, 0.1em, 5px) dashed #FFF;

Comportement de la bordure :

Dimensionnement de la bordure

La fonction clamp() adapte l’épaisseur du contour à la taille du modèle :

Formule : 0.1em est égal à 10 % de la taille de police héritée, comprise entre 1px et 5px.

Personnalisation de la bordure de l’espace réservé

Vous pouvez remplacer la composition par défaut à l’aide de classes CSS. Le style {{defaultLogo}} applique le contour de base et votre classe peut personnaliser la couleur, la largeur et le style.

HTML modèle :

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-custom-border"
>

Modèle CSS :

.logo-custom-border {
  outline-color: #0066CC !important;
  outline-width: 2px !important;
  outline-style: dotted !important;
}

Définir le dimensionnement recommandé du logo

Pour vous assurer que l’espace réservé est visible et empêche les changements de disposition, définissez un dimensionnement explicite dans votre classe CSS :

HTML modèle :

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-standard"
>

Modèle CSS :

.logo-standard {
  width: 120px;
  height: 60px;
}

Contrôle du positionnement du logo

Utilisez object-fit et object-position pour contrôler la mise à l’échelle du logo dans son conteneur.

Logo centré (le plus souvent)

Le logo s’adapte à une taille de 150×80 pixels, centré horizontalement et verticalement.

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-centered"
>

.logo-centered {
  width: 150px;
  height: 80px;
  object-fit: contain;
  object-position: center center;
}

Logo aligné à gauche

Le logo est dimensionné pour s’adapter, aligné sur le bord gauche et centré verticalement.

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-left"
>

.logo-left {
  width: 200px;
  height: 60px;
  object-fit: contain;
  object-position: left center;
}

Logo dans le coin supérieur droit

Le logo s’adapte à vos besoins, positionné dans le coin supérieur droit.

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-top-right"
>

.logo-top-right {
  width: 100px;
  height: 100px;
  object-fit: contain;
  object-position: right top;
}

Exemples complets

Configuration minimale

<img src="{{brand_logo}}" style="{{defaultLogo}}">

Configuration recommandée

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="brand-logo"
>

.brand-logo {
  width: 120px;
  height: 60px;
  object-fit: contain;
  object-position: center center;
}

Configuration avancée avec une bordure personnalisée

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="sponsor-logo"
>

.sponsor-logo {
  width: 180px;
  height: 90px;
  object-fit: contain;
  object-position: left center;
  outline-color: #0066CC !important;
  outline-width: 2px !important;
  outline-style: solid !important;
}

Configuration flexible avec des limites de taille

Utilisez les propriétés min-* et max-* pour les modèles réactifs ou des tailles de logo variables.

<img
  src="{{brand_logo}}"
  style="{{defaultLogo}}"
  class="logo-flexible"
>

.logo-flexible {
  min-width: 20px;
  min-height: 20px;
  max-width: 200px;
  max-height: 100px;
  object-fit: contain;
  object-position: center center;
}

Fonctionnement :

Référence des propriétés CSS

Bonnes pratiques

Faire :

Ne pas :

Dépannage

Bordure non visible :

L’espace réservé est trop petit (1 px) :

La bordure ne disparaît pas après l’échange :

Logo recadré :

Logo trop petit ou trop grand :

La bordure personnalisée n’affiche pas :