When you move to the new article editor, you might see issues with images and videos, such as extra space, no borders, or videos that don't display correctly.

This article covers:

  • Troubleshoot issues with images
  • Troubleshoot issues with videos

Troubleshoot issues with images

Add borders to images

The new article editor doesn't support the table-based image borders used in the legacy editor. To add borders, use the image style options or apply a custom CSS class to images.

To add image borders with a CSS class:

  1. Insert your image into the article
    Add image
  2. Click the HTML button in the toolbar to open the source code editor
    Source code icon
  3. Find the img element for your image in the source. Add a CSS class name, for example, bordered-image. Set class="bordered-image" on the img element.
  4. Save your changes
  5. Make sure your help center CSS includes the border style. For example:
.bordered-image {
  border: 1px solid #ccc;
  border-radius: 4px;
}
To add image borders with inline styles:
  1. Insert your image into the article
    Add image
  2. Click the HTML button in the toolbar to open the source code editor
    Source code icon
  3. In the source, find the img element for your image. Locate the style="" attribute or add it.

  4. Add the border styles here, for example:

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

  5. The style attribute should look like

    style="aspect-ratio: 1600/1067; border: 10px solid black; border-radius: 8px;"
  6. Save your changes

Prevent image distortion and manage image size

  • Don't resize images in the new article editor unless you must. If you resize an image, change only one dimension, width or height, to keep the aspect ratio. The editor scales the other dimension automatically.
  • Use an external tool, such as Photoshop, GIMP, or an online editor, to resize images before you upload them
  • Use the Insert image button instead of copy and paste. Copy and paste can add unwanted HTML attributes.
  • Set images to 100% width by default:
    • After you insert an image, select it and use the image toolbar to set the width to 100%
    • For a global solution, add this CSS to your help center theme:
.article-body img {
  width: 100%;
  height: auto;
}
  • If images look distorted in notification emails:
    • Remove width and height HTML attributes from the <img> tag
    • Use CSS to set the size, but some email clients strip CSS attributes
    • For pasted images, make sure the editor removes the width and height HTML attributes and uses CSS for size

Additional tips and fixes

  • If you're part of an Early Access Program, report the specific articles and grant account access for investigation
  • If you don't manage your help center theme, contact your theme admin or developer to request CSS changes
  • Test changes in a test environment before you apply them live
  • Clear your browser cache after you make CSS or theme changes to see the latest updates
  • For large-scale migrations:
    • Use browser developer tools to find problem tables and speed up the review process
    • Make manual adjustments in each affected article. There's no bulk migration or fix tool.

These steps resolve most image and video display issues after you move from the legacy editor to the new article editor. They help you keep a consistent, professional look in your help center articles.

Troubleshoot issues with videos

If you move from the legacy editor to the new article editor, embedded videos may appear differently in your help center articles. This section shows how to make embedded videos display correctly, especially with custom embed codes or nonstandard video platforms.

To make embedded videos display correctly:

  • Turn on the Display unsafe content setting in your help center admin settings
  • This setting allows iframes and scripts to render in articles
  • If you have security concerns, consult your IT or security team before you turn on this setting because it has security implications

Only iframe-based embed codes are supported for video embeds in the new article editor. Other methods, such as script tags, direct links, or custom div tags, aren't supported and don't render in the editor or published articles.

You can insert an embedded video in two ways:

  • Click Insert into article > Embed in the toolbar
    Embed option in toolbar
  • Paste an iframe embed code directly into the article's source code
    • If your articles used non-iframe embeds, update them to use iframe-based embed codes from your video provider
    • If you already used iframes, turn on Display unsafe content so they render without updating each article

Adjust video size

The new article editor might set embedded videos to 100% width by default. To change the size, use CSS, not HTML width attributes:

.article-body iframe {
  width: 50% !important;
}
Attention: Don't edit video width directly in the HTML editor. The new article editor may overwrite the change.

If videos appear as small thumbnails or don't display as expected:

  1. Confirm that Display unsafe content is turned on
  2. Make sure you use an iframe-based embed code
  3. If the issue persists, report it with your embed code details and screenshots to your support contact or product manager

For more information, see Transitioning to the new article editor.

Powered by Zendesk