Documentación del módulo «Equipo»

 También se pueden cambiar los iconos de redes sociales. Por ejemplo, si no necesitas Instagram pero sí Digg, cambia fab fa-instagram por fab fa-digg

No olvides cambiar los enlaces href="#" por los correctos que correspondan a cada red social.

Cargar artículos en el módulo

En Extensiones - Módulos, haz clic en el módulo «Equipo». Selecciona una posición que exista en la plantilla y colócala en los elementos del menú que quieras mostrar.

Haz clic en la pestaña «Gestor del equipo» y, en «Fuente», selecciona «Artículos».

En «Seleccionar categoría», selecciona todas las categorías creadas para los miembros del equipo.

Establece «Artículos de subcategorías» = Incluir.

Si en los pasos anteriores se han creado perfiles en redes sociales para los miembros del equipo, establece «Campos personalizados» = Sí. Para el resto, configura los ajustes que prefieras.

Elementos personalizados

Los elementos personalizados se introducen en el campo «Elementos repetibles». Añade un registro por cada persona o equipo, publícalo y ordena los registros en el orden en que quieras que aparezcan. El subformulario admite hasta 250 entradas.

Los elementos personalizados no utilizan categorías de artículos, etiquetas, enlaces a artículos ni extracción de imágenes de artículos. Su contenido procede del subformulario. Un diseño puede omitir algunos campos, así que comprueba que el estilo elegido muestre la información que tienes previsto introducir.

Crear elementos personalizados

En la pestaña «Team Manager», en «Seleccionar fuente», elige «Elementos personalizados».

En todos los campos, introduce toda la información de la persona, como la foto, el nombre, el cargo principal, etc. Utiliza el botón «Añadir» para añadir tantos miembros del equipo como sea necesario.

Si necesitas incluir redes sociales, marca «Redes sociales»: sí. Utiliza también allí el botón «Añadir» para añadir redes sociales. En «Icono de red social», selecciona uno de los iconos disponibles y añade un enlace URL válido que corresponda a esa red social.

Selecciona la carpeta de origen

1. En la configuración del módulo, establece «Fuente» en «Carpeta».
2. Elige un directorio dentro de la images/ utilizando el campo «Directorio de la carpeta».
3. Selecciona un estilo visual en «Estilo».
4. Establece el número de elementos si es necesario. Un valor de 0 significa que se incluirán todos los archivos compatibles.

La carpeta seleccionada y sus subcarpetas se analizan de forma recursiva. Las extensiones compatibles son jpg, jpeg, png, gif, webp, bmp, y mp4.

Formato del nombre de archivo de la carpeta

Utilice el nombre del archivo sin su extensión para indicar el nombre de la persona, el título y la descripción:

01 - Jane Doe | Creative Director || Designs brand systems and campaigns.jpg

Utiliza este patrón recomendado:

ORDER - NAME | TITLE || DESCRIPTION.ext

Prefijos numéricos

Los números iniciales seguidos de un separador se eliminan del nombre y el título que se muestran. Estos ejemplos se muestran como Jane Doe:

01 - Jane Doe.jpg
02_Jane Doe | Designer.jpg
03. Jane Doe | 02: Lead Developer.jpg

Los guiones y los guiones bajos que aparecen dentro del texto restante se muestran como espacios. El nombre de archivo original y la URL de la imagen no se modifican.

Nombres de archivo sencillos

Jane-Doe | Designer || Short biography.webp

Si no hay ninguna barra vertical, el nombre completo del archivo se convierte en el nombre. Si no se proporciona ningún título después de la barra vertical, el campo de título queda vacío.

Presentación y diseño

Estilo

El manifiesto ofrece las opciones Predeterminado, Mostrar, Pared, Diapositiva y Estilo 1 a Estilo 65. Esto supone un total de 69 opciones de diseño. Utiliza las vistas previas en miniatura del selector de estilos para compararlas; cada diseño puede colocar las imágenes, los títulos, las descripciones, los enlaces y los controles sociales de forma diferente. No todos los diseños muestran todos los campos ni responden a todas las opciones de presentación de la misma manera.

Los controles específicos de cada estilo incluyen:

• Estilo 12: muestra la altura de la foto.
• Estilo 60: muestra el «Ancho de la imagen», desde 200 px hasta 550 px.
• Estilo 63: muestra la versión de estilo claro u oscuro.
• Diapositiva: muestra las opciones «Mostrar paginación», «Mostrar flechas» y «Estilo de las flechas».
• Mostrar: permite configurar el color de fondo y el color del texto.

Versión: Estándar o Slider

«Slider» presenta al equipo como un carrusel en movimiento. Permite la reproducción automática, el bucle, la navegación y ajustes adaptativos del número de elementos. «Estándar» presenta una cuadrícula adaptativa y habilita la opción de filtro Isotope. Elige primero la versión, ya que esto determina qué controles se muestran en el formulario de administración.

Columnas de la cuadrícula adaptativa

En el modo Estándar, elige el número de columnas por separado para Ordenador, Tableta horizontal, Tableta vertical, Móvil horizontal y Móvil vertical. Cada configuración ofrece de 1 a 10 columnas. Los valores guardados son porcentajes de columna; por ejemplo, el 25 % corresponde a cuatro columnas iguales y el 50 % a dos. Selecciona un mayor número de columnas solo si el área del módulo y el estilo elegido dejan espacio suficiente para cada elemento.

Número de elementos adaptables en el control deslizante

En el modo «Slider», la configuración «Elementos» determina cuántos elementos se muestran en cada uno de los mismos cinco tamaños de dispositivo. En cada punto de ruptura se puede establecer un número de elementos visibles de entre 1 y 10. En pantallas estrechas, uno o dos elementos suelen ser más legibles que reducir el número de elementos de la versión de escritorio a la de móvil.

Comportamiento y controles del slider

Configuración general

Modo de redimensionamiento

Se aplica a los archivos de imagen utilizados por los artículos, los elementos personalizados y los elementos de carpeta. El asistente de imágenes común del módulo procesa la imagen cuando un diseño le solicita la URL de la misma, por lo que la configuración se comparte entre los modos de presentación «Estándar» y «Slider», así como entre los estilos que representan la imagen del elemento. El diseño elegido puede seguir aplicando su propio redimensionamiento CSS o recorte visual una vez cargada la imagen procesada.

Estos controles son independientes de los conmutadores de origen de imagen y del marcador de posición exclusivos de los artículos. Modifican la forma en que se prepara una imagen seleccionada; no determinan de dónde procede la imagen. En el caso de los archivos MP4 de las carpetas, el módulo también utiliza el modo de redimensionamiento y las dimensiones configuradas cuando genera una miniatura en el navegador; el propio MP4 sigue siendo un vídeo.

Por ejemplo, elige «Rellenar» para miniaturas verticales de tamaño uniforme cuando sea aceptable recortar los bordes; elige «Ajustar» cuando todas las partes de cada foto original deban permanecer visibles; elige «Estirar» solo cuando la distorsión sea aceptable o las proporciones originales ya coincidan. La opción «Ninguna» resulta útil cuando deben conservarse las dimensiones y el formato originales.

Filtros y espaciado entre elementos

El filtro muestra una fila de botones encima de los elementos del equipo. Los visitantes pueden elegir «Todos» o una etiqueta para mostrar solo los elementos que coincidan sin salir de la página. La alineación del filtro puede ser «A la derecha» (predeterminada), «Centrada» o «A la izquierda».

Importante: Los filtros no se muestran en el diseño de control deslizante. Establece la versión en «Estándar». El filtro también necesita al menos una etiqueta no vacía en la fuente seleccionada.

01 - Jane Doe | Creative Director.jpg
02 - John Smith | Engineering.jpg

images/team/
├── 01 - Jane Doe | Creative Director || Brand and campaign systems.jpg
├── 02 - John Smith | Engineering Lead || Platform and infrastructure.mp4
└── 03 - Alex Lee | Product Designer || Product experience and research.webp

La «Distancia entre elementos» ajusta el espaciado entre los elementos del equipo cuando el diseño activo lo admita. El «Efecto de foco en los elementos» controla el comportamiento al pasar el cursor o al enfocar en los diseños que lo implementen. Dado que estos efectos dependen del diseño, previsualízalos con el estilo seleccionado.

9. Efectos de imagen

Forma de la imagen

La forma de la imagen controla el contorno visible de cada imagen y es independiente de su tratamiento visual. Elige entre Rectángulo, Círculo, Elipse, Rombo, Hexágono, Salpicadura, Forma 1 a Forma 6 o Aleatorio (Formas 1-6). La opción Rectángulo deja la imagen sin recortar por ninguna forma. Aleatorio selecciona una de las seis máscaras de forma proporcionadas para cada imagen individual.

Círculo, elipse, rombo, hexágono y salpicadura utilizan el recorte del navegador. Las formas 1 a 6 utilizan máscaras WebP transparentes incluidas con el módulo. La selección de forma se puede combinar con «Original», «Dibujo» o «Acuarela». Algunos diseños representan las fotos como fondos CSS en lugar de elementos de imagen; es posible que esos diseños no admitan la máscara de forma ni el efecto de lienzo.

Efecto de imagen «Dibujo»

El efecto de imagen «Dibujo» selecciona cómo se representa la foto original. Elige uno de estos modos:

• Nivel de efecto: aparece en los modos Dibujo y Acuarela. Elige 1 (Suave), 2 (Ligero), 3 (Normal), 4 (Fuerte) o 5 (Muy fuerte); el valor predeterminado es 3. En el modo Dibujo, los niveles más altos intensifican el tratamiento de las líneas y del papel. En el modo «Acuarela», los niveles más altos intensifican el pigmento, aumentan la separación de colores y la acumulación en los bordes, y hacen que la textura del papel sea más visible.
• Pasar el ratón por encima de las imágenes: elige «Original» para mostrar la foto original mientras el puntero se encuentra sobre el elemento del equipo, o «Dibujo» para mantener visible la imagen procesada seleccionada. Esta configuración está disponible tanto para «Dibujo» como para «Acuarela».

Caché de imágenes generadas

Las imágenes procesadas se generan en el navegador y se pueden guardar como archivos WebP en /cache/mod_mx_team/drawing-effects para acelerar las visitas posteriores a la página. Cuando cambias una foto, una forma, el modo de efecto o un nivel, el módulo utiliza un resultado almacenado en caché diferente. Para eliminar todas las copias generadas, abre el módulo en el panel de administración y utiliza «Vaciar caché» en «Configuración». Confirma la acción; la carpeta de caché permanece en su lugar y las imágenes se generan de nuevo a medida que los visitantes cargan la página.

Cuando los efectos no aparecen

• Utiliza un diseño que muestre la foto del miembro como un ; es posible que las imágenes de fondo CSS no se procesen.
• Las imágenes de otro dominio deben permitir el acceso a «canvas» a través de CORS. De lo contrario, el navegador no podrá leer sus píxeles y, en su lugar, se mostrará la imagen original.
• Las imágenes muy grandes se reducen a una dimensión máxima de trabajo antes de su procesamiento, por lo que los detalles más finos pueden simplificarse.
• Comprueba en la consola del navegador si hay errores de carga o relacionados con el canvas. Si un resultado almacenado en caché parece obsoleto, vacía la caché de efectos de dibujo y vuelve a cargar la página.

Revelar al desplazarse

El efecto «Revelar» habilita una animación de entrada activada por el desplazamiento en diseños que incluyan el marcado «reveal». La opción «Animación» permite elegir si la animación se ejecuta «Una vez» o «Siempre». La opción «Efecto» permite seleccionar una dirección, fundido, zoom, sacudida, parpadeo o cualquier otro efecto de entrada relacionado. El hecho de que un campo esté disponible en el formulario del módulo no garantiza que todos los estilos lo utilicen.

Correcciones de los iconos sociales en la plantilla

En uno de los archivos CSS de la plantilla, añade el siguiente código

ul.social {
    display: inline
}

ul.social li {
    display: inline-block
}
ul.social li a {
    color: #7b7b7b;
    font-size: 16px;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50px; 
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid transparent;
    transition: background-color .4s ease-in-out
}

Con este código, es posible mostrar los iconos sociales de los miembros del equipo en los artículos de forma integrada, con un aspecto atractivo.

Solución de problemas

El módulo no es visible

• Comprueba que el módulo esté publicado, que tenga asignada una posición en la plantilla y que esté asignado a la entrada de menú actual.
• Comprueba el nivel de acceso del módulo, las fechas de inicio y fin de publicación, y la visualización de la posición en la plantilla.

No aparecen miembros ni artículos

• En el caso de los artículos, comprueba que estén publicados y sean accesibles; a continuación, revisa las categorías seleccionadas, el nivel de subcategorías, las etiquetas y el modo «Artículos destacados».
• En el caso de los elementos personalizados, comprueba que una o más entradas estén configuradas como «Publicar».
• En el caso de las carpetas, comprueba que la carpeta elegida se encuentre dentro de images y contiene archivos con extensiones compatibles.
• Vacíe la caché de módulos de Joomla tras modificar la fuente o su contenido.

Faltan imágenes o no se han modificado

• En el caso de los artículos, activa las opciones correctas de origen de imagen, comprueba el orden y verifica la ruta del marcador de posición.
• Para las entradas personalizadas, selecciona una imagen en «Buscar imagen» y comprueba que el estilo elegido utilice el campo de imagen.
• Para «Carpeta», comprueba la extensión del nombre de archivo y la ruta del sistema de archivos en images.
• El redimensionamiento de imágenes requiere que el soporte de imágenes de PHP funcione correctamente y que la ubicación de la caché sea escribible.
• Los efectos de dibujo pueden no procesar correctamente las imágenes de origen cruzado; comprueba la consola del navegador y prueba con una imagen del mismo sitio.

Problemas con la carpeta de origen

No aparecen los controles deslizantes ni los filtros

• Los filtros requieren el modo Estándar y que la opción «Mostrar filtro» esté activada.
• El recuento de elementos adaptables y los controles de reproducción automática requieren el modo «Slider».
• La configuración de paginación y flechas que se muestra para el estilo «Diapositiva» no se aplica a todos los diseños.
• Comprueba que el estilo seleccionado admita el control y que ninguna otra extensión haya provocado un error de JavaScript.

Faltan los iconos de redes sociales

Activa la opción «Redes sociales» en el elemento, añade al menos un icono social y una URL, y comprueba si la plantilla ya carga una biblioteca de Font Awesome compatible. Utiliza la opción «Font Awesome» del módulo solo si falta la fuente de iconos.