¿Cómo se organizan y redimensionan las participaciones del concurso en la plantilla mosaico?

En los concursos creados con Easypromos – ya sea de fotos, vídeos o textos – el administrador puede habilitar la plantilla mosaico para organizar las participaciones en la galería del concurso. Con el fin de optimizar el espacio disponible, la plantilla mosaico muestra los distintos elementos (textos, fotos y/o vídeos) encajándolos en todo el espacio disponible como si de una pared de ladrillos se tratase. Puedes ver un ejemplo de esta plantilla en este enlace.

La plantilla mosaico, solamente está disponible para las versiones Premium y Marca Blanca de Easypromos.

 

Para habilitar la plantilla mosaico deberá seguir estos pasos:

 

1. Accede al Editor > Opciones > Participaciones y marca la opción 'Publicar participaciones' para hacer pública la galería de participaciones del concurso:

Opcion_Publicar_Participaciones.png

 

2. A continuación, accede a Editor > Editar > Listado de participantes y selecciona la opción 'Usar plantilla mosaico':

Opcion_Usar_Plantilla_Mosaico.png

 

Al habilitar la plantilla mosaico, aparecerán las siguientes opciones que podrás configurar:

  • Altura máxima de fila: permite especificar el alto máximo en píxeles que pueden tener los distintos elementos dentro de la galería. El valor por defecto es de 300px.
  • Configuración de colores para las citas de texto: En caso de concursos basados en texto, las participaciones de los usuarios se mostrarán en la galería en formato cita dentro de un recuadro. Este recuadro se puede personalizar con un color de fondo y de texto. Descubre todas las opciones de personalización para las participaciones del tipo texto

 

Requisitos de los usuarios para subir las fotos

Los requisitos de los usuarios para subir fotos, son los mismos que para la plantilla vertical:

  • Formato válido de foto: JPG/GIF/PNG
  • Peso máximo de la foto: 10MB
  • Dimensiones: sin restricción

La aplicación se encargará de redimensionar automáticamente las fotos subidas por los usuarios, para su correcta visualización dentro de la galería de fotos.

 

Características de la plantilla mosaico

Cuando se habilita la plantilla mosaico, ésta será la plantilla que se visualizará por defecto cuando un usuario acceda a la galería del concurso. El usuario tendrá la posibilidad de poder cambiar la vista de la galería, así podrá ver la galería en formato vertical o en formato mosaico. 

Vista_Galeria.png

 

Nota importante: La plantilla mosaico es 100% responsive, pero para dispositivos con una pantalla de resolución mínima de 550px de ancho, se mostrará directamente la plantilla vertical, porque para pantallas pequeñas es la que tiene mejor experiencia de usuario y optimiza la usabilidad.

 

Vista_Galeria_2.pngCuando se pasa el cursor por encima de uno de los elementos de la galería, aparecerá la información básica de la foto: nombre del usuario, fecha de la participación, descripción de la foto o vídeo si existe, la posibilidad de votarla y compartirla. Observación: Esta información puede cambiar en función del ancho de la foto dentro de la galería. Para más información, consultar el final de este artículo, en 'Opción de altura máxima'.

 

Cuando se hace clic encima de la participación, se abrirá el visor, que permitirá ver la foto ampliada, con la información de usuario, descripción, y las acciones sobre la participación: compartir, votar y comentar.

Además el sistema de visor, permite al usuario navegar entre las participaciones, a través de las flechas, o directamente con el teclado, mediante las teclas de izquierda y derecha.

Vista_Galeria_3.png

 

 

Cómo se organizan los elementos dentro de la galería

 

Número de elementos y paginación

Los distintos elementos aparecen en la galería de forma paginada. El administrador puede escoger en el formulario de configuración de la promoción, el número de participaciones que aparecerán por  página en la galería. El número de participaciones por página puede ir desde de 5 a un máximo de 200.

El valor por defecto es de 25 participaciones por página.

 

Ordenación de las participaciones

Las participaciones por defecto se ordenan de más a menos reciente. Desde el formulario de edición de la promoción, hay la posibilidad de poder ordenarlas de forma aleatoria, así cada vez que se cargue la galería aparecerán los elementos con un nuevo orden.

En caso que se habiliten los votos, aparecerá una nueva opción en la galería que permitirá al usuario poder ordenar las participaciones de más o menos votada.

 

Participaciones anónimas

Existe la opción de no mostrar el autor de las participaciones, para ello desde el formulario de edición se deberá habilitar la opción de participaciones anónimas.

 

Estas opciones se pueden controlar desde la sección Participaciones > Opciones de publicación, cuando se tiene habilitada la opción de "Publicar participaciones":

Opciones_de_Publicacion.png

 

Distribución de las participaciones

La plantilla mosaico encaja todas las participaciones del concurso en todo el espacio disponible como si de una pared de ladrillos se tratase. Esta forma de organización hace que la galería cambie su aspecto en función de las participaciones que haya, ya que cada nueva participación que se añade en el concurso, afecta a la distribución del resto de elementos.

A nivel de configuración para esta plantilla solamente se solicita la altura máxima de las filas, que tiene un efecto directo en el número de elementos que caben por fila.

 

A continuación explicamos cómo se presenta la galería mosaico en el caso de un concurso de fotos:

 

1. Las fotos en la galería se distribuyen por filas. Cada fila de la galería aprovechará todo el ancho disponible. Este ancho dependerá de la resolución de pantalla, con un máximo de 810px. Para empezar a colocar fotos, se debe preparar cada fila. Para cada fila, se utiliza todo el ancho disponible, y se añaden 50 píxeles de umbral:

01.jpg

 

 

2. De forma ordenada, se añade a la primera fila las fotos ajustadas al valor de altura máxima definido, hasta que la siguiente imagen a colocar sobrepase el ancho total (incluyendo los 50px umbral):

02.jpg

03.jpg

04.jpg

05.jpg

 

3. En el ejemplo se ha podido poner en la fila las imágenes 1, 2 y 3, pero la 4 sobresale del umbral. Una vez tenemos la fila de imágenes completa, se escala para que su ancho sea el ancho de la galería (sin el umbral):

 

06.jpg

 

4. Se procede de este modo para cada fila hasta completar todas las imágenes a mostrar en la galería:

07.jpg

 

 

Observación: Cómo la galería funciona con el sistema de paginación, puede pasar que en la última fila de la página, no haya suficientes fotos para completar todo el ancho disponible.

 

Opción de altura máxima

Como se observa en los esquemas anteriores, la opción de altura máxima disponible en el formulario de edición, permite controlar las dimensiones de las fotos dentro de la galería. De esta forma, cuanto mayor sea esta opción, las fotos serán de mayor dimensiones dentro de la galería, pero habrán menos fotos por fila. Cuanto menor sea el valor, más pequeñas serán las fotos dentro de la galería, pero más fotos habrán por fila.

Los valores recomendados de altura máxima son entre 200px y 400px, y el valor que viene por defecto cuando se activa la galería son 300px.

A partir del valor de altura máxima de imágenes menor de 300 píxeles, las imágenes verticales pueden quedar demasiado estrechas para poder mostrar toda la información que aparece al poner el cursor encima, con lo que van ocultándose elementos en función de un escalado de anchos de las imágenes:

  • Imágenes más anchas que 200 píxeles: se muestra toda la información.
  • Menores de 200 píxeles: se oculta el icono de ampliar la imagen (aunque puede seguir ejecutándose esta acción haciendo clic encima de la imagen).
  • Menores de 180 píxeles: se oculta, si existe, el comentario introducido por el participante.
  • Menores de 150 píxeles: se oculta el botón para compartir, el nombre del participante y la fecha de participación.
  • Menores de 120 píxeles: se oculta el botón de votar.
  • Menores de 50 píxeles: se oculta el avatar del usuario.

 

¿Tiene más preguntas? Enviar una solicitud

0 Comentarios

Inicie sesión para dejar un comentario.