Imágenes, líneas, dibujo - Documentación

El complemento se ejecuta en la interfaz del sitio y aplica el efecto seleccionado a las imágenes, a menos que un filtro las excluya.

Configuración recomendada: elige un efecto y una forma globales, limita su aplicación si es necesario y, a continuación, añade reglas de ID o clase para las áreas que necesiten un efecto o una forma diferentes.

Efecto y forma globales

Estos son los ajustes predeterminados para las imágenes que no se ajustan a ninguna regla de anulación.

• Efecto artístico de imagen
  • Original (0): mantiene la imagen original sin cambios. La forma seleccionada puede seguir enmascarándola o recortándola.
  • Dibujo (1): aplica el efecto de dibujo a lápiz.
  • Acuarela (2): aplica el efecto de acuarela.
• Forma de la imagen: elige rectangle, circle, ellipse, diamond, hexagon, splash, shape1 entre shape6, o random. La opción «Aleatorio» elige entre las máscaras de forma 1 a 6 disponibles.

Opciones de dibujo y animación

• Modo de dibujo: establece el aspecto del dibujo: Sepia o Blanco. Se muestra para el efecto Dibujo.
• Nivel del efecto: controla la intensidad del efecto de dibujo o acuarela. Elige Suave, Ligero, Normal, Fuerte o Muy fuerte.
• Pasar el ratón por encima de las imágenes: para los efectos «Dibujo» y «Acuarela», elige si al pasar el ratón por encima de un elemento del equipo se muestra su imagen original o se sigue mostrando el efecto.
• Animación de los contornos de la imagen: dibuja los contornos de la imagen utilizando trazos SVG animados. El color del contorno se extrae de la foto en el caso de «Acuarela», y se puede configurar con el «Color de dibujo» para el efecto «Dibujo».
• Revelar fondo de la imagen: revela gradualmente la imagen desde su centro a medida que se dibujan los contornos. Esto se puede utilizar con o sin animación de contornos.
• Color de dibujo: establece el color del trazo del contorno cuando la animación del contorno está activada para el efecto «Dibujo».
• Duración de la animación: duración utilizada por la animación de los contornos y/o de la revelación del fondo. Disponible de 1 a 10 segundos en incrementos de 0,5 segundos.
• Ancho del trazo: ancho de los trazos animados del contorno, de 0,5 a 3 píxeles.

Las modificaciones de efecto, forma y área de imagen solo sustituyen el efecto y la forma. El modo de dibujo, el nivel, el comportamiento al pasar el cursor, la animación de contornos, la revelación del fondo, la duración, el ancho del trazo y el color de dibujo siguen siendo ajustes globales.

Elementos de menú y filtros de imagen

Habilitar en elementos del menú

Selecciona los elementos del menú de Joomla en los que se debe ejecutar el complemento. Deja la selección vacía para que se ejecute en todos los elementos del menú. Esta configuración controla si el complemento se carga en la página.

Modo de filtro del área de imagen

Los ID y las clases del área de imagen identifican un elemento y todas las imágenes anidadas en su interior. El modo de filtro determina si se incluyen o se excluyen las áreas coincidentes:

• Excluir áreas coincidentes: procesa las imágenes excepto aquellas que se encuentren dentro de un ID o una clase coincidentes. Esta es la opción predeterminada.
• Incluir solo las áreas coincidentes: procesa las imágenes únicamente cuando se encuentren dentro de un ID o una clase coincidentes. Si ambas listas de filtro están vacías, ninguna imagen coincide.

ID y clases de las áreas de imagen

Introduce uno o más ID o nombres de clase, separados por comas, punto y coma o espacios. No incluyas el prefijo CSS (el complemento también acepta un # o .). Se trata de filtros, no de reglas de efectos; configura los efectos por área en los campos de anulación que aparecen a continuación.

IDs:     hero, article-images
Classes: gallery, product-photo

Configuración por ID y por clase

Utiliza estos campos para asignar a cada área su propio efecto y forma. Añade exactamente una regla por línea con este formato:

target|effect|shape

• target: un identificador de elemento o un nombre de clase. Introduce el nombre sin formato; un # o . al principio es opcional.
• effect: 0 = Original, 1 = Dibujo, 2 = Acuarela.
• shape: rectangle, circle, ellipse, diamond, hexagon, splash, shape1 hasta shape6, o random.

Ejemplos

Configuración de dibujos por ID:

team-portraits|1|circle
homepage-gallery|2|shape3
brand-logo|0|rectangle

Configuración de dibujo por clase:

staff-photo|1|hexagon
watercolor-gallery|2|random

El primer ejemplo aplica el efecto «Dibujo» y una forma circular a las imágenes que hay dentro del elemento con el ID team-portraits. El segundo aplica «Acuarela» y «Forma 3» a las imágenes que hay dentro de homepage-gallery. Un efecto de 0 deja la imagen original, pero aplica igualmente la forma elegida.

¿Qué regla prevalece?

1. El ID que mejor coincida con la imagen o con uno de sus antepasados prevalece sobre cualquier regla de clase.
2. Si ninguna regla de ID coincide, prevalece la regla de clase que más se acerque.
3. Si no hay ninguna anulación que coincida, se utilizan el efecto global y la forma.

Utiliza una regla para cada ID o clase. Separa los tres valores con la barra vertical (|), no una coma. La regla completa debe estar en una sola línea. Las líneas no válidas se ignoran y se muestran en la consola del navegador.

Las anulaciones seleccionan áreas independientemente del filtro de inclusión/exclusión. Un filtro puede seguir excluyendo un área del procesamiento. Para utilizar una anulación en modo «Incluir», su área también debe coincidir con uno de los ID de área de imagen o con una de las clases de área de imagen.

Caché, jQuery y CSS personalizado

• Caché de efectos de dibujo: elimina los archivos generados de dibujo y acuarela de la caché de efectos de dibujo del complemento. Utiliza esta opción después de realizar cambios si necesitas que se vuelvan a crear las imágenes generadas.
• Cargar jQuery: carga la copia de jQuery incluida con el complemento cuando se establece en «Sí». Déjalo desactivado si el sitio ya proporciona la biblioteca necesaria o si no la necesitas.
• CSS personalizado: añade declaraciones CSS a la página de la interfaz de usuario. Utiliza esta opción para ajustes de estilo; un CSS mal formado puede afectar al aspecto de la página.

Solución de problemas

• No se procesa una imagen: comprueba la selección del elemento del menú y las listas de modo de filtro, ID y clase. En el modo «Incluir», al menos un filtro configurado debe coincidir con un antepasado de la imagen.
• No se aplica una sustitución: comprueba que el ID o la clase del elemento esté presente en la imagen o en un antepasado; utiliza una sola target|effect|shape línea y comprueba la ortografía de la forma y el número del efecto.
• El aspecto de la imagen no se ha actualizado: borra la caché de efectos de dibujo y, a continuación, vuelve a cargar la página. También puede ser necesario actualizar la caché del navegador.
• Las animaciones no se ven: comprueba que la opción de animación correspondiente esté activada y verifica si el navegador o el dispositivo solicita una reducción del movimiento.