Mucho hemos hablado en la magazine, tanto en la edición en español como en la edición en Inglés de los overrides, se han dado ejemplos y se han escrito artículos con el paso a paso, ¿Pero es realmente un override lo que necesitas?

Un override por ejemplo al com_content te afecta al componente completo, pero ¿qué tal si lo que tu andas buscando no es afectar al componente completo y solo a una parte de tu sitio o del sitio de tu cliente?

Pensemos por un momento en un sitio comercial, que tenga solo 3 productos, pero que incluya un blog, ¿Deben los contenidos del blog ser iguales a los contenidos que redactemos para los productos del sitio?, es en ese momento en que encontramos una solución en Joomla! no muy frecuente, pero bastante útil y que no consiste en hacer un override, sino que solamente crear un nuevo layout al estilo del contenido que estemos redactando.

Para ejemplo, pensé en un sitio base realizado con Joomla! 3.3, instalado sin datos de ejemplos, para de esa forma tener una visión más limpia del contenido y de la forma como por defecto Joomla! se encarga de mostrar el contenido a la primera instalación.

Una vez realizada la instalación básica de Joomla! y habiendo redactado mi primer contenido, sin haber agregado texto, sino que solo título, nos encontramos con la siguiente realidad:

La imagen nos indica que por defecto Joomla! agrega los datos del autor del artículo, , la categoría en la que se encuentra publicado, la fecha de publicación y el icono con la alternativa de imprimir y enviar por email.

Ahora bien, si hacemos unos pequeños cambios, como ocultar el módulo login y mover el con módulo con el menú de la derecha a la posición “position-1” del template Protostar y le agregamos la clase “nav-pills” a dicho módulo, el resultado sería el siguiente:

Luego, agregamos el contenido a nuestro artículo, siempre pensando en que será un texto cuyo contenido va a describir un producto y no a un artículo cuyo contenido sea para blog, nos encontramos con lo siguiente:

Finalmente agregaremos una imagen a nuestro artículo, lo haremos a través de la pestaña “Imágenes y Enlaces” de nuestro editor de artículos y el resultado final, ya con nuestro artículo terminado, será el siguiente:

Como podrás observar, el resultado no es el más óptimo pensando en que queremos destacar un producto y no un artículo de un blog. Pero sin embargo si vamos a querer tener un blog y también necesitaremos, que los datos que aquí sobran, sean visibles en nuestro blog, por lo tanto, si el sitio lo vamos a mantener nosotros, podemos usar los parámetros de Joomla! sin ningún problema y nos sentiremos como pez en el agua por la administración, pero siempre debemos pensar que el usuario final, también conocido como su majestad, el cliente, que no tiene los conocimientos para manejar todos los parámetros necesarios, por lo que es imperioso que nosotros le facilitemos el trabajo. En ese caso nace la necesidad de contar con un layout al contenido, que nos transforme el contenido solo en los casos en los que se indica sin alterar el resto de los contenidos de nuestro sitio. ¿Comprendes ahora la diferencia entre Layout y Override?

Vamos a ver una personalización más definida de nuestro contenido para que vayas notando la diferencia entre el antes y el después.

Primeros Pasos

Lo primero será ir a nuestro template, en mi caso Protostar y crear dentro de la carpeta html del template una carpeta llamada “com_content” y dentro de esa carpeta com_content crearemos una nueva carpeta llamada “article”. Posteriormente navegamos hacia la raíz de nuestro sitio web y buscamos dentro de “components” el “com_content”, dentro encontraremos la carpeta “views”, dentro de ella la carpeta “article” y dentro de ella la carpeta “tmpl”, es ahí, en esa carpeta en donde debemos copiar el fichero default.php y pegarlo en la carpeta article que habíamos creado anteriormente. En resumen sería entrar a:

root/component/com_content/article/tmpl/default.php y lo copiamos a

root/templates/tu_template/com_content/article/ y pegamos el fichero default.php

Una vez realizado ese paso, el fichero que acabamos de pegar lo podemos renombrar a nuestro gusto, en el caso de este ejemplo, le cambié el nombre a producto.php

Comienza la edición

Con las modificaciones realizadas al principio, ya sabemos que no habrá ningún módulo visible ni a la izquierda ni a la derecha, por lo tanto sabemos que contamos con las 12 columnas que nos da por defecto Bootstrap. El objetivo entonces será enmascarar nuestro contenido en 12 columnas, anidando dentro 2 columnas, una de 8 y una de 4, en la de 8 irá la imagen de nuestro contenido, en la de 4 (no 8) el texto de introducción con un botón de acción y luego, antes de cerrar las 12 columnas, el texto completo.

Como ya tenemos nuestro fichero producto.php instalado en la carpeta que corresponde, vamos a proceder a editarlo en nuestro editor de texto favorito y eliminaremos todo lo que venga luego de la expresión ?> del fichero… Debería quedar así:

Parámetros y PHP necesarios para completar nuestro layout

Los parámetros que necesitaremos son:

• title: Título de nuestro artículo.
• image_fulltext: Imagen de nuestro artículo.
• introtext: Texto de introducción, el que va antes de “leer más”.
• fulltext: Texto del artículo, el que va después de “leer más”.

Con esos parámetros en mente y pensando en que usaremos solamente la expresión “php echo” para llamar a cada uno de ellos, podemos armar la parte html de nuestro layout.

Construyendo el html

Como señalé anteriormente, nos centraremos en las 12 columnas y anidaremos 2 columnas dentro para separar imagen y texto. El código a usar sería el siguiente:

<div class=”row-fluid”>
  Aquí irá el título de nuestro producto
    <div class=”span12”>
        <div class=”row-fluid”>
            <div class=”span8”>
              Aquí irá la imagen de nuestro producto
            </div>
            <div class=”span4”>
             Aquí irá el texto de introducción de nuestro producto
            </div>
        </div>
    </div>
 Aquí irá el texto completo de nuestro producto
</div>

El resultado en tu editor de texto debería verse así:

Insertando las etiquetas PHP

Como ya tenemos la distribución de nuestro layout, ahora solo debemos reemplazar el texto de ejemplo con las llamadas a los parámetros, entonces insertaremos la llamadas reemplazando los textos de guía que habíamos puesto.

Las llamadas a los parámetros ya fueron señaladas anteriormente y el código PHP necesario para ejecutarlas es “php echo”. Si observamos con detención el código original, entonces veremos que las modificaciones que debemos hacer son las siguientes:

Donde dice:

“Aquí irá el título de nuestro producto”

Lo reemplazamos con:

<div class="page-header">
<h1><?php echo $this->item->title; ?></h1>
</div>

Donde dice:

“Aquí irá la imagen de nuestro producto”

Lo reemplazamos con:

<div class="text-center item-image">
<img src="/<?php echo htmlspecialchars($images->image_fulltext); ?>">
</div>

Donde dice:

“Aquí irá el texto de introducción de nuestro producto”

Lo reemplazamos con:

<?php echo $this->item->introtext; ?>

Donde dice:

“Aquí irá el texto completo de nuestro producto”

Lo reemplazamos con:

<?php echo $this->item->fulltext; ?>

El resultado final de nuestro código entonces debiera ser el que muestra la siguiente imagen:

Simplemente guardamos nuestro producto.php y cerramos nuestro editor de código favorito. Ahora pasamos al editor de texto de Joomla!.

Creando el contenido:

Si ahora desde el editor de texto en el gestor de artículos de Joomla! creas un artículo como se indica en la siguiente imagen:

Luego agregamos una imagen al texto completo de nuestro artículo, desde la pestaña imágenes y enlaces:

Y finalmente nos movemos a la pestaña “opciones”, al final de la misma verás que tienes la alternativa de seleccionar el layout para tu artículo y si despliegas las opciones, verás que nuestro producto.php ya aparece como una opción adicional de layout:

Guardas los cambios del artículo, cierras el gestor de artículos y cargas tu artículo en la vista pública de tu sitio y verás la diferencia de inmediato:

Como verás, tenemos el título de nuestro producto, la imagen respectiva, nos muestra el texto de introducción y el texto completo en diferentes “span” de acuerdo a lo que nosotros señalamos en el fichero producto.php

Opcional: Para el caso del ejemplo usé un llamado a la imagen del artículo completo, pero en la pestaña “imágenes y enlaces” tenemos 2 opciones de imágenes, una para el texto de introducción y otra para el artículo completo, en caso que quieras usar esa imagen, la del texto de introducción o ambas, basta que cambies o agregues el llamado a la imagen:

Donde dice:

<div class="text-center item-image">
<img src="/<?php echo htmlspecialchars($images->image_fulltext); ?>">
</div>

Cambias o agregas además:

<div class="text-center item-image">
<img src="/<?php echo htmlspecialchars($images->image_intro); ?>">
</div>

¡Bonus! Agregando un llamado al producto directo desde un item de menú

Roberto Segura sugirió que además de tener un layout para el artículo, pensando en hacerle la vida más fácil al cliente, le añadiéramos un enlace directo desde el tipo de menú, es un proceso simple, pero muy útil y para hacerlo nos propone los siguientes pasos:

Lo primero que debes hacer es ir a la ruta original:

root/component/com_content/article/tmpl/default.xml y copiamos el default.xml

Luego vamos a la ruta donde creamos el contenido.php:

root/templates/tu_template/com_content/article/ y pegamos el fichero default.xml y lo renombramos por producto.xml

Luego, abrimos el fichero producto.xml con nuestro editor de código favorito y ponemos la atención dentro de las etiquetas “layout” entre las líneas 3 y 10 del fichero y editamos las siguientes cadenas de texto:

Donde dice:

layout title="com_content_article_view_default_title”

Lo reemplazamos con:

layout title="Producto"

Donde dice:

<![CDATA[com_content_article_view_default_desc]]>

Lo reemplazamos con:

<![CDATA[Vista de un producto]]>

Guardamos los cambios realizados a nuestro producto.xml y luego, cuando crees un nuevo item de menú y tengas las opciones al tipo de contenido, dentro de los artículos, verás que tu cliente ahora tiene un muy fácil de entender llamado a una “Vista de un Producto”.

Lo que hicimos en este caso, que hemos creado para la vista de un producto simple, lo podemos repetir para la vista de categoría o de blog. Así tendríamos un layout personalizado para mostrar nuestros productos.

Importante: Ahora bien, este “bonus” implica que ya no aparecerá la vista en las opciones del artículo, sino que lo harás directo desde el ítem de menú.

Diferentes visiones

Para escribir este artículo, sostuve algunas conversaciones con amigos relacionados con el desarrollo en Joomla!, específicamente con Javier Gómez, Roberto Segura y Tito Alvarez. Cada uno de ellos con una visión distinta al respecto, pero todos coincidiendo en lo mismo. Si el sitio lo estás desarrollando tu mismo y lo gestionarás tu mismo o tu cliente, entonces no es necesario hacer uso de los IF de PHP y podemos limpiar el código tanto como podamos, pero si nuestro desarrollo será usado por más de un cliente, en ese caso te verás en la obligación de mantener la mayor parte o la totalidad de los IF puesto que deberán ajustarse no sólo a las necesidades de uno, sino que de varios clientes.

Ahora que ya conoces la utilidad y el uso de los layouts para el contenido de Joomla!, podrás gestionar tus propias vistas a los artículos o contenidos de tu sitio web, sin necesidad de meter mano a los parámetros de los artículos o de los items de menú, sino que creando tus propias salidas de contenido que se adapten a las necesidades de tu sitio.