Mises en page Twitter

Dans ce chapitre, vous apprendrez comment :

notre service client crée des mises en page HTML alternatives
sélectionner des mises en page alternatives dans le paragraphe Twitter
éditer des mises en page alternatives avec une connaissance approfondie du HTML, du CSS et de Velocity

Pour obtenir jusqu’à 2 mises en page alternatives, contactez le service client d’Episerver, qui mettra en place des mises en page alternatives pour vous.

Remarque: Si vous souhaitez enregistrer vos propres mises en page HTML, n’oubliez pas de configurer les mises en page alternatives correspondantes pour les versions mobile et les versions texte. Si aucune mise en page alternative n’est enregistrée pour les versions mobile et texte, la mise en page par défaut est automatiquement utilisée. Dans certaines circonstances, il se peut que vos fragments de texte individuels ne soient pas agencés comme vous le souhaitez.

Sélectionner la mise en page

Pour sélectionner la mise en page par défaut ou l’une des 2 mises en page alternatives, suivez les étapes suivantes :

Dans l’aperçu, dans la barre de menu du paragraphe Twitter, cliquez sur Twitter.
—Image—
Une fenêtre de configuration s’affiche sur la droite.
Basculez dans l’onglet Options.
—Image—
Dans la section Identité visuelle, sélectionnez la mise en page que vous souhaitez appliquer dans la liste déroulante Identité visuelle.
—Image—
Cliquez sur Appliquer.
Vous avez appliqué la mise en page sélectionnée avec succès. À gauche, dans l’aperçu, le formatage de votre paragraphe Twitter est modifié en conséquence.

Éditer la mise en page

Vous pouvez éditer vos mises en page alternatives ultérieurement. La mise en page par défaut ne peut pas être modifiée.

Attention: Si vous souhaitez éditer vos mises en page alternatives ultérieurement, vous devez avoir une connaissance approfondie du HTML, du CSS et de Velocity. Si vous n’avez pas de connaissances approfondies en HTML, en CSS et avec Velocity, veuillez contacter le service client d’Episerver, qui se fera un plaisir d’effectuer les modifications souhaitées. Si vous éditez les mises en page alternatives sans connaissances approfondies, des problèmes d’affichage conséquents peuvent apparaître dans vos mailings.

Pour éditer vos mises en page alternatives, procédez comme suit :

Cliquez sur Paramètres dans l’aperçu à gauche.
—Image—
Une fenêtre de configuration s’affiche sur la droite.
Basculez dans l’onglet Twitter.
—Image—
Pour chaque mise en page, des rubriques de texte source sont disponibles pour la version de bureau, la version mobile et la version texte.
Éditez le code source de la mise en page correspondante selon vos souhaits. Dans Insérer du contenu vous est expliqué comment lire et positionner les différents contenus.
Remarque: N’oubliez pas de configurer les mises en page alternatives correspondantes pour les versions mobile et les versions texte. Si aucune mise en page alternative n’est enregistrée pour les versions mobile et texte, la mise en page par défaut est automatiquement utilisée.
Cliquez sur Appliquer.
Vous avez édité votre mise en page avec succès. À gauche, dans l’aperçu, le formatage de votre paragraphe Twitter est modifié en conséquence.

Insérer des contenus

Accédez aux contenus du paragraphe Facebook avec des variables Velocity et formatez le contenu transféré avec des instructions de style HTML.

Les variables Velocity suivantes sont disponibles :

Variables de statut - Informations concernant le tweet actuel
Variables de présence - pour l’utilisation de requêtes vérifiant la présence d’un élément
Variables de valeur - pour l’extraction du contenu

Indications pour créer une nouvelle mise en page

Définition des polices : Lors de l’utilisation d’une variante de mise en page, toutes les définitions de polices doivent être disponibles dans le code HTML saisi. Les textes ne sont pas formatés par le Template Kit, afin que vous ayez toute liberté quant à la conception visuelle.
Largeur : Spécifiez une largeur fixe ou une largeur en pourcentage. Nous vous recommandons de saisir un pourcentage, afin d’éviter que des éléments ne dépassent de la mise en page.
Risque d’erreurs d’affichage : Notez que vous devez avoir une bonne connaissance du HTML, car le code HTML que vous entrez n’est pas validé par Episerver Campaign. Si vous entrez un code HTML erroné, d’importants problèmes de mise en page peuvent apparaître.

Variables de statut

Variable	Type	Description
$twitterItemFirst	boolean	Contient `true`, s’il s’agit du premier tweet du paragraphe Twitter, sinon `false`.
$twitterItemIndex	integer	Contient la position du tweet dans le paragraphe Twitter en tant que nombre (1 pour le premier tweet, 2 pour le deuxième tweet, etc.).
$twitterItemLast	boolean	Contient `true`, s’il s’agit du dernier tweet du paragraphe Twitter, sinon `false`.

Variables de présence

Variable	Type	Description
$twitterTextPresent	boolean	Contient `true` s’il existe du contenu pour le champ Texte, sinon `false`.
$twitterAuthorPresent	boolean	Contient `true` s’il existe du contenu pour le champ Auteur, sinon `false`.
$twitterDatePresent	boolean	Contient `true` s’il existe du contenu pour le champ Date, sinon `false`.
$twitterLinkTextPresent	boolean	Contient `true` s’il existe du contenu pour le champ Texte, dans la zone Lien, sinon `false`.
$twitterLinkUrlPresent	boolean	Contient `true` s’il existe du contenu pour le champ URL, dans la zone Lien, sinon `false`.
$twitterImageUrlPresent	boolean	Contient `true` s’il existe dans l’onglet Image du contenu pour le champ Image, sinon `false`.
$twitterImageAltTextPresent	boolean	Contient `true` s’il existe dans l’onglet Image du contenu pour le champ Texte alternatif, sinon `false`.
$twitterImageLinkPresent	boolean	Contient `true` s’il existe dans l’onglet Image du contenu pour le champ Lien, sinon `false`.

Value variables

Variable	Typ	Beschreibung
$twitterTextValue	string	Contient le contenu du champ Texte.
$twitterAuthorValue	string	Contient le contenu du champ Auteur.
$twitterDateValue	string	Contient le contenu du champ Date.
$twitterLinkTextValue	string	Contient le contenu du champ Texte de la zone Lien.
$twitterLinkUrlValue	string	Contient le contenu du champ URL de la zone Lien.
$twitterImageUrlValue	string	Contient l’URL de l’image de l’onglet Image.
$twitterImageAltTextValue	string	Contient le contenu du champ Texte alternatif de l’onglet Image.
$twitterImageLinkValue	string	Contient le contenu du champ Lien de l’onglet Image.
$editBar	string	Insère la barre d’outils du paragraphe. C’est par exemple nécessaire lors de la réalisation de publications juxtaposées, pour intégrer la barre d’outils dans le tableau. Si cette variable n’est pas disponible, la barre d’outils est placée au-dessus de l’article.