Átomo Expositivo: Imagen

Este átomo de Bloom permite insertar una imagen en combinación con cualquier otro átomo. En este tutorial podrás aprender cómo utilizarlo para integrarlo a una molécula de aprendizaje.

Personalización del Átomo:

Las partículas son los atributos del átomo, es decir, las configuraciones disponibles que se pueden personalizar dependiendo del ejercicio que desees realizar. En este caso, la Imagen solo requiere indicar el nombre del átomo en el Markup y enseguida el
nombre del archivo de la imagen como se muestra a continuación:

- Image: image8.png
También es posible utilizando directamente la url del archivo de imagen:

- Image: https://yeira.academy/platforms/yeiraacademy/html/2/442f26be49b9ae3046d0e2ad53672d8c/0_Sesion/assets/image8.png

Los archivos de imagen soportados son: jpeg, gif, png, apng, svg, bmp, bmp ico, png ico

Ejemplo Átomo Imagen

Cómo integrar el átomo de Imagen a otro átomo Bloom

El átomo de Imagen es normalmente un elemento gráfico de apoyo para contenidos evaluativos, sociales o expositivos, por lo que se integra a la estructura de un contenido más complejo, veamos el siguiente ejemplo con un Tablero Social:

Ejemplo de Imagen con Tablero Social

En el Markup se escribe de la siguiente manera:

- page:
- Image: image8.png
- title: ¿Quién es el Learner Persona?
- subtitle: Redacta tu respuesta y pulsa enter para enviar.
- Board:
id: Board-01
placeholder: Escribe aquí tu respuesta


Donde - page: es la página que contiene los átomos, por lo que es necesario incluirlo al principio del Markup.

Pasos para añadir o modificar una imagen en un paquete Bloom

En el paquete de contenidos Bloom, ubica la carpeta assets. Si no existe crea una con el mismo nombre assets (cuida que este escrito todo en minúsculas)
Dentro de la carpeta assets, añade o reemplaza la imagen que deseas agregar a tu contenido Bloom
Dentro del archivo page.yaml utiliza solo el nombre del archivo de la imagen (ej: image8.png)
Selecciona todos los archivos y comprime en archivo ZIP el contenido.
Súbelo a tu curso en tu sitio Yeira como recurso tipo HTML y ¡es todo!

Carpeta "assets" del paquete Bloom

Archivo Imagen dentro de la carpeta "assets"

Archivo "pages.yaml" del paquete Bloom

Edición de archivo "pages.yaml" del paquete Bloom

Cómo comprimir el paquete Bloom después de editarlo

Asegúrate que la imagen sea del tamaño final que deseas se muestre. El átomo Image es responsivo, por lo que se adecuará a la resolución en pantalla, pero crecerá solo hasta el tamaño original de la imagen.
Cuida el indentado del Markup para visualizar correctamente la conformación del contenido.

¿Quieres aprender paso a paso? Inscríbete al curso gratuito "Introducción a Bloom" de Yeira Academy

¿Necesitas ayuda? Contacta al Soporte de Yeira en: soporte@yeira.training

¿Aún no tienes cuenta en Yeira? Crea una gratis ahora aquí.
¿Este artículo te resultó útil?
Cancelar
¡Gracias!