Quand vous passez au nouvel éditeur d’articles, vous verrez peut-être des problèmes d’images et de vidéos, par exemple de l’espace supplémentaire, l’absence de bordures ou des vidéos qui ne s’affichent pas correctement.

Cet article couvre les points suivants :

  • Résolution des problèmes avec les images
  • Résolution des problèmes avec les vidéos

Résolution des problèmes avec les images

Ajouter des bordures aux images

Le nouvel éditeur d’articles ne prend pas en assistance les bordures d’image basées sur les tableaux utilisées dans l’ancien éditeur. Pour ajouter des bordures, utilisez les options de style d’image ou appliquez une classe CSS personnalisée aux images.

Pour ajouter des bordures d’image avec une classe CSS :

  1. Insérez votre image dans l’article
    Ajouter une image
  2. Cliquez sur le bouton HTML dans la barre d’outils pour ouvrir l’éditeur de code source
    Icône du code source
  3. Trouvez la compétence que vous voulez mettre à jour. img élément pour votre image dans la source. Ajoutez un nom de classe CSS, par exemple, bordered-image. Définir class="bordered-image" sur img .
  4. Enregistrez vos modifications
  5. Vérifiez que les feuilles de style CSS de votre centre d’aide incluent le style de bordure . Par exemple :
.bordered-image {
  border: 1px solid #ccc;
  border-radius: 4px;
}
Pour ajouter des bordures d’image avec des styles intégrés :
  1. Insérez votre image dans l’article
    Ajouter une image
  2. Cliquez sur le bouton HTML dans la barre d’outils pour ouvrir l’éditeur de code source
    Icône du code source
  3. Dans la source, cherchez l’expression img pour votre image. Cherchez l’expression style="" ou ajoutez-le.

  4. Ajoutez les styles de bordure ici, par exemple :

    border-radius: 8px; border: 10px solid black;

  5. La style L'attribut doit ressembler à

    style="aspect-ratio: 1600/1067; border: 10px solid black; border-radius: 8px;"
  6. Enregistrez vos modifications

Éviter la distorsion des images et gérer leur taille

  • Ne redimensionnez pas les images dans le nouvel éditeur d’articles, sauf si vous êtes obligé de le faire. Si vous redimensionnez une image, ne modifiez qu’une dimension (largeur ou hauteur) pour conserver les proportions. L’éditeur met automatiquement à l’échelle l’autre dimension.
  • Utilisez un outil externe, comme Shopp édition, GIMP ou un éditeur en ligne, pour redimensionner les images avant de les télécharger.
  • Utilisez le bouton Insérer une image au lieu de copier et coller. Le copier-coller peut ajouter des attributs HTML indésirables.
  • Définir les images sur une largeur de 100 % par défaut :
    • Une fois une image insérée, sélectionnez-la et utilisez la barre d’outils des images pour définir la largeur sur 100 %.
    • Pour une solution globale, ajoutez ce CSS au thème de votre centre d’aide :
.article-body img {
  width: 100%;
  height: auto;
}
  • Si les images ont l’air déformées dans les e-mails de notification :
    • Supprimez les attributs HTML width et height de <img> marqueur
    • Utilisez CSS pour définir la taille, mais certains clients de messagerie suppriment les attributs CSS
    • Pour les images collées, vérifiez que l’éditeur supprime les attributs HTML et height, et utilise CSS pour la taille.

Conseils et corrections supplémentaires

  • Si vous participez à un Programme d’accès anticipé, signalez les articles spécifiques et accordez l’accès au compte pour enquête
  • Si vous ne gérez pas le thème de votre centre d’aide , contactez l’administrateur de votre thème ou votre développeur pour demander des modifications CSS.
  • Tester les modifications dans un environnement de test avant de les appliquer
  • Videz le cache de votre navigateur après avoir modifié vos paramètres CSS ou votre thème pour voir les dernières mises à jour.
  • Pour les migrations à grande échelle :
    • Utilisez les outils de développement du navigateur pour trouver des tableaux de problèmes et accélérer le processus d’évaluation
    • Modifiez manuellement chaque article affecté. Il n’y a pas d’outil de migration en masse ni d’outil de résolution.

Ces étapes résolvent la plupart des problèmes d’affichage d’images et de vidéos une fois que vous êtes passé de l’ancien éditeur au nouvel éditeur d’articles. Ils vous aident à conserver une apparence professionnelle cohérente et homogène dans vos articles du centre d’aide .

Résolution des problèmes avec les vidéos

Si vous transférez de l’ancien éditeur au nouvel éditeur d’articles, les vidéos incorporées peuvent avoir un aspect différent dans les articles de votre centre d’aide . Cette section explique comment faire en sorte que les vidéos incorporées s’affichent correctement, en particulier avec des codes d’intégration personnalisés ou des plateformes vidéo différentes.

Pour que les vidéos incorporées s’affichent correctement :

  • Activez le paramètre Afficher le contenu non sécurisé dans les paramètres d’administration de votre centre d’aide
  • Ce paramètre autorise le rendu des iframes et des scripts dans les articles
  • Si vous avez des questions au sujet de la sécurité, consultez votre équipe informatique ou votre équipe de sécurité avant d’activer ce paramètre, car cela a des implications en matière de sécurité.

Seuls les codes d’incorporation basés sur des iframes sont pris en charge pour les incorporations de vidéos dans le nouvel éditeur d’articles. Les autres méthodes, comme les marqueurs de script, les liens directs ou les marqueurs div personnalisés, ne sont pas prises en charge et ne sont pas rendues dans l’éditeur ou les articles publiés.

Vous pouvez insérer une vidéo incorporée de deux façons :

  • Cliquez sur Insérer dans l’article. > Incorporer dans la barre d’outils
    Incorporer une option dans la barre d’outils
  • Collez un code d’incorporation iframe directement dans le code source de l’article.
    • Si vos articles n’utilisent pas d’incorporation non-iframe, mettez-les à jour pour qu’ils utilisent les codes d’intégration basés sur iframe de votre fournisseur vidéo.
    • Si vous utilisez déjà des iframes, activez Afficher le contenu non sécurisé pour qu’ils soient rendus sans mettre à jour chaque article

Ajuster la taille de la vidéo

Il est possible que le nouvel éditeur d’articles configure les vidéos incorporées sur une largeur de 100 % par défaut. Pour modifier la taille, utilisez les attributs CSS, pas les attributs HTML :

.article-body iframe {
  width: 50% !important;
}
Attention : Ne modifiez pas la largeur d’une vidéo directement dans l’éditeur HTML. Le nouvel éditeur d’articles peut annuler cette modification.

Si les vidéos s’affichent sous la forme de petites miniatures ou ne s’affichent pas correctement :

  1. Confirmer que l’option Afficher le contenu non sécurisé est activée
  2. Utilisez un code d’incorporation basé sur un iframe.
  3. Si le problème persiste, signalez-le avec les détails de votre code d’intégration et des captures d’écran à votre contact assistance ou responsable produit.

Pour en savoir plus, consultez Passage au nouvel éditeur d’articles.

Traduction - exonération : cet article a été traduit par un logiciel de traduction automatisée pour permettre une compréhension élémentaire de son contenu. Des efforts raisonnables ont été faits pour fournir une traduction correcte, mais Zendesk ne garantit pas l’exactitude de la traduction.

Si vous avez des questions quant à l’exactitude des informations contenues dans l’article traduit, consultez la version anglaise de l’article, qui représente la version officielle.

Réalisé par Zendesk