Aller au contenu
Logo clair du site KT Sport Design Logo sombre du site KT Sport Design KT Sport Design

Ajouter ou Modifier un article

Page confidentiel contenant les identifiants nécessaire pour la démarche.

Installation de Filezilla

Tutoriel pour les systèmes Windows / MacOS ou Linux.

Connexion au VPS avec Filezilla

Les identifiants du serveur sont disponibles au début de cette page ou sur ce lien.

Pour se connecter au serveur, renseignez les 4 champs de l’image ci-dessous avec les identifiants confidentiels correspondants :

Les 4 champs à renseigner pour se connecter via SFTP

Ensuite, appuyez sur le bouton de connexion rapide (Quickconnect sur l’image ci-dessus) pour se connecter au VPS via SFTP et voir tous les dossiers et fichiers du serveur.

Accéder au fichier contenant les articles (articles.ts)

Pour ajouter un article sur KT Sport Design, il faut savoir comment atteindre le fichier contenant tous les articles. Après la connexion au VPS via SFTP avec Filezilla, on se retrouve sur /root comme le montre l’image ci-dessous :

Chemin actif sur le serveur

Le chemin à atteindre est /root/projects/ktsd-agency/app/utils/data. Copiez et collez ce chemin dans le champ Remote site: afin d’avoir le même rendu que sur l’image ci-dessous, où dans le cadre du bas, vous verrez le fichier articles.ts.

Chemin des articles de KT Sport Design

Modification du fichier (articles.ts) qui contient les articles

Pour consulter et modifier un fichier avec Filezilla, faites un clic droit sur le fichier en question (ici articles.ts) et sélectionnez View/Edit comme le montre l’image ci-dessous.

Consulter/Modifier un fichier avec Filezilla

Une fenêtre apparaît pour demander quel éditeur choisir. Je conseille de rester sur l’option par défaut :

Choix de l'éditeur

Appuyez sur OK pour voir le contenu du fichier.

Sous Linux avec gedit, j’obtiens ce résultat :

articles.ts ouvert dans gedit

Il ne reste plus qu’à modifier un article ou en ajouter un en dupliquant l’intégralité d’un ancien article et en remplaçant ses données.

Explication du format des données du fichier

Le fichier est un fichier Typescript, mais cela n’a pas d’importance. Ce qu’il faut comprendre, c’est que le format des données est en JSON.

Le fichier contient un tableau qui s’ouvre avec la première accolade du fichier :

Ouverture du tableau

Ce tableau se ferme à la dernière ligne du fichier :

Fermeture du tableau

Il ne faut pas toucher à ces deux lignes. Ce qui est important de comprendre avec cette syntaxe, c’est qu’un tableau peut contenir une infinité d’éléments. Ici, ce sont des objets que notre tableau contient. Il en contient autant qu’il y a d’articles visibles sur le blog.

Qu’est-ce qu’un objet en Javascript

Pour faire simple, un objet s’ouvre par une { (accolade ouvrante) et se ferme par une } (accolade fermante).

Entre ces {} (accolades) se trouvent des ensembles de clés/valeurs :

Objets

L’image ci-dessus montre une partie du premier article du fichier qui contient les clés avec les valeurs suivantes :

  • la clé id avec la valeur 0
  • la clé assetRoot avec la valeur /articles/rugby-world-cup-2023/ktsport-article-
  • la clé metaDescription avec comme valeur un autre objet qui contient les clés avec les valeurs suivantes :
    • la clé fr avec la valeur Découvrez tous les détails de la...
    • la clé en avec la valeur Explore the details of the...
  • la clé titlePreview avec comme valeur un autre objet qui contient les clés avec les valeurs suivantes :
    • la clé fr avec la valeur Coupe du monde de rugby 2023
    • la clé en avec la valeur Rugby World Cup 2023
  • la clé title avec comme valeur un autre objet qui contient les clés avec les valeurs suivantes :
    • la clé fr avec la valeur Coupe du monde de rugby 2023 : une...
    • la clé en avec la valeur Rugby World Cup 2023: a...

Ceci n’est qu’une partie de l’objet qui représente un article. Chaque article contient ces clés avec des valeurs différentes, ce qui permet l’ajout entièrement automatisé d’articles si nécessaire.

Un exemple très simple pour comprendre comment sont utilisées ces données est la valeur titlePreview, qui est la traduction en français et en anglais du titre de l’article, raccourci si trop long pour l’affichage en frontend :

titlePreview.fr

Documentation des clés/valeurs de chaque objet Article

Définition d’un objet de traduction

Un objet de traduction représente une clé qui contient un objet avec les clés fr et en, comme la clé metaDescription vue précédemment. La clé fr de cet objet représente la valeur à afficher si la page est en version française, tandis que la clé en représente la valeur à afficher si la page est en version anglaise.

Pour faciliter le renseignement de ces valeurs, je conseille de remplir d’abord la valeur fr, puis de traduire cette version en anglais avec Reverso et de placer la traduction dans la clé en.

Récapitulatif des Paramètres d’un Objet Article

1. id

  • Type : Nombre
  • Spécificité : Incrément (doit être supérieur de 1 au dernier article ajouté)
  • Exemple :
id: 5,

2. assetRoot

  • Type : Chaîne de caractères
  • Spécificité : Représente le chemin des images de l’article. Créez un dossier unique sans espaces, avec des minuscules, chiffres et - (tirets), par exemple dive-into-the-world-of-tennis.
  • Exemple :
assetRoot: "/articles/dive-into-the-world-of-tennis/ktsport-article-",
  • Image des dossiers contenant les images des articles sur le VPS :

Tous les dossiers des images des articles

3. metaDescription (Objet de traduction)

  • Type : Objet de traduction
  • Description : Méta description de l’article. Longueur recommandée : 150-160 caractères.
  • Exemple :
metaDescription: {
  fr: "Découvrez tous les détails de la Coupe du Monde de Rugby 2023.",
  en: "Explore the details of the Rugby World Cup 2023."
},
  • Image du méta description depuis l’inspecteur :

metaDescription exemple

4. titlePreview (Objet de traduction)

  • Type : Objet de traduction
  • Description : Version courte du titre affichée sur la page /blog. Taille recommandée : 50 caractères.
  • Exemple :
titlePreview: {
  fr: "Coupe du monde de rugby 2023",
  en: "Rugby World Cup 2023"
},
  • Image de rendu du titlePreview sur la page listant tous les articles :

titlePreview exemple

5. title (Objet de traduction)

  • Type : Objet de traduction
  • Description : Version longue du titre affichée uniquement sur la page de l’article. Taille recommandée : 100 caractères maximum.
  • Exemple :
title: {
  fr: "Coupe du monde de rugby 2023 : une analyse complète des équipes et des matchs",
  en: "Rugby World Cup 2023: A Comprehensive Analysis of Teams and Matches"
},
  • Image de rendu du title :

title.fr exemple

6. description (Objet de traduction)

  • Type : Objet de traduction
  • Description : Contenu du texte flottant dans le premier bloc de chaque article. Format markdown supporté pour retours à la ligne et liens.
  • Exemple :
description: {
  fr: `La Coupe du Monde a débuté en France le 8 septembre dernier.
En tant normal, vu la date on saurait toute suite qu'il ne s'agit pas de foot mais vu qu'on fait des Coupes du Monde en plein mois de décembre maintenant, on pourrait quand même se poser la question.
Il s'agit bien de la Coupe du Monde de Rugby, si vous n'étiez pas au courant vous comprenez mieux maintenant pourquoi le ballon ovale a fait son apparition dans toutes nos pubs depuis quelques semaines.
Celle-ci prendra fin le 28 Octobre prochain enfin je parle des SudAfs et des rois du Hakas.


Pour les français c'est déjà fini, ils ont été éliminés en quart de finale face à de robustes Sud Africains qui leur ont fait mordre la poussière.
On nous avait tellement vendu leurs qualités ces derniers mois que ce résultat est considéré comme un échec.
Pourtant même DD (Didier Deschamps) leur avait rendu visite pour leur expliquer comment faire pour être champion du monde... C'était simple pourtant !


Bon cessons de remuer le couteau dans la plaie.`,
  en: `The World Cup began in France on September 8th.
As normal, given the date we would know immediately that it is not about football but since we are doing World Cups in the middle of December now, we could still ask the question.
It is indeed the Rugby World Cup, if you were not aware you understand better now why the oval ball has appeared in all our pubs in recent weeks.
This will end on October 28th, finally I speak of the SudAfs and the kings of the Hakas.


For the French it is already over, they were eliminated in the quarter-finals against robust South Africans who made them bite the dust.
We had sold us their qualities so much in recent months that this result is considered a failure.
Pourtant even DD (Didier Deschamps) had visited them to explain how to be world champion... It was simple though!


Bon stop stirring the knife in the wound.`
},
  • Image de rendu de la description :

description.fr exemple

7. imgSrc

  • Type : Chaîne de caractères
  • Description : Nom de l’image de fond du premier bloc de l’article. Ne doit pas contenir le préfixe de assetRoot. Exemple : Si assetRoot est /articles/animals/ktsport-article- et l’image est ktsport-article-dog.avif, alors imgSrc sera dog.avif.
  • Exemple :
imgSrc: "dog.avif",
  • Image de rendu de imgSrc sur la page listant tous les articles :

imgSrc exemple

  • Image de rendu de imgSrc sur la page de l’article :

imgSrc exemple

8. imgAlt (Objet de traduction)

  • Type : Objet de traduction
  • Description : Texte alternatif pour l’image de fond du premier bloc de l’article. Important pour le SEO, il doit décrire brièvement l’image associée.
  • Exemple :
imgAlt: {
  fr: "Un chien en train de courir dans un champ.",
  en: "A dog running in a field."
},
  • Image de imgAlt via l’inspecteur :

imgAlt.fr exemple

9. publishedAt

  • Type : Date
  • Description : Date de publication de l’article au format YYYY-MM-DD.
  • Exemple pour le 07 juin 2023 :
publishedAt: "2023-06-07",
  • Image de rendu de publishedAt :

publishedAt exemple

10. wordCount

  • Type : Nombre
  • Description : Nombre de mots de l’article.
  • Formule mathématique : wordCount / 225 (arrondi à l’entier).
  • Exemple avec 1350 / 225 = 6 minutes :
wordCount: 1350,
  • Image de rendu de wordCount :

wordCount exemple

11. author (Objet de traduction)

  • Type : Objet de traduction
  • Description : Nom de l’auteur de l’article.
  • Exemple :
author: {
  fr: "Agence KT Sport Design",
  en: "KT Sport Design agency"
},
  • Image de author depuis l’inspecteur :

author exemple

12. category (Objet de traduction)

  • Type : Objet de traduction
  • Description : Catégorie de l’article.
  • Exemple :
category: {
  fr: "Rugby",
  en: "Rugby"
},
  • Image de category depuis l’inspecteur :

category exemple

13. tags (Objet de traduction)

  • Type : Objet de traduction contenant un tableau par traduction (liste de chaîne de caractères).
  • Description : Liste des tags associés à l’article.
  • Exemple :
tags: {
  fr: [
    "Coupe du Monde de Rugby",
    "Rugby",
    "France",
    "Événement sportif",
    "Design",
  ],
  en: [
    "Rugby World Cup",
    "Rugby",
    "France",
    "Sporting event",
    "Design",
  ],
},
  • Image des tags depuis l’inspecteur :

tags exemple

14. contactTitleFloat (Objet de traduction)

  • Type : Objet de traduction
  • Description : Titre de la section de contact flottant.
  • Exemple :
contactTitleFloat: {
  fr: "Contact",
  en: "Contact"
},
  • Image du rendu de contactTitleFloat en fin de page :

contactTitleFloat exemple

15. contactTitleFill (Objet de traduction)

  • Type : Objet de traduction
  • Description : Titre de la section de contact rempli.
  • Exemple :
contactTitleFill: {
  fr: "Plongeons ensemble",
  en: "Let's dive together"
},
  • Image de rendu de contactTitleFill (le texte le plus foncé) en fin de page :

contactTitles exemple

16. contactTitleStroke (Objet de traduction)

  • Type : Objet de traduction
  • Description : Titre de la section de contact en contour.
  • Exemple :
contactTitleStroke: {
  fr: "dans l'univers du design",
  en: "into the world of design"
},
  • Image de rendu de contactTitleStroke (le texte le plus clair) en fin de page :

contactTitles exemple

17. blocks

  • Type : Tableau (liste d’objets).
  • Description : Représente le corps de l’article et est utilisée pour structurer son contenu en différentes sections.
  • Détails : Chaque élément du tableau est un objet qui définit un bloc spécifique de contenu dans l’article. Ces blocs peuvent être de différents types, tels que du texte ou des images, et sont organisés en fonction de leur ordre d’apparition dans l’article.

17.1. Bloc de texte

  • Type : Objet
  • Description : Contient uniquement du texte. Ce bloc est utilisé pour afficher des sections de texte en langage brut avec des éléments de formatage markdown pour y afficher des titres, listes et liens.
  • Propriétés :
    • order (nombre) : Position du bloc dans la liste (commence à 0).
    • type (chaîne de caractères) : Doit avoir la valeur "text" sinon il ne sera pas valide ou considéré comme un bloc de texte.
    • background (chaîne de caractères) : Couleur de fond du bloc qui doit avoir la valeur "white" ou "primaryLight" sinon il ne sera pas valide ou n’aura pas la couleur blanche ou turquoise en fond.
    • content (objet de traduction) : Contenu textuel de format markdown. Ce contenu peut inclure des titres, des listes, des liens, et d’autres éléments de formatage markdown ou du HTML.

17.1.1. Exemple 1

bloc de texte de fond blanc

  • Code permettant ce rendu :
{
  order: 2,
  type: 'text',


  background: 'white',
  content: {
    fr: `L'engagement de Roland Garros envers une <a href='https://www.e-marketing.fr/Thematique/marques-1296/veille-tribune-2251/Breves/Roland-Garros-Une-communication-offensive-signee-Alatack-372154.htm' target='_blank'>communication dynamique</a> et novatrice est également illustré par la collaboration avec l'agence <a href='https://alatack.com/' target='_blank'>Alatack</a>, qui a redéfini la stratégie de contenu du tournoi. Cette agence, spécialisée dans le contenu social et numérique, a été chargée de créer des campagnes qui captent et maintiennent l'attention d'un public mondial. Alatack a mis en œuvre une série de stratégies offensives, notamment des campagnes interactives sur les réseaux sociaux, qui non seulement engagent mais aussi amplifient l'enthousiasme autour du tournoi. Parce qu'on sait tous que rien ne vaut un bon hashtag pour sauver une balle de match. Leur approche a permis de transformer la manière dont Roland Garros interagit avec ses fans, en rendant le tournoi plus accessible et en augmentant sa visibilité et son impact sur une scène internationale. Avec tout ça, on s'attend presque à voir les joueurs tweeter leurs émotions en plein milieu d'un tie-break.`,
    en: `Roland Garros' commitment to dynamic and <a href='https://www.e-marketing.fr/Thematique/marques-1296/veille-tribune-2251/Breves/Roland-Garros-Une-communication-offensive-signee-Alatack-372154.htm' target='_blank'>innovative communication</a> is also illustrated by the collaboration with the <a href='https://alatack.com/' target='_blank'>Alatack</a> agency, which redefined the content strategy of the tournament. The agency, which specializes in social and digital content, has been tasked with creating campaigns that capture and maintain the attention of a global audience. Alatack has implemented a series of offensive strategies, including interactive social media campaigns, which not only engage but also amplify excitement around the tournament. Because we all know that nothing beats a good hashtag to save a game ball. Their approach has transformed the way Roland Garros interacts with its fans, making the tournament more accessible and increasing its visibility and impact on an international stage. With all that, we almost expect players to tweet their emotions in the middle of a tie-break.`,
  },
},

17.1.2. Exemple 2

bloc de texte de fond turquoise

  • Code permettant ce rendu :
{
  order: 4,
  type: 'text',


  background: 'primaryLight',
  content: {
    fr: `Cette histoire du logo n'est pas seulement celle d'une compétition ; elle incarne une marque et une identité en constante évolution. Chaque changement de logo est un nouveau chapitre dans l'histoire du football européen, montrant l'habileté avec laquelle l'UEFA a su gérer son image de marque.


Alors que l'avenir de la Ligue des Champions reste ouvert, une certitude émerge : son identité visuelle ne cessera de se réinventer, alimentant ainsi la curiosité et les débats. Imaginez un futur où des innovations telles qu'un logo holographique ou un emoji officiel viendraient enrichir cette compétition. Dans ce croisement entre art et sport, les horizons semblent sans limites, annonçant que l'épopée du logo de la Ligue des Champions a encore de beaux jours devant elle.`,
    en: `This logo story is not just about a competition; it embodies a brand and identity that is constantly evolving. Each logo change is a new chapter in the history of European football, showing the skill with which UEFA has managed its brand image.


While the future of the Champions League remains open, a certainty emerges: its visual identity will continue to reinvent itself, thus fueling curiosity and debate. Imagine a future where innovations such as a holographic logo or an official emoji would enrich this competition. In this cross between art and sport, the horizons seem limitless, announcing that the epic logo of the Champions League still has beautiful days ahead.`,
  },
},

17.1.3. Exemple 3

bloc de texte de fond blanc avec un titre 3

  • Code permettant ce rendu :
{
  order: 8,
  type: 'text',


  background: 'white',
  content: {
    fr: `### Avenir du tournoi : prédictions audacieuses


L'avenir du tournoi "in-season" de la NBA ? On pourrait presque consulter une boule de cristal tant les prédictions sont variées. Entre ceux qui s'imaginent déjà des matchs joués sur Mars et les puristes qui rêvent d'un retour aux shorts courts des années 80, les spéculations frôlent l'absurde. On parle même d'introduire des drones pour filmer les dunks sous tous les angles, ou pourquoi pas des règles inspirées du Quidditch pour pimenter le jeu. Quoi qu'il en soit, une chose est sûre : ce tournoi ne manque pas de piquant et continue d'alimenter les conversations les plus farfelues.


Et chez nous, à KT Sport Design, on se frotte les mains ! Vous voulez un maillot aussi unique que ces prédictions excentriques ? C'est notre spécialité ! Nous sommes prêts à relever le défi pour créer des tenues qui feront de votre équipe la star du terrain (ou au moins la plus originale). Avec notre touche de créativité, soyez prêts à éblouir vos adversaires, et peut-être même à les distraire suffisamment pour marquer quelques paniers supplémentaires. Après tout, dans un monde où le basketball se réinvente constamment, pourquoi ne pas en faire autant avec votre style ?`,
    en: `### Future of the tournament: bold predictions


The future of the NBA "in-season" tournament? We could almost consult a crystal ball as the predictions are varied. Between those who already imagine matches played on Mars and purists who dream of a return to the short shorts of the 80s, speculation borders on the absurd. We are even talking about introducing drones to film dunks from all angles, or why not rules inspired by the Quidditch to spice up the game. Anyway, one thing is certain: this tournament is not lacking in spice and continues to fuel the most wacky conversations.


And here at KT Sport Design, we rub our hands! You want a swimsuit as unique as these eccentric predictions? This is our specialty! We are ready to take on the challenge to create outfits that will make your team the star of the field (or at least the most original). With our touch of creativity, get ready to dazzle your opponents, and maybe even distract them enough to score a few extra baskets. After all, in a world where basketball is constantly reinventing itself, why not do the same with your style?`,
  },
},

17.1.4. Exemple 4

bloc de texte de fond blanc avec un titre 3 et une liste

  • Code permettant ce rendu :
{
  order: 0,
  type: 'text',


  background: 'white',
  content: {
    fr: `### Petite intro...


Pour cette coupe du monde neuf villes françaises soigneusement réparties à travers tout le territoire, ont l'honneur d'accueillir cet événement majeur.


Voici la liste des heureuses sélectionnées :
- Saint-Denis
- Lille
- Lyon
- Saint-Étienne
- Nice
- Marseille
- Toulouse
- Bordeaux
- Nantes.


Cette coupe du Monde de Rugby qui regroupe 20 équipes prévoit d'accueillir près de 600 000 visiteurs étrangers parmi les deux millions de spectateurs attendus. La création de dix villages rugby, notamment sur la Place de la Concorde à Paris et dans chacune des neuf villes hôtes, favorise une ambiance exceptionnelle tout au long de la compétition.


Pour tous ceux qui ont vu The English Game et qui pensent que le football est le plus vieux sport du monde sachez que cet événement organisé pour la 3e fois en France, marque les 200 ans de la création du Rugby en tant que discipline soit 40 ans avant le foot.
Eh oui.. ça devait être compliqué de fabriquer un ballon rond à l'époque et encore plus d'y jouer avec ses pieds. 🙂


Justement parlons-en de ces ballons.`,
    en: `### Small intro...


For this World Cup nine French cities carefully distributed throughout the territory, have the honor of hosting this major event.


See the list of selected happy women :
- Saint-Denis
- Lille
- Lyon
- Saint-Étienne
- Nice
- Marseille
- Toulouse
- Bordeaux
- Nantes.


This Rugby World Cup, which brings together 20 teams, plans to welcome nearly 600 000 foreign visitors among the two million expected spectators. The creation of ten rugby villages, notably on the Place de la Concorde in Paris and in each of the nine host cities, fosters an exceptional atmosphere throughout the competition.


For all those who have seen The English Game and who think that football is the oldest sport in the world, know that this event organized for the 3rd time in France, marks the 200 years of the creation of Rugby as a discipline is 40 years before football.


Eh yes.. it must have been complicated to make a round ball at the time and even more to play with your feet. 🙂 Let's talk about these balloons.`,
  },
},

17.2. Bloc image à gauche

  • Type : Objet
  • Description : Contient une image positionnée à gauche du texte. Ce bloc est utilisé pour afficher des images avec du texte descriptif ou explicatif à droite de l’image.
  • Propriétés :
    • order (nombre) : Position du bloc dans la liste (commence à 0).
    • type (chaîne de caractères) : Doit avoir la valeur "imageLeft" sinon il ne sera pas valide ou considéré comme un bloc d’image à gauche.
    • background (chaîne de caractères) : Couleur de fond du bloc, peut être "white", "primaryLight", ou d’autres valeurs spécifiques définies par les styles.
    • image (objet) : Contient les informations sur l’image à afficher.
      • src (chaîne de caractères) : nom de l’image.
      • alt (objet de traduction) : Texte alternatif pour l’image.
    • content (objet de traduction) : Contenu textuel structuré en markdown. Ce contenu peut inclure des titres, des listes, des liens, et d’autres éléments de formatage markdown ou HTML.
    • imgExternalUrl (chaîne de caractères, optionnel) : URL externe pour l’image. Cette URL peut être utilisée pour accéder à une version de l’image hébergée ailleurs.
    • imgPortrait (booléen, optionnel) : Indique si l’image doit être en orientation portrait avec la valeur "true".
    • imgAuthor (objet de traduction, optionnel) : Crédits ou attribution de l’image. Ce texte est utilisé pour donner le crédit au créateur ou à la source de l’image.

17.2.1. Exemple 1

bloc image à gauche en paysage de fond blanc

  • Code permettant ce rendu :
{
  order: 1,
  type: 'imgLeft',


  background: 'white',
  content: {
    fr: `### Innovations en communication et technologie


La transition numérique de Roland Garros 2024 représente une avancée spectaculaire dans la manière dont le tournoi communique et engage son audience. Cette année, la billetterie du tournoi est devenue <a href='https://www.ouest-france.fr/sport/tennis/roland-garros/roland-garros-2024-la-billetterie-parisienne-sera-100-pourcent-numerique-pour-cette-edition-44b9f038-e076-11ee-94a7-1385a6efe21e' target='_blank'>100 % numérique</a>, une première qui non seulement facilite l'accès aux billets mais assure aussi une gestion plus fluide et sécurisée des entrées. Fini les files d'attente interminables, maintenant on peut juste stresser en ligne pour obtenir des places. Cette numérisation complète est une réponse aux attentes modernes des spectateurs et reflète une tendance plus large dans les événements sportifs globaux.


En outre, <a href='https://www.sportspromedia.com/news/roland-garros-digital-amazon-prime/' target='_blank'>Roland Garros</a> a renforcé son infrastructure de communication numérique pour améliorer l'expérience spectateur, tant sur site qu’à distance. Les écrans géants et les applications mobiles offrent des analyses en temps réel, des replays instantanés et des contenus exclusifs qui enrichissent l'expérience des fans. De plus, en partenariat avec Amazon Prime, Roland Garros propose des matchs en night session sur la plateforme. Parce que rien ne dit "tradition du tennis" comme devoir s'abonner à un service de streaming pour voir un match, non ? Cela a suscité des critiques mais aussi démontré un pas audacieux vers une diffusion plus moderne et accessible du tennis.`,
    en: `### Innovations in communication and technology


The digital transition of Roland Garros 2024 represents a spectacular step forward in the way the tournament communicates and engages its audience. This year, the tournament ticketing has become <a href='https://www.ouest-france.fr/sport/tennis/roland-garros/roland-garros-2024-la-billetterie-parisienne-sera-100-pourcent-numerique-pour-cette-edition-44b9f038-e076-11ee-94a7-1385a6efe21e' target='_blank'>100% digital</a>, a first that not only facilitates access to tickets but also ensures a more fluid and secure management of entries. No more endless queues, now we can just stress online to get tickets. This comprehensive digitization is a response to the modern expectations of spectators and reflects a broader trend in global sporting events.


In addition, <a href='https://www.sportspromedia.com/news/roland-garros-digital-amazon-prime/' target='_blank'>Roland Garros</a> has strengthened its digital communication infrastructure to improve the spectator experience, both on site and remotely. Giant screens and mobile apps offer real-time analytics, instant replays and exclusive content that enrich the fan experience. In addition, in partnership with Amazon Prime, Roland Garros offers night session matches on the platform. Because nothing says "tennis tradition" like having to subscribe to a streaming service to watch a game, right? This has prompted criticism but also demonstrated a bold step towards a more modern and accessible diffusion of tennis.`,
  },


  imgExternalUrl:
    'https://www.radiofrance.fr/mouv/podcasts/le-screen/roland-garros-le-deal-avec-amazon-ne-fait-pas-l-unanimite-1234861',
  imgSrc: 'stars.avif',
  imgAlt: {
    fr: 'Roland Garros - Prime Vidéo',
    en: 'Roland Garros - Prime Video',
  },
  imgAuthor: {
    fr: '©site radiofrance.fr',
    en: '©website radiofrance.fr',
  },
},

17.2.2. Exemple 2

bloc image à gauche en portrait de fond blanc

  • Code permettant ce rendu :
{
  order: 1,
  type: 'imgLeft',


  background: 'white',
  content: {
    fr: `### Le spectacle visuel : logos et maillots


Le <a href='https://www.linfodrome.com/sport/87566-can-de-football-2023-le-nouveau-logo-et-sa-signification-devoiles' target='_blank'>logo de la CAN 2023</a> semble avoir été conçu par un génie créatif qui a pensé: "Et si on mettait en avant les défenses d'éléphant sans les éléphants ?". Résultat ? Une coupe formée par ces défenses, un clin d'œil malicieux à la <a href='https://www.cafonline.com/fr/caf-africa-cup-of-nations/news/nouvelle-identite-pour-la-totalenergies-caf-coupe-d-afrique-des-nations-cote-d-i/' target='_blank'>Côte d'Ivoire</a>, qui n'est pas seulement connue pour son amour inconditionnel du football, mais aussi pour ces géants de la savane. Ces six défenses sont un peu comme la réunion de famille de l'Afrique, chaque groupe ramenant sa propre saveur au tournoi, un vrai melting-pot de diversité et d'unité, comme une recette de grand-mère africaine transmise à travers les générations.


Quant aux maillots, certains sont si créatifs qu'on pourrait presque les confondre avec des œuvres d'art. Prenez le maillot third de la Tunisie : avec ses motifs de mosaïque qu'on pourrait confondre avec une des tapisseries chères à nos amis maghrébins, il nous fait presque oublier qu'il est destiné à être couvert de boue sur le terrain. C'est l'union parfaite entre la mode et le football, prouvant que le style africain est bien plus qu'un simple hashtag tendance. Chaque maillot raconte une histoire, une sorte de biographie textile, où la fierté nationale se porte fièrement sur les épaules... littéralement.`,
    en: `### The visual show: logos and jerseys


The <a href='https://www.linfodrome.com/sport/87566-can-de-football-2023-le-nouveau-logo-et-sa-signification-devoiles' target='_blank'>CAN 2023 logo</a> seems to have been designed by a creative genius who thought: "What if we put forward elephant tusks without elephants?". Result? A cup formed by these defenses, a mischievous nod to <a href='https://www.cafonline.com/fr/caf-africa-cup-of-nations/news/nouvelle-identite-pour-la-totalenergies-caf-coupe-d-afrique-des-nations-cote-d-i/' target='_blank'>Côte d'Ivoire</a>, which is not only known for its unconditional love of football, but also for these giants of the savannah. These six defenses are a bit like the African family reunion, each group bringing its own flavor to the tournament, a true melting pot of diversity and unity, as an African grandmother recipe handed down through generations.


As for the jerseys, some are so creative that we could almost confuse them with works of art. Take the third jersey of Tunisia: with its mosaic patterns that could be confused with one of the tapestries dear to our Maghreb friends, it almost makes us forget that it is destined to be covered with mud on the ground. It is the perfect union between fashion and football, proving that the African style is much more than just a trendy hashtag. Each jersey tells a story, a kind of textile biography, where national pride is proudly worn on the shoulders... literally.`,
  },


  imgPortrait: true,
  imgExternalUrl:
    'https://www.kappa.fr/products/maillot-replica-third-bleu-adult-361v6fw-a0a?currency=EUR&variant=47494727074138&utm_medium=cpc&utm_source=google&utm_campaign=Google%20Shopping&stkn=5205d0493928&utm_source=google&utm_medium=cpc&utm_campaign=performance_max&utm_content=product_sport&tw_source=google&tw_adid=&tw_campaign=20589647996&gad_source=1&gclid=CjwKCAiAlJKuBhAdEiwAnZb7lZl-FrgjrmzAvNfxjhHEiQfj0yD0kJ7n0FuEQTXw4u8pjAgC9qbNXhoC5KwQAvD_BwE',
  imgSrc: 'third-jersey-of-tunisia.png',
  imgAlt: {
    fr: 'Maillot third de la Tunisie',
    en: 'Third jersey of Tunisia',
  },
  imgAuthor: {
    fr: '©site Kappa',
    en: '©website Kappa',
  },
},

17.3. Bloc image à droite

  • Type : Objet
  • Description : Contient une image positionnée à droite du texte. Ce bloc est utilisé pour afficher des images avec du texte descriptif ou explicatif à gauche de l’image.
  • Propriétés :
    • order (nombre) : Position du bloc dans la liste (commence à 0).
    • type (chaîne de caractères) : Doit avoir la valeur "imgRight" sinon il ne sera pas valide ou considéré comme un bloc d’image à droite.
    • background (chaîne de caractères) : Couleur de fond du bloc, peut être "white", "primaryLight", ou d’autres valeurs spécifiques définies par les styles.
    • imgSrc (chaîne de caractères) : Nom du fichier image à afficher.
    • imgAlt (objet de traduction) : Texte alternatif pour l’image en différentes langues.
    • content (objet de traduction) : Contenu textuel structuré en markdown. Ce contenu peut inclure des titres, des listes, des liens, et d’autres éléments de formatage markdown ou HTML.
    • imgExternalUrl (chaîne de caractères, optionnel) : URL externe pour l’image. Cette URL peut être utilisée pour accéder à une version de l’image hébergée ailleurs.
    • imgPortrait (booléen, optionnel) : Indique si l’image doit être en orientation portrait avec la valeur "true".
    • imgAuthor (objet de traduction, optionnel) : Crédits ou attribution de l’image. Ce texte est utilisé pour donner le crédit au créateur ou à la source de l’image.

17.3.1. Exemple 1

bloc image à droite en portrait de fond turquoise

  • Code permettant ce rendu :
{
  order: 3,
  type: 'imgRight',


  background: 'primaryLight',
  content: {
    fr: `### Design : L'IA à Roland Garros 2024


L'intégration de l'<a href='https://www.liberation.fr/sports/tennis/pertinente-ou-pathetique-laffiche-de-roland-garros-creee-avec-lintelligence-artificielle-fait-debat-20231225_JAU4GTARL5DCZPC2NJ73HSWWNU/' target='_blank'>intelligence artificielle</a> dans le design à Roland Garros 2024 marque un tournant futuriste pour le tournoi, en particulier avec la création de l'affiche officielle. Cette année, l'organisation a choisi d'innover en utilisant l'IA pour concevoir une affiche qui représente non seulement le tournoi mais aussi une nouvelle ère de créativité technologique. Le résultat ? Une œuvre qui ressemble à ce qui se passe quand vous laissez un enfant de trois ans seul avec un iPad. Cette initiative a été pensée pour capter l'imagination du public et refléter l'évolution constante de Roland Garros comme une entité avant-gardiste dans le monde du sport.`,
    en: `### Design: AI at Roland Garros 2024


The integration of <a href='https://www.liberation.fr/sports/tennis/pertinente-ou-pathetique-laffiche-de-roland-garros-creee-avec-lintelligence-artificielle-fait-debat-20231225_JAU4GTARL5DCZPC2NJ73HSWWNU/' target='_blank'>artificial intelligence</a> into the design at Roland Garros 2024 marks a futuristic turning point for the tournament, especially with the creation of the official poster. This year, the organization chose to innovate by using AI to design a poster that not only represents the tournament but also a new era of technological creativity. The result? A work that resembles what happens when you leave a three-year-old alone with an iPad. This initiative was designed to capture the imagination of the public and reflect the constant evolution of Roland Garros as an avant-garde entity in the world of sport.`,
  },


  imgPortrait: true,
  imgExternalUrl:
    'https://www.liberation.fr/sports/tennis/pertinente-ou-pathetique-laffiche-de-roland-garros-creee-avec-lintelligence-artificielle-fait-debat-20231225_JAU4GTARL5DCZPC2NJ73HSWWNU/',
  imgSrc: 'art.avif',
  imgAlt: {
    fr: "Affiche de Roland Garros 2024 généré par l'IA",
    en: 'Roland Garros 2024 poster generated by AI',
  },
  imgAuthor: {
    fr: '©site liberation.fr',
    en: '©website liberation.fr',
  },
},

17.3.2. Exemple 2

bloc image à droite en paysage de fond turquoise

  • Code permettant ce rendu :
{
  order: 5,
  type: 'imgRight',


  background: 'primaryLight',
  content: {
    fr: `### Partenariats stratégiques et impact économique


La dynamique de <a href='https://www.planeterenault.com/30-alliance/1594-groupe/1597-actualite-automobile/12105-renault-partenaire-premium-roland-garros-2024/' target='_blank'>partenariat</a> de Roland Garros 2024 illustre l'importance cruciale des alliances stratégiques dans le monde du sport, particulièrement dans le tennis, où elles jouent un rôle clé dans l'évolution et le rayonnement des événements. L'un des partenariats les plus notables est celui avec <a href='https://www.renault.fr/' target='_blank'>Renault</a>, qui en tant que partenaire premium pour la troisième année consécutive, a non seulement renforcé l'image de Roland Garros mais a également contribué à son engagement envers la durabilité grâce à l'introduction de véhicules électriques sur le site du tournoi. Après tout, quoi de plus sportif que de se faire conduire en voiture électrique jusqu'à la ligne de service ? Cette collaboration avec Renault démontre comment les partenariats peuvent améliorer l'expérience des événements tout en soutenant des initiatives écologiques significatives.


En plus de promouvoir des pratiques durables, Roland Garros exploite également ses partenariats pour atteindre de nouveaux publics, notamment à travers l'e-sport. Oui, maintenant on peut admirer des gamers en sueur, tapant frénétiquement sur des boutons au lieu de raquettes. Le tournoi a intégré une dimension de jeu vidéo avec les Roland-Garros <a href='https://www.tennisactu.net/news-roland-garros-la-phase-finale-de-roland-garros-eseries-gilles-simon-present-109229.html#google_vignette' target='_blank'>eSeries</a>, un tournoi de tennis virtuel qui associe le sport à l'industrie du jeu vidéo. Parce que pourquoi transpirer sur le terrain quand on peut le faire dans son salon avec une manette à la main ? Ce partenariat avec le monde du gaming permet non seulement d'engager une audience plus jeune et technophile mais aussi d'étendre l'impact culturel et commercial de Roland Garros au-delà des terrains de tennis traditionnels. Prochaine étape : des hologrammes de Rafael Nadal distribuant des high-fives virtuels. Cette initiative illustre comment les partenariats peuvent ouvrir des marchés supplémentaires et renforcer l'interaction avec une nouvelle génération de fans.`,
    en: `### Strategic partnerships and economic impact


The <a href='https://www.planeterenault.com/30-alliance/1594-groupe/1597-actualite-automobile/12105-renault-partenaire-premium-roland-garros-2024/' target='_blank'>partnership</a> dynamic of Roland Garros 2024 illustrates the crucial importance of strategic alliances in the world of sport, particularly in tennis, where they play a key role in the evolution and influence of events. One of the most notable partnerships is with <a href='https://www.renault.fr/' target='_blank'>Renault</a>, which as a premium partner for the third consecutive year, not only strengthened the image of Roland Garros but also contributed to its commitment to sustainability through the introduction of electric vehicles on the tournament site. After all, what could be more sporty than being driven by an electric car to the service line? This collaboration with Renault demonstrates how partnerships can enhance the event experience while supporting meaningful green initiatives.


In addition to promoting sustainable practices, Roland Garros also uses its partnerships to reach new audiences, particularly through e-sport. Yes, now we can admire sweaty gamers, frantically tapping buttons instead of rackets. The tournament has integrated a video game dimension with the Roland-Garros <a href='https://www.tennisactu.net/news-roland-garros-la-phase-finale-de-roland-garros-eseries-gilles-simon-present-109229.html#google_vignette' target='_blank'>eSeries</a>, a virtual tennis tournament that combines sport with the video game industry. Because why sweat on the field when you can do it in your living room with a controller in your hand? This partnership with the gaming world allows not only to engage a younger and technophile audience but also to extend the cultural and commercial impact of Roland Garros beyond the traditional tennis courts. Next step: holograms of Rafael Nadal distributing virtual high-fives. This initiative illustrates how partnerships can open additional markets and enhance interaction with a new generation of fans.`,
  },


  imgExternalUrl:
    'https://www.largus.fr/actualite-automobile/renault-5-roland-garros-2025-une-serie-speciale-pour-occuper-le-terrain-30033483.html',
  imgSrc: 'car.avif',
  imgAlt: {
    fr: 'Renault présente la série spéciale R5 E-Tech Roland-Garros',
    en: 'Renault presents the R5 E-Tech Roland-Garros special series',
  },
  imgAuthor: {
    fr: '©site largus.fr',
    en: '©website largus.fr',
  },
},

17.3.3. Exemple 3

bloc image à droite en paysage de fond blanc

  • Code permettant ce rendu :
{
  order: 3,
  type: 'imgRight',


  background: 'white',
  content: {
    fr: `### L'importance des couleurs et symboles en communication sportive


Il est clair que tout le monde aime voir la vie en couleurs, certains peut-être même à l'excès.


Cela dit, dans le domaine sportif, les couleurs et les symboles sont des éléments essentiels pour établir une connexion solide avec les fans, les équipes et les sponsors.


Il n'y a qu'à voir le rose bonbon du Stade Français qui a amené un peu de douceur dans ce monde de brute. Bah ouais la barbe de Viking de Chabbal qui crie "Hummm... Charral !" je ne sais pas qui a trouvé ça rassurant ?!


Autre exemple... Si un jour les Pays-bas ne jouent plus en Orange mais dans les couleurs de leur drapeau, un peu comme tout le monde en fait, je pense qu'on retrouvera quelques milliers de néerlandais en PLS.
Le rugby a donc lui aussi ses propres codes, certains équipes ont des appellations fortes qui se sont basées sur des choix symboliques et se sont forgées avec le temps.


Prenons l'exemple de la Nouvelle-Zélande plus connue sous le nom des "All blacks", s'ils débarquent demain avec un short blanc (bien qu'il y ai du blanc sur leur drapeau), ça fera très bizarre.
XV de la Rose, XV du Trèfle, XV du Poireau, Wallabies, Springboks et j'en passe retrouvez la signification exacte des noms de toutes ces équipes de Rubgy <a href='https://www.europe1.fr/sport/xv-du-poireau-du-trefle-de-la-rose-dou-viennent-les-surnoms-des-equipes-de-rugby-4197483' target='_blank'>ici</a>`,
    en: `### The importance of colors and symbols in sports communication


It is clear that everyone likes to see life in color, some perhaps even to excess.


Cela says, in sports, colors and symbols are essential elements to establish a strong connection with fans, teams and sponsors.


It is enough to see the candy pink of the Stade Français which brought a little sweetness in this world of brute. Well yeah the beard of Viking of Chabbal who shouts "Hummm... Charral!" I do not know who found it reassuring?!


Other example... If one day the Netherlands no longer plays in Orange but in the colors of their flag, a bit like everyone else, I think we will find a few thousand Dutch in PLS.
Rugby therefore also has its own codes, some teams have strong names that are based on symbolic choices and have been forged over time.


No the example of New Zealand better known as the "All blacks", if they arrive tomorrow with white shorts (although there is white on their flag), it will be very strange.
XV de la Rose, XV du Trèfle, XV du Poireau, Wallabies, Springboks and more find the exact meaning of the names of all these Rubgy teams <a href='https://www.europe1.fr/sport/xv-du-poireau-du-trefle-de-la-rose-dou-viennent-les-surnoms-des-equipes-de-rugby-4197483'  target='_blank'>here</a>`,
  },


  imgExternalUrl:
    'https://www.le-dictionnaire.com/definition/excentrique',
  imgSrc: 'man-with-orange-background.png',
  imgAlt: {
    fr: 'Un homme sur un fond orange',
    en: 'A man on an orange background',
  },
  imgAuthor: {
    fr: '©site Le dictionnaire',
    en: '©website Le dictionnaire',
  },
},

17.4. Bloc image en haut

  • Type : Objet
  • Description : Ce bloc affiche une image positionnée en haut, suivie de texte qui se trouve en dessous. Ce modèle est utile pour les présentations où l’image doit capter l’attention en premier lieu, avec du texte explicatif ou descriptif en dessous.
  • Propriétés :
    • order (nombre) : Position du bloc dans la liste (commence à 0).
    • type (chaîne de caractères) : Doit avoir la valeur "imgTop" sinon il ne sera pas valide ou considéré comme un bloc d’image en haut.
    • background (chaîne de caractères) : Couleur de fond du bloc, peut être "white", "primaryLight", ou d’autres valeurs spécifiques définies par les styles.
    • contentBefore (objet de traduction, optionnel) : Contenu textuel à afficher avant le texte principal, généralement utilisé pour un titre ou une sous-titre.
    • content (objet de traduction) : Contenu textuel structuré en markdown, placé sous l’image. Peut inclure des titres, des listes, des liens, et d’autres éléments de formatage markdown ou HTML.
    • imgSrc (chaîne de caractères) : Nom du fichier image à afficher.
    • imgAlt (objet de traduction) : Texte alternatif pour l’image en différentes langues.
    • imgExternalUrl (chaîne de caractères, optionnel) : URL externe pour l’image. Cette URL peut être utilisée pour accéder à une version de l’image hébergée ailleurs.
    • imgPortrait (booléen, optionnel) : Indique si l’image doit être en orientation portrait avec la valeur "true".
    • imgAuthor (objet de traduction, optionnel) : Crédits ou attribution de l’image. Ce texte est utilisé pour donner le crédit au créateur ou à la source de l’image.

17.4.1. Exemple 1

bloc image en haut de fond blanc

  • Code permettant ce rendu :
{
  order: 6,
  type: 'imgTop',


  background: 'white',
  contentBefore: {
    fr: '### Analyse du logo de la coupe du monde de rubgy 2023',
    en: '### Analysis of the 2023 rubgy world cup logo',
  },
  content: {
    fr: `C'est l'agence de communication australienne, WK, abréviation de WiteKite, qui est à l'origine de la création du logo. Aux vues des résultats des Wallabies on sait au moins qu'aucune enveloppe sous le manteau n'a été distribuée.
Les couleurs du logo reprennent celles du drapeau français : le bleu, le blanc et le rouge.


Dans un communiqué de presse de World Rugby, on peut lire : "Le drapeau tricolore repensé, un bleu-blanc-rouge revisité à mi-chemin entre l'authenticité et la modernité qui caractérisent la France." Le logo présente une forme bleue rappelant celle d'un ballon de rugby orienté à la verticale, avec les trois bandes du "W" représentant la coupe du monde. Une autre forme de couleur rouge, plus fine, est entrelacée dans la précédente. Ce logo incarne une modernité ancrée dans son époque et véhicule des valeurs telles que la passion et l'unité. À noter qu'aucun monument parisien n'est représenté, contrairement au logo des Jeux Olympiques de Paris 2024.`,
    en: `The Australian communication agency, WK, short for WiteKite, is behind the creation of the logo. In view of the results of the Wallabies it is known at least that no envelope under the mantle was distributed.
The colours of the logo echo those of the French flag : blue, white and red.


In a World Rugby press release, we read: "The redesigned tricolour flag, a blue-white-red revisited halfway between the authenticity and modernity that characterize France." The logo has a blue shape reminiscent of a vertical rugby ball, with the three stripes of the "W" representing the World Cup. Another form of red color, finer, is interlaced in the previous one. This logo embodies a modernity rooted in its time and conveys values such as passion and unity. Note that no Parisian monument is represented, contrary to the logo of the Olympic Games Paris 2024.`,
  },


  imgExternalUrl:
    'https://www.vitry94.fr/2814-25621/agendas/fiche/coupe-du-monde-de-rugby-sur-ecran-geant.htm',
  imgSrc: 'rugby-world-cup-2023-logo.png',
  imgAlt: {
    fr: 'Logo de la Coupe du Monde de rugby 2023',
    en: '2023 Rugby World Cup logo',
  },
  imgAuthor: {
    fr: '©site Ville de Vitry-sur-Seine',
    en: '©website City of Vitry-sur-Seine',
  },
},