Seleccione su idioma

Documentación de Ajax sobre la cartera de contenidos

Content Portfolio Ajax muestra los artículos de Joomla en forma de cuadrícula adaptativa de portfolio 

1. Requisitos

  • Joomla con el componente básico «Artículos» (com_content) activado.
  • Artículos publicados a los que el visitante actual tenga permiso para acceder.
  • Un directorio de caché de Joomla en el que se pueda escribir cuando esté activado el redimensionamiento de imágenes.
  • Joomla 4 o una versión posterior para la función «Cargar más» de AJAX.

2. Instalación

  1. En el panel de administración de Joomla, abre Sistema > Instalar > Extensiones.
  2. Sube mod_mx_contentportfolio.zipo instala el paquete utilizando su URL.
  3. Abre Extensiones > Módulos, busca «Content Portfolio Ajax» y crea o edita una instancia.
  4. Establece el estado del módulo en «Publicado» y selecciona una posición de plantilla.
  5. En «Asignación de menús», elige las páginas en las que debe aparecer el portafolio.
  6. Guarda el módulo y comprueba la página en la interfaz de usuario.

El módulo carga sus archivos CSS y JavaScript desde su propio assets . No elimines el assets, core, language, ni tmpl .

3. Inicio rápido

Para crear un portafolio básico:

  1. Crea o edita artículos de Joomla y publícalos. Añade una imagen de introducción en la pestaña «Imágenes y enlaces» de cada artículo si se requieren imágenes.
  2. En la pestaña «Fuente» del módulo, selecciona una o más categorías en «Seleccionar categoría».
  3. Establece el «Número de artículos» en la cantidad de elementos que se mostrarán inicialmente.
  4. En «Configuración», elige un estilo visual y establece el número de elementos por vista.
  5. Deja activadas las opciones «Mostrar imágenes», «Mostrar título», «Mostrar descripción» y «Mostrar “Leer más”», a menos que el diseño requiera lo contrario.
  6. Publica el módulo y comprueba que los artículos seleccionados sean visibles.

Si no se selecciona ninguna categoría, el módulo puede utilizar todos los artículos que cumplan los requisitos. Se recomienda seleccionar categorías para obtener un resultado predecible.

4. Configuración de la fuente

Artículos

  • La opción «Seleccionar categoría» limita los artículos de origen a las categorías seleccionadas.
  • «Artículos de categorías secundarias» incluye o excluye los artículos de las categorías secundarias.
  • «Niveles» establece la profundidad máxima de las subcategorías.
  • «Etiquetas» limita los artículos de origen a las etiquetas de Joomla seleccionadas.
  • «Artículos destacados» muestra los artículos destacados, los oculta o muestra únicamente los artículos destacados.
  • «Orden de los artículos» y «Dirección de ordenación» controlan el orden de la consulta, incluyendo título, ID, fechas, visitas, orden del administrador y orden aleatorio.
  • «Recuento de artículos» establece el número de artículos cargados por solicitud.
  • «Destino del enlace» abre los enlaces en la misma ventana, en una nueva ventana o pestaña, o en una ventana emergente.
  • «Activación de eventos de contenido» habilita los eventos del complemento de contenido de Joomla para los artículos mostrados.

Texto y metadatos

  • Mostrar u ocultar el título y establecer su número máximo de caracteres.
  • Mostrar u ocultar etiquetas, elegir el número de etiquetas y colocarlas encima o debajo de la descripción.
  • Mostrar u ocultar la descripción y establecer su número máximo de caracteres.
  • Mostrar u ocultar el título de la categoría, el autor, la fecha y el enlace «Leer más».
  • Establece prefijos opcionales para la categoría y el autor, el formato de la fecha y la etiqueta «Leer más».

La descripción se extrae del texto introductorio del artículo. Los límites de caracteres positivos truncan el texto; los controles de visualización ocultan el contenido por completo.

5. Ajustes de imágenes

Activa la opción «Mostrar imágenes» para los estilos seleccionados. El módulo busca las imágenes en el orden especificado en «Orden de las imágenes».

  • image_intro: la imagen de introducción del artículo.
  • image_fulltext: la imagen del texto completo del artículo.
  • inline_introtext: una imagen que aparece en el texto de introducción.
  • inline_fulltext: una imagen que aparece en el texto completo.
  • external: una imagen referenciada externamente, cuando sea compatible.

Ejemplo de orden de las imágenes:

image_intro, image_fulltext, inline_introtext, inline_fulltext

Si no se encuentra ninguna imagen, el marcador de posición predeterminado es modules/mod_mx_contentportfolio/assets/images/noimage.jpg.

Cuando el redimensionamiento está habilitado, configura la función de redimensionamiento, el tipo de salida, la calidad, la transparencia, el ancho y la altura. El directorio de caché de Joomla debe ser de escritura para que las imágenes generadas puedan almacenarse y reutilizarse.

6. Diseño y apariencia

  • Estilo: elige entre el Estilo 1 y el Estilo 6, o «Aleatorio».
  • Elementos por vista: elige de 1 a 6 columnas.
  • Usar tamaños de elemento personalizados: activa el patrón de tamaño del primer elemento.
  • Patrón de tamaño del primer elemento: valores separados por comas, como double, normal, double-height, normal, normal, double-width.
  • Ancho completo: amplía el módulo hasta el ancho de la ventana gráfica.
  • Alineación de los filtros: coloca los filtros a la derecha, en el centro o a la izquierda.
  • Cargar Bootstrap y Cargar jQuery: actívalos solo si la plantilla aún no los incluye.
  • CSS personalizado: añade CSS específico para esta instancia del módulo.

double ocupa dos columnas y dos filas, double-width ocupa dos columnas y double-height ocupa dos filas. Los valores no válidos o que faltan se tratan como normal.

7. Filtros

Activa «Filtros de categorías» y/o «Filtros de etiquetas» para mostrar enlaces de filtro encima de la cuadrícula. Los filtros de categorías utilizan la lista de artículos del módulo; cuando se activan los filtros de etiquetas con categorías seleccionadas, los enlaces de etiquetas incluyen todas las etiquetas de los artículos publicados de esas categorías, incluidas las etiquetas de los artículos que superan el tamaño de la página inicial.

  • Las etiquetas de filtro muestran las etiquetas de categoría o de etiqueta.
  • La etiqueta «Mostrar todo» añade el enlace configurado mediante el texto «Todo».
  • El «Modo de filtro» controla cuántos enlaces de filtro puede seleccionar un visitante:
  • - «Único»: al seleccionar un filtro se borra la selección anterior. Utiliza esta opción cuando los visitantes deban navegar por una categoría o etiqueta cada vez.
  • - «Múltiple»: los visitantes pueden seleccionar varios filtros de categoría y/o etiqueta. Los filtros seleccionados aparecen resaltados y se pueden activar o desactivar.
  • La lógica de filtros múltiples solo se utiliza cuando el «Modo de filtro» está configurado en «Múltiple». Controla cómo se combinan los filtros seleccionados:
  • - «O»: muestra un artículo cuando coincide con al menos un filtro seleccionado.
  • - «Y»: muestra un artículo solo cuando cumple todos los filtros seleccionados.
  • El orden de los filtros de etiquetas clasifica las etiquetas según el orden del backend de Joomla o por título.

Ejemplos de modo de filtrado

Artículo Categoría Etiquetas
A Proyectos Destacados, Web
B Proyectos Destacados
C Noticias Web
D Noticias Destacados

En el modo «Único», al seleccionar un filtro se borra la selección anterior. En el modo «Múltiple» con lógica «O», un artículo debe cumplir al menos uno de los filtros seleccionados. Con la lógica «Y», debe cumplir todos los filtros seleccionados. El enlace «Todo» borra los filtros activos y muestra todos los artículos del resultado original.

8. Cargar más

En la configuración, activa «Mostrar Cargar más» y establece el «Número de artículos» en el tamaño de la página. El botón solicita el siguiente lote sin recargar la página completa y desaparece cuando no hay más artículos coincidentes disponibles.

Configuración de estilo

Estilo

Selecciona la presentación del portafolio:

  • Random: selecciona aleatoriamente uno de los estilos disponibles.
  • Style 1 a través de Style 6: utiliza un estilo de portafolio específico.

Por defecto: Style 2.

Elementos por fila

Establece el número de elementos del portafolio que se muestran en cada fila. Los valores disponibles son 1 hasta 6.

Valor por defecto: 3.

Usar tamaño de elementos personalizado

Habilita los tamaños personalizados de los elementos en la cuadrícula de la cartera.

  • Yes: aplica el patrón de tamaño de elementos configurado.
  • No: utiliza el tamaño normal de los elementos para todos los elementos.

Por defecto: Yes.

Tamaños de los elementos

Visible cuando Use Custom items size está activado. Introduce un patrón separado por comas para los tamaños de los elementos. Los valores admitidos son:

  • normal: una columna y una fila.
  • double: dos columnas y dos filas.
  • double-width: dos columnas y una fila.
  • double-height: una columna y dos filas.

Ejemplo:

double,normal,double-height,normal,normal,double-width

El patrón se aplica en orden y se repite para los elementos posteriores que se cargan con «Cargar más». double-width y double-height están pensadas para el Estilo 6. El patrón predeterminado contiene 16 entradas.

Configuración de «Cargar más»

Mostrar «Cargar más»

Determina si el botón «Cargar más» está disponible.

  • Yes: permite a los visitantes solicitar más artículos.
  • No: muestra solo el conjunto de resultados inicial.

Por defecto: Yes.

La función «Cargar más» requiere Joomla 4 o una versión posterior y un recuento de artículos positivo en la configuración de la fuente.

Texto de «Cargar más»

Visible cuando Show Load More está activada. Establece el texto que se muestra en el botón.

Por defecto: Load More.

Efecto de «Cargar más»

Visible cuando Show Load More está activado. Selecciona la animación de entrada de los elementos cargados mediante el botón:

  • Appear In
  • Simple Fade
  • Fade In Up
  • Fade In Down
  • Zoom In
  • Bounce In
  • Flip In
  • Light Speed In Left
  • Rotate In Down Left
  • Jack in box
  • None

Diseño a ancho completo

Ancho completo

Controla el ancho del módulo:

  • Yes: muestra el portafolio a todo el ancho de la ventana de visualización, independientemente del contenedor de la plantilla.
  • No: utiliza el ancho proporcionado por el diseño de la plantilla.

Por defecto: No.

Configuración del filtro

Posición del filtro

Establece la posición horizontal de los filtros de categorías y etiquetas:

  • Right
  • Center
  • Left

Por defecto: Right.

Mostrar etiquetas de filtro

Controla el texto descriptivo que se muestra antes de los controles de filtro.

  • Yes: muestra las etiquetas de los filtros de categorías y etiquetas.
  • No: oculta esas etiquetas.

Por defecto: Yes.

Filtros de categoría

Controla si se muestran los enlaces de los filtros de categoría.

  • Yes: muestra los filtros para las categorías representadas por los resultados de artículos del módulo.
  • No: ocultar los filtros de categorías.

Por defecto: Yes.

Texto «Filtrar por categoría»

Visible cuando se cumplen ambas condiciones Category filters y Show filter labels están activados. Establece la etiqueta que se muestra para los filtros de categoría.

Por defecto: Filter by category.

Filtros de etiquetas

Controla si se muestran los enlaces de los filtros de etiquetas.

  • Yes: muestra los filtros para las etiquetas representadas en los resultados de artículos del módulo.
  • No: ocultar los filtros de etiquetas.

Por defecto: No.

Texto «Filtrar por etiquetas»

Visible cuando se cumplen ambas condiciones Tag filters y Show filter labels están activadas. Establece la etiqueta que se muestra para los filtros de etiquetas.

Valor predeterminado: Filter by tags.

Orden de los filtros de etiquetas

Visible cuando Tag filters está activado. Ordena los enlaces del filtro de etiquetas según:

  • Backend Order: el orden configurado en Joomla.
  • Title: orden alfabético por título.

Por defecto: Backend Order.

Dirección de ordenación del filtro de etiquetas

Visible cuando Tag filters está activado. Establece la dirección de ordenación de las etiquetas:

  • Ascending
  • Descending

Por defecto: Ascending.

Botón «Mostrar todo»

Controla si se muestra un enlace para borrar los filtros activos.

  • Yes: muestra el enlace «Todo».
  • No: ocultar el enlace «Todo».

Por defecto: Yes.

Selección de filtros

Controla cómo los visitantes seleccionan los filtros:

  • One filter at a time: al seleccionar otro filtro, se sustituye la selección actual.
  • Multiple filters: los visitantes pueden seleccionar varios filtros a la vez.

Por defecto: One filter at a time.

Coincidencia de varios filtros

Visible cuando Filter selection está configurado en Multiple filters. Controla cómo se combinan los filtros seleccionados:

  • All selected tags (AND): un artículo debe cumplir todos los filtros seleccionados.
  • Any selected tag (OR): un artículo debe cumplir al menos uno de los filtros seleccionados.

Por defecto: Any selected tag (OR).

Texto del botón «Todo»

Establece el texto del enlace que borra los filtros activos y vuelve al conjunto completo de resultados.

Por defecto: All.

9. Solución de problemas

No aparecen artículos

  • Comprueba que los artículos estén publicados y sean accesibles.
  • Comprueba las categorías, las etiquetas, el estado de destacado, el idioma y la asignación al menú.
  • Comprueba que el módulo esté publicado en una posición que se muestre en la plantilla activa.

Faltan imágenes

  • Añade una imagen de introducción o de texto completo al artículo.
  • Activa la fuente de imagen correspondiente e inclúyela en el orden de imágenes.
  • Comprueba la ruta del marcador de posición y los permisos del directorio de caché.

Los filtros no muestran las opciones esperadas

Los filtros se crean a partir de los resultados de los artículos del módulo, no de todas las categorías o etiquetas de Joomla. Amplía la selección de fuentes y comprueba que los artículos relevantes estén publicados.

La opción «Cargar más» no es visible

Comprueba que se utilice Joomla 4 o una versión más reciente, que la opción «Cargar más» esté visible, que el recuento de artículos sea positivo y que haya suficientes resultados iniciales.

Se producen conflictos de estilo o de JavaScript

Desactiva «Cargar jQuery» o «Cargar Bootstrap» si la plantilla ya carga esas bibliotecas. Vacía las cachés de Joomla y del navegador.

10. Actualización

Haz una copia de seguridad de la configuración del módulo y de los archivos del sitio antes de actualizar. Instala el archivo ZIP más reciente a través del instalador de extensiones de Joomla. El módulo indica un servidor de actualizaciones, por lo que Joomla también puede ofrecer actualizaciones cuando se pueda acceder al servidor.

Artículos relacionados

Suscríbase a nuestro boletín

Manténgase al día con ventas, promociones, actualizaciones de productos y lanzamientos de nuevos productos.