Cuando se cambia al nuevo editor de artículos, es posible que vea problemas con las imágenes y los videos, como espacio adicional, sin bordes o videos que no se muestran correctamente.

Este artículo cubre:

  • Resolver problemas con imágenes
  • Resolver problemas con videos

Solucionar problemas con imágenes

Agregar bordes a las imágenes

El nuevo editor de artículos no Support los bordes de imagen basados en tablas que se usan en el editor heredado. Para agregar bordes, use las opciones de estilo de imagen o aplique una clase CSS personalizada a las imágenes.

Para agregar bordes de imagen con una clase CSS:

  1. Inserte su imagen en el artículo
    Agregar imagen
  2. Haga clic en el botón HTML en la barra de herramientas para abrir el editor de código fuente
    icono Código fuente
  3. Busque el elemento de img para su imagen en el origen. Agregue un nombre de clase CSS, por ejemplo, bordered-image. Establezca class="bordered-image" en el elemento img.
  4. Guarde los cambios
  5. Asegúrese de que CSS del centro de ayuda incluya el estilo de borde. Por ejemplo:
.bordered-image {
  border: 1px solid #ccc;
  border-radius: 4px;
}
Para agregar bordes de imagen con estilos incorporados:
  1. Inserte su imagen en el artículo
    Agregar imagen
  2. Haga clic en el botón HTML en la barra de herramientas para abrir el editor de código fuente
    icono Código fuente
  3. En el origen, busque el elemento img para la imagen. Ubique el atributo style="" o agréguelo.

  4. Agregue los estilos de borde aquí, por ejemplo:

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

  5. El atributo style debería ser como

    style="aspect-ratio: 1600/1067; border: 10px solid black; border-radius: 8px;"
  6. Guarde los cambios

Evitar la distorsión de la imagen y administrar el tamaño de la imagen

  • No cambie el tamaño de las imágenes en el nuevo editor de artículos a menos que sea necesario. Si cambia el tamaño de una imagen, cambie solo una dimensión, ancho o alto, para mantener la relación de aspecto. El editor ajusta la escala de la otra dimensión automáticamente.
  • Use una herramienta externa, como Photoshop, GIMP o un editor en línea, para cambiar el tamaño de las imágenes antes de cargarlas
  • Utilice el botón Insertar imagen en lugar de copiar y pegar. Copiar y pegar puede agregar atributos HTML no deseados.
  • Establecer imágenes en 100% de ancho de manera predeterminada:
    • Después de insertar una imagen, selecciónela y use la barra de herramientas de imágenes para establecer el ancho en 100%
    • Si desea una solución global, agregue este CSS al tema de su centro de ayuda:
.article-body img {
  width: 100%;
  height: auto;
}
  • Si las imágenes se ven distorsionadas en los correos electrónicos de notificación:
    • Eliminar atributos HTML width y height de la etiqueta <img>
    • Use CSS para establecer el tamaño, pero algunos clientes de correo electrónico eliminan los atributos CSS
    • Para las imágenes pegadas, asegúrese de que el editor elimine los atributos HTML width y height y use CSS para el tamaño

Sugerencias y correcciones adicionales

  • Si forma parte de un Programa de acceso anticipado, informe sobre los artículos específicos y otorgue acceso a la cuenta para investigación
  • Si no administra el tema de su centro de ayuda, contacte al administrador o desarrollador del tema para solicitar cambios de CSS
  • Pruebe los cambios en un entorno de prueba antes de aplicarlos en vivo
  • Borre la memoria caché del navegador después de hacer cambios de CSS o de tema para ver las últimas actualizaciones
  • Para migraciones a gran escala:
    • Utilice herramientas de desarrollo del navegador para buscar tablas de problemas y acelerar el proceso de revisión
    • Haga ajustes manuales en cada artículo afectado. No hay una herramienta de migración masiva o corrección.

Estos pasos resuelven la mayoría de los problemas de visualización de imágenes y videos después de cambiar del editor heredado al nuevo editor de artículos. Le ayudan a mantener un aspecto coherente y profesional en los artículos de su centro de ayuda.

Solucionar problemas con videos

Si cambia del editor heredado al nuevo editor de artículos, los videos incrustados pueden aparecer de manera diferente en los artículos del centro de ayuda. En esta sección se muestra cómo hacer que los videos incrustados se muestren correctamente, especialmente con códigos de incrustación personalizados o plataformas de video no estándar.

Para que los videos incrustados se muestren correctamente:

  • Active la opción Mostrar contenido inseguro en la configuración del administrador de su centro de ayuda
  • Esta configuración permite que los iframes y scripts se muestren en los artículos
  • Si tiene problemas de seguridad, consulte a su equipo de TI o de seguridad antes de activar esta opción porque tiene implicaciones de seguridad

Solo se admiten los códigos de incrustación basados en Iframe para la incrustación de video en el nuevo editor de artículos. Otros métodos, como las etiquetas de script, los vínculos directos o las etiquetas div personalizadas, no son compatibles y no se muestran en el editor ni en los artículos publicados.

Un video incrustado se puede insertar de dos maneras:

  • Haga clic en Insertar en artículo > Incrustar en la barra de herramientas
    Opción de incrustación en barra de herramientas
  • Pegue un código de incrustación Iframe directamente en el código fuente del artículo
    • Si sus artículos usan incrustaciones que no son Iframe, actualícelos para que usen códigos de incrustación basados en Iframe de su proveedor de video
    • Si ya usaba iframes, active Mostrar contenido inseguro para que se muestre sin actualizar cada artículo

Ajustar el tamaño del video

El nuevo editor de artículos podría configurar los videos incrustados en un ancho del 100 % de manera predeterminada. Para cambiar el tamaño, use CSS, no atributos de ancho de HTML:

.article-body iframe {
  width: 50% !important;
}
Atención: No edite el ancho del video directamente en el editor de HTML. El nuevo editor de artículos puede sobrescribir el cambio.

Si los videos aparecen como miniaturas pequeñas o no se muestran como se espera:

  1. Confirme que Mostrar contenido inseguro esté activado
  2. Asegúrese de usar un código de incrustación basado en Iframe
  3. Si persiste el problema, infórmelo con los detalles del código de incrustación y las capturas de pantalla a su contacto de Support o gerente de producto

Si desea más información, consulte Transición al nuevo editor de artículos.

Descargo de responsabilidad de la traducción: Este artículo ha sido traducido usando software de traducción automática para proporcionar una idea básica del contenido. Se han realizado esfuerzos razonables para proporcionar una traducción exacta, sin embargo, Zendesk no garantiza la exactitud de la traducción.

Si surge alguna pregunta relacionada con la exactitud de la información incluida en el artículo traducido, consulte la versión en inglés del artículo, que es la versión oficial.

Tecnología de Zendesk