El día de hoy les quiero mostrar cómo integrar ColorBox con CKEditor, esto nos va a ayudar por ejemplo cuando nosotros queremos insertar alguna imagen con un enlace o un texto con un enlace hacia una imagen y que se nos muestre el ColorBox desplegando la imagen que nosotros queremos.
Para ello vamos a utilizar esta página que tenemos aquí en la página de inicio, voy a editar esta página y voy a eliminar y todo el contenido que nosotros tenemos aquí.
Bien lo primero que podemos hacer es y subir una imagen a nuestra página, entonces vamos a proceder a crear una carpeta para tener un poco más organizado esto. Vamos a crear una carpeta con el nombre de “imágenes”, vamos botón de ingresar y ahora vamos a subir nuestra imagen.
Yo ya había descargado una que viene siendo esta y le vamos a decidir aceptar. En este caso voy a seleccionar estas tres opciones porque voy a utilizar una de estas tres imágenes como miniatura para que cuando se le dé un clic me muestre la imagen original así. Le voy a decir aquí “subír el servidor” se sube mi imagen original que es esta y me genera las otras tres: la pequeña, la mediana y la grande.
Yo voy a insertar la mediana, podemos insertar la que la que nosotros queramos, pero yo voy a seleccionar esta. Le digo en “file” y le voy a decir “aceptar”. Aquí vamos a guardar para que se vea más o menos como debería de funcionar. Le vamos a meter un enlace para poder hacer la Integración y para que cuando le damos un clic, nos muestra el ColorBox. Necesitamos verificar que se encuentra habilitada una opción, vamos a ir a configuración de Drupal, luego vamos a ir a ColorBox en la sección de multimedia y vamos a habilitar esta que dice ColorBox. En las indicaciones nos dice que debemos agregar el texto “colorbox-load” en la clase a nuestro enlace, vamos a aceptar para guardar los cambios.
Cerramos el área de configuración y ahora vamos a editar de nuevo nuestro contenido. Vamos a seleccionar la imagen y le vamos a dar un clic en insertar vínculo, después le vamos a decir “ver servidor” para seleccionar la imagen original que es la que nosotros queremos que se vea, seleccionamos el archivo que subimos con el nombre exacto y hacemos clic en “insertar archivo”. Ahora seleccionamos las opciones avanzadas y en el campo que dice clases de hojas de estilo vamos a escribir “colorbox-load” y ahora vamos a guardar los cambios.
Muy bien, vamos a ver verificar si funciona dando clic sobre la imagen con nuestro enlace podemos ver como se despliega nuestra imagen utilizando nuestro ColorBox. Lo anterior lo podríamos utilizar de igual forma con algún texto en lugar de una imagen.
