Dar estilo a las imágenes con clases CSS en CKEditor
CKEditor ofrece varias alternativas para dar formato a tu contenido, y a veces conviene conocer algunos detalles del funcionamiento interno del CKEditor para conseguir los resultados deseados.
Este artículo se centra en cómo dar formato a las imágenes, y aunque es un tutorial complementario a nuestro plugin ImageToolbar, el tutorial es aplicable a cualquier instalación del CKEditor.
El primer paso para saber cómo aplicar estilos a las imágenes en CKEditor es entender cómo funcionan los plugins que ofrecen para gestionar las imágenes. Hay dos plugins oficiales: el plugin “Image” y el plugin “Enhanced Images”
El plugin Image
Este es el plugin que viene instalado por defecto. Tiene muchas opciones, pero no es previsible que lo mejoren ya que CKSource ha afirmado que el futuro está en el plugin “Enhanced Images”.
Este componente es muy sencillo. La etiqueta de la imagen a la que queremos dar formato es siempre <img>; no cambia ni queda envuelta por otra etiqueta. Por lo tanto, las clases que defina en su hoja de estilos CSS se aplicarán a la imagen correctamente, no habrá sorpresas ni confusiones. En su hoja de estilos pondrá el tipo de selector que prefiera: img.class o simplemente .class.
Aunque este plugin no incluye la opción para centrar la imagen, puede usar clases para alinear la imagen como desee. El plugin ImageToolbar, tiene unas propiedades específicas para definir las clases para alinear las imágenes; por lo tanto, este plugin se encarga de aplicar o quitar los atributos para alinear según se necesite.
Este es un ejemplo de 3 clases que puede usar para alinear las imágenes y poner un margen adecuado para evitar que la imagen quede pegada al texto, evitando poner un margen en el lado donde no hay texto. No se puede conseguir este efecto usando solamente las propiedades de alineación y margen del diálogo:
float: left;
margin: 0 1em 5px 0;
}
img.rightImage {
float: right;
margin: 0 0 5px 1em;
}
img.centeredImage {
display: block;
margin: 0 auto 1em;
}
Ahora basta añadir en su configuración para el CKEditor el grupo correspondiente (de manera que solo un elemento del grupo esté activo en cualquier momento):
[
{ name: 'imageleft', 'class':'leftImage', title:'At the left', justifyCommand:'justifyleft' },
{ name: 'imagecenter', 'class':'centeredImage', title:'Centered', justifyCommand:'justifycenter' },
{ name: 'imageright', 'class':'rightImage', title:'At the right', justifyCommand:'justifyright' },
{ name: 'imageinside', 'class':'inline', title:'Inline', justifyCommand:'justifynone' }
],
[
{ name: 'imageborder', 'class':'borde', title:'Con Borde' }
],
[
{ name: 'imageshadow', 'class':'sombra', title:'Con Sombra' }
],
[
{ name: 'nomobile', 'class':'no-mobile', title:'No Mostrar en móvil' }
]
];
El plugin ImageToolbar se encargará de ajustar el Sistema ACF con las clases que quiera usar; no obstante, si añade elementos extra (por ejemplo, porque usa el mismo fichero config con hojas de estilo diferentes), el plugin ImageToolbar solo mostrará los botones asociados a la clases disponibles en la hoja de estilos actual.
El plugin Enhanced Image
Este el nuevo plugin que ofrece CKSource para gestionar las imágenes. A veces también lo llaman “Image2” (que es el nombre en su código interno) o “Captioned images” (que hace referencia a la principal característica de este plugin).
Ahora las cosas no son tan sencillas, porque de hecho hay 4 estados diferentes de una imagen de acuerdo con las opciones seleccionadas y de si está editando el contenido o la viendo de la página final.
Los dos primeros estados dependen de si está utilizando una imagen "normal", o una imagen "con título". Cuando visualizamos la página final, en el primer caso se obtiene un elemento clásico <img>, pero el segundo genera un elemento de envoltura <figure> y un elemento hermano <figcaption>:
<figcaption>Caption</figcaption>
</figure>
En esta situación, las clases definidas para ImageToolbar se aplican en el elemento externo <figure> porque esa es la única forma de conservarlos si el usuario opta por desactivar el título y utilizar de nuevo un elemento <img> sencillo.
Para aplicar el margen lateral al elemento “figure” en vez al elemento “img”, tendrá que tener más cuidado con sus hojas de estilo. Además, si desea utilizar bordes o sombras, usted tiene que decidir si desea aplicarlos al elemento “figure” en vez de al elemento “img”, por lo que podría terminar con una hoja de estilo como esta:
- Estilos de alineación utilizando sólo el nombre de la clase para aplicarlos tanto a los elementos figure e img:
float: left;
margin: 0 30px 5px 0;
}
.atRight {
float: right;
margin: 0 0 5px 20px;
}
.centered {
display:block;
float:none;
margin:5px auto;
}
- Estilos solo para el elemento img:
border-radius:20px;
}
img.ellipse, .ellipse img {
border-radius:50%;
}
También hay otro detalle importante para recordar cuando se está usando el plugin Enhanced Image: la estructura mientras se edita el contenido es muy diferente de la salida final. Incluye envolturas para proporcionar el cambio de tamaño y manejadores de arrastre, y en esta situación, las clases que haya definido en config.image2_alignClasses para el alineamiento de la imagen en Enhanced Image se aplican a la envoltura externa.
No hemos encontrado una forma adecuada para invalidar este comportamiento, y usted debe definir en su fichero config las líneas que necesite, porque no podemos generarlas en tiempo de ejecución.
Por último, si se aplica la clase Center, la estructura DOM de la página será modificada por el plugin Enhanced Image para crear una nueva envoltura p/div dónde la imagen estará centrada y será el único hijo.