barra azul

cabecera reducida 1 sin fondo

BLOG - Joomla!

Hilo de Ariadna

btcsEn este artículo trabajaremos con una extensión “Content Slider” o “Article Slider” para mostrar una lista de artículos de un contenido SEBLOD.
Si quieres, o necesitas, un carrusel para mostrar contenido SEBLOD puedes hacerlo usando uno para “artículos estándar Joomla” y con las técnicas que te voy a enseñar.
Nada hay más bonito que un carrusel para dar movimiento a la página.
En esta ocasión utilizaremos la extensión “BT Content Slider”, fantástica, y que además es gratuita y responsive.

 

En este artículo no vamos a explicar cómo se construye un formulario o una aplicación SEBLOD. Eso ya lo hemos visto en las series anteriores con el formulario y la galería de imágenes. Si me has seguido en los artículos anteriores mereces algo más avanzado y diferente de lo que encontrarás sobre SEBLOD, por variar.


Lo que vamos a hacer es ver que necesitamos incluir en el diseño de un contenido SEBLOD para poder utilizar  ”visualizadores de contenido” o “visualizadores de artículos” Joomla.

Este tipo de extensiones pueden mostrar listas de artículos de diferentes formas: sliders, carrusel, carpetas o pestañas, etc., utilizando como origen de datos una categoría, la condición de destacados o una lista concreta de artículos.

La primera extensión elegida es “BT Content Slider”. Es fantástica y es responsive o adaptable, algo imprescindible al día de hoy.  
Me gusta mucho, y espero que también a vosotros porque eso es para lo que sirve: gustar a tus visitantes.

Ya hemos aprendido a hacer listas personalizadas, que en formato blog nos permiten presentar un resultado estético a nuestro criterio. Ahora vamos a utilizar un elemento que mejora mucho la estética al incluir movimiento en nuestra página.

 

BT Content Slider


Para conseguir la extensión debemos registrarnos en el sitio. Permite utilizar una cuenta de red social para mayor comodidad. El registro es automático y la descarga gratuita.

El fichero descargado es, como es de esperar, un fichero comprimido con la indicación “descomprime primero” ya que contiene dos archivos: la extensión y un manual de usuario. Me gusta mucho el detalle de incluir el manual.

Por último hay que instalar la extensión, que consta de un módulo y que permite configurar todos los sliders que necesites duplicando o creando módulos nuevos de este tipo.

El módulo permite utilizar como origen de datos artículos de diferentes tipos, pero SEBLOD no está entre ellos.

Para que el módulo funcione necesitamos configurar como origen “artículos Joomla”,  y adaptar el contenido.

 

Adaptar el formulario


La extensión permite utilizar diferentes campos:

  • Título
  • Imagen de introducción
  • Subtítulo de la imagen (caption)
  • Enlace alternativo al artículo (enlace A)
  • Fecha de creación
  • Autor
  • Texto de introducción

No es necesario usarlos y tenerlos todos, con el título, la imagen y posiblemente todo o parte del texto de introducción crearemos un bello carrusel.

Estos tres campos son los que he utilizado para el vídeo.

El formulario debe utilizar los mismos campos que el formulario de creación del tipo de contenido “artículo” de SEBLOD.

Hemos comentado con anterioridad que una ventaja indiscutible de SEBLOD frente al resto de CCKs existentes es que puede utilizar la base de datos “#_content” (que es la de los artículos nativos Joomla) y puede utilizar los mismos campos permitiendo que muchas de las extensiones que son para “artículos Joomla” funcionen con SEBLOD, y en esta ocasión vamos a comprobarlo.

Si la extensión quiere tres campos Joomla vamos a dárselos, que no se diga…

No utilizaremos campos nuevos, sino los de artículo Joomla. Los campos serán:

  • Article Title “art_title”
  • Article Image Intro  “art_image_intro”
  • Article Introtext “art_introtext”

Con esto es suficiente, puedes añadir el subtítulo de la imagen y el enlace si lo deseas (“Article Image Intro Caption” y “Article UrlA”). El resto del contenido puede tener los campos que quieras.

 

Veámoslo en el vídeo:

 

Arreglando el texto de introducción



La extensión no funciona mal. Cualquier otra similar tendrá el mismo “problema”.

SEBLOD añade un marcado propio en el texto de introducción (y en el completo) que le sirve para distinguir entre los artículos creados con el formulario nativo y los suyos. Este marcado es necesario y no se debe eliminar del artículo.

Un texto de introducción que fuese “texto de introducción del artículo” guardado por Joomla tendría como valor la misma cadena “texto de introducción del artículo”.

Un texto de introducción que fuese “texto de introducción del artículo” guardado por SEBLOD tendría como valor otra cadena, tipo “::cck::104::/cck::
::introtext::texto de introducción del artículo ::/introtext::”.

Necesitamos quitar ese marcado, necesario, pero que la mayoría de los sebloders llaman “garbage” (cuando les pasan estas cosas) para poder usarlo.

Afortunadamente JavaScript es perfecto para hacer el trabajo. Sólo necesitamos manipular la cadena de texto en visualización, no nos afecta cómo esté guardado en la base de datos. Sólo vamos a manipular el texto que aparecerá en el texto de introducción justo antes de mostrarlo tras descargar la página.

He creado un script para limpiar el texto

Básicamente lo que hace es:

  • Comprueba si hay algún texto de introducción de BT Content Slider, si no la hay se termina el script. De este modo si en la página no hay slider no hace nada y así puedes poner el script donde quieras, y que se ejecute en todas las páginas si es así como lo pones. Si hay algún elemento de ese tipo continúa el script.
  • Crea una variable que llamo “matrizBtIntrotext” en la que cargo todos los valores de todos los elementos del mismo tipo que tenga la página. Habrá tantos elementos como artículos cargue el módulo según tu configuración en el mismo. Si pones 12 artículos habrá 12. El elemento del DOM lo referencio por su clase “bt-introtext”. Todos los elementos que contiene una página pertenecen al DOM (Document Objet Model) y pueden ser referenciados por su “id” o por su clase, como hago en este caso.
  • Después comienza un bucle que se ejecutará tantas veces como elementos haya para corregir el texto.
  • Creo una variable “textoInicial” y le asigno el valor de texto del elemento que toca en el turno del bucle.
  • Otra variable “calcularCorte” almacena en que posición está la “i” de la cadena “introtext::”. Utilizo esta parte porque es el final de la primera parte de la “basura” y así da igual los caracteres que ocupen el identificador cck (da igual ::cck::104::/cck:: que ::cck::104576457476464::/cck::).
  • Creo la variable “textoFinal” y le asigno el valor del corte de la cadena de texto “textoInicial” desde la posición “calcularCorte” + 11 hasta el final. 11 son los caracteres de la cadena “introtext::”
  • Y ahora que tengo el texto limpio necesito asignárselo a la matriz ““matrizBtIntrotext”” de vuelta, que es lo que realmente cambia el texto en la página.

 

El script sería el siguiente:

if((".bt-introtext").length) {
  var textoInicial;
  var matrizBtIntrotext= document.querySelectorAll('.bt-introtext');
  for (var i = 0 ; i < matrizBtIntrotext.length ; i++) {
    textoInicial = matrizBtIntrotext[i].textContent;
    var calcularCorte = textoInicial.indexOf('introtext::');
    var textoFinal = textoInicial.slice(calcularCorte + 11);
    matrizBtIntrotext[i].textContent = textoFinal;
  }
}
Es importante tener en cuenta que el texto de introducción que nos mostrará el carrusel tendrá el largo que configuremos en el módulo. La salvedad es que el propio texto tenga menos caracteres o palabras que lo que hayamos configurado. En ese caso el script no limpiaría el marcado final.

Un ejemplo: Si mi texto fuese “hola” y el límite 100 caracteres, tras ejecutar el script tendrías: “hola::/introtext::” porque no lo corta el limite configurado en el módulo, y el script tampoco porque solo corta el marcado del comienzo.

Se puede corregir pero hay una decisión que tomar. Entre las pemutaciones posibles en función de la combinación de limite en el módulo y largo de cadena se puede dar que el final sea: “:”, “::”,”::/”, y así carácter por carácter hasta “::/introtext::”.

Se puede buscar una cadena, ¿pero cuál?. Depende de tu criterio.

Si usas “:” y alguien utiliza “:” en el texto será donde corte.

Es más raro que alguien los use dos veces, ¿verdad?. De nuevo, si alguien usa en título “::” se cortará por ahí.

Se puede modificar el script y añadir que compruebe si textoFinal tiene “::” y si es así calcular el corte y cortar el trozo.

 

En el próximo artículo lo haremos para otro slider y pondremos la respuesta. Mientras, te invito a que lo escribas y lo publiques en los comentarios del artículo. Puede hacerse más corto, mejor explicado, como quieras y totalmente a tu criterio.

  Mi perfil de Google Plus

 

Escribir un comentario

Sé respetuoso con tod@s. Tenemos derecho a expresar nuestras opiniones y los demás pueden opinar igual o de forma contraria, siempre con el respeto que nos gusta que nos dispensen.
Tu comentario debe estar relaccionado con el tema. Si deseas comentar algo distinto puedes ponerte en contacto con nosotros a través de la opción de "Contactar" del menú principal. Muchas gracias.

Puedes conectarte utilizado tu cuenta en:

       


Si te gusta, puedes compartirlo en:

Compartir en FacebookCompartir en Google PlusCompartir en TwitterCompartir en LinkedIn