Este componente de tema inserta botones en la barra de herramientas del compositor de publicaciones para alinear imágenes cargadas a la izquierda o derecha del texto, en el centro de la publicación, o para alinear varias imágenes en una cuadrícula, utilizando las etiquetas de cuadrícula implementadas recientemente. La cuadrícula dimensionará automáticamente las imágenes para que encajen según la cantidad y las dimensiones de cada una, y también enlazará a las versiones cargadas más grandes. Los botones / funciones de alineación se pueden usar varias veces en una publicación para crear una variedad de diseños. Funciona tanto para vistas de escritorio como móviles.
Para usarlo, simplemente haga clic en el botón de alineación de imagen que necesite, luego cargue las imágenes en el lugar designado entre las etiquetas resultantes (marcadas con texto de marcador de posición que se puede editar en la configuración del componente).
Tenga en cuenta que la parte de cuadrícula de este componente es para alinear imágenes cargadas, no enlaces de imágenes (las otras opciones de alineación funcionarán para imágenes enlazadas). Tomé prestado parte del marco de código básico del útil componente MD Composer Extras de @Steven.
Pendiente: agregar selectores de iconos adecuados para cada botón.
Capturas de pantalla
botón de cuadrícula de la barra de herramientas del compositor (con ejemplo de código de cuadrícula)
¿te refieres al compositor / editor con la barra de herramientas? esa sería la primera captura de pantalla con el ejemplo de la cuadrícula. añadiré algunas capturas de pantalla del editor con los otros códigos de alineación alrededor de las imágenes.
De nada. ¿Cómo haces para que “Alinear a la izquierda”, por ejemplo, muestre texto en negrita en tu captura de pantalla? Intenté con Markdown y muestra el código de Markdown.
Veo que funciona con ### pero el negrita estándar con
solo inserta algunas etiquetas HTML <br><br> entre el primer bloque de texto y la etiqueta <div>-data-theme... hasta que se espacie correctamente. Intentaré programar un retorno forzado o algo así cuando tenga tiempo.
Creo que este no es un método confiable ya que la altura del contenido diferirá del tamaño de una ventana a otra.
Limpiar los flotantes cuando hay contenido arbitrario al lado es complicado. No estoy seguro de que haya una solución obvia aquí…[1]
También fue un problema con el editor de Wordpress durante mucho tiempo.
La gente tiende a depender de métodos hacky que utilizan elementos cuyo único propósito es tener un clear: both; para restablecer los flotantes anteriores.
Sí, a mí tampoco me gusta ese método. Estaba pensando en intentar una solución de propiedad de espacio en blanco. al final, funciona mejor si las imágenes alineadas son publicaciones separadas. Desafortunadamente, las imágenes en las tablas tampoco funcionan muy bien.
Probé esas soluciones de propiedad flex align pero no pude encontrar algo que funcionara de manera consistente. Sin embargo, encontré una solución alternativa utilizable. Si haces que cada sección de imagen-texto sea una cita en bloque, las separa (pero incluye el formato de cita para el texto):
al final, funciona mejor si las imágenes alineadas son publicaciones separadas. Desafortunadamente, las imágenes en las tablas tampoco funcionan muy bien.
.
