SERGIOIGLESIAS

Blog sobre Joomla

Overrides del plugin de cálculo de estimación de tiempo de lectura en Joomla

Hace poco te hablaba de un plugin que hace un cálculo estimado del tiempo de lectura de los artículos en Joomla! que desarrolló Cárlos Cámara.

Este plugin lo puedes ver en este mismo artículo justo antes de la imagen de cabecera del artículo.

En este artículo voy a enseñarte qué posibilidades tiene para ponerlo en tu web.

Instalación por defecto

Tan simple como instalar el plugin, configurarlo y habilitarlo.

De esta forma ya se mostrará en tus artículos en el formato estándar.

Configuración

configuracion plugin etr

En la configuración podrás realizar lo siguiente:

  • Excluir categorías: se pueden seleccionar las categorías en las que no quieres que se muestre.
    Yo, por ejemplo, lo tengo configurado para que solo se muestre en las categorías del Blog.
  • Usar estilo por defecto: te muestra la información del cáculo estimado con negrita.
    visualizacion defecto plugin etr
  • Estilo personalizado: tendrás que poner a "No" el campo anterior y añadir los estilos que quieras poner.
    Por ejemplo, si lo queremos en color rojo, habría que añadir el siguiente atributo CSS: color:red;
    estilo personalizado plugin etr
    visualizacion personalizada plugin etr
  • Ocultar salida: si lo ponemos a "Sí" se dejará de mostrar y aquí es donde entraría a actuar el override del plugin.

Override del plugin ETR

Para hacer uso del override de este plugin (o cualquier otro que nos permita hacerlo), tenemos que seguir los siguientes pasos:

  1. Crear una carpeta (o directorio) dentro de la carpeta "html" que tenemos en la plantilla definida en nuestro sitio web.
    Para este ejemplo estoy utilizando una instalación limpia de Joomla! y haciendo uso de la plantilla "protostar" que es la que viene por defecto. La ruta es la siguiente: "templates/protostar/html".
  2. Esta carpeta la tenemos que llamar como se llama la carpeta del plugin y añadirle plg_content, es decir, "plg_content_readingtime".
  3. Dentro de esta carpeta subir el fichero "default.php" que está dentro de la carpeta "tmpl" del plugin original.

Nota 1: el plugin se instala en "plugins/content/readingtime".

Nota 2: el proceso hay que realizarlo de forma manual, ya que de forma automática, en la configuración de plantillas de Joomla!, los plugin no vienen (cosa que sí ocurre para módulos y componentes).

Al final, en nuestra carpeta "html" de la plantilla, deberíamos tener lo siguiente:

override plugin etr

Editar y adaptar la vista del plugin

Ahora ya solo falta abrir el fichero con tu editor favorito (o directamente desde la administración de Joomla! > Extensiones > Plantillas > Plantillas > Pestaña Editor).

El código del plugin es muy sencillo, lo puedes ver a continuación.

codigo plugin etr

Vamos a cambiar la vista y lo vamos a poner para que se vea en un div de tipo "alert" de Bootstrap 2.3.2 (versión que utiliza esta plantilla).

codigo plugin etr override

Cómo puedes ver he cambiado la clase del div (en lugar de poner "reading-time" he puesto "alert alert-info") y he quitado los paréntesis.

El resultado es el siguiente:

visualizacion override plugin etr

Como puedes ver, ya tienes el "poder" para adaptar la vista de este plugin a las necesidades de tu diseño.

Pero...

No queda aquí la cosa.

También puedes utilizar las variables del plugin directamente dentro de tu template (Grande Carlos!!).

Uso de plugin ETR directamente en tu plantilla

El bueno de Cárlos nos ha dejado las siguientes variables para que utilicemos dentro de nuestra plantilla.

Concretamente dentro del override de la vista de artículo.

  • $this->item->readingtime->slowtime: muestra la estimación de tiempo más largo en la lectura del artículo.
  • $this->item->readingtime->quicktime: muestra la estimación de tiempo más corto en la lectura del artículo.
  • $this->item->readingtime->formattedtime: puedes jugar con el formato del tiempo.

Para hacer un override de un componente puedes ver el artículo que escribí sobre esto: Cómo hacer un Override de la vista artículo de Joomla!

Una vez tienes este override solo tendrás que jugar con estas variables para ponerlas a tu gusto.

Por ejemplo, vamos a poner el siguiente texto antes de que empiece el contenido del artículo:
"Tranquilo!! Solo vas a tardr X minutos en leer este artículo ;-)"

Para ello tienes que buscar en el código la línea en donde comienza el artículo (busca por $this->item->text) y lo encontrarás.

Una vez encontrado, solo hay que poner el siguiente código:

Tranquilo!! Solo vas a tardar item->readingtime->slowtime; ?> minutos en leer este artículo ;-)

codigo plugin plantilla etr

Una vez metido este código, guardamos el fichero y vemos el resultado:

visualizacion plantilla plugin etr

Como puedes ver hemos cambiado por completo la vista por defecto el plugin.

Incluso hemos añadido un icono con un reloj ;-)

Eso sí.

No se te olvide configurar el plugin con el campo "Ocultar salida" (ponerlo a "Sí").

Sino se verán los dos textos como en el ejemplo ;-).


Con este artículo espero haberte enseñado cómo utilizar los overrides de los plugin en tu plantilla Joomla!.

En este caso he utilizado el plugin ETR de Cárlos Cámara (al que le prometí escribir este post).

Puedes ver toda la documentación de este plugin en: Documentation: Estimated Reading Time

Suscríbete a mi newsletter

¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un Curso de desarrollo de plantillas Joomla.

No hay comentarios

Artículos relacionados

Solicita presupuesto

¿Quieres una página web que funcione?

Contacta conmigo y hablemos de tu proyecto.