Cómo crear una plantilla front-end para Joomla! desde cero (parte 5): agregando un video en el index.php

Escrito por | 01 Mayo 2015 | Publicado en Mayo 2015
Cuántas veces hemos tenido la necesidad de buscar, descargar, instalar y configurar extensiones que se adapten a los requerimientos de un proyecto basado en Joomla!. Es cierto que en el Directorio de Extensiones de Joomla! (JED) podemos encontrar miles de componentes, módulos y plugins que nos brindan la solución a nuestros problemas. Pero también es cierto que mientras menos extensiones de terceros instalemos en nuestro sitio, menos dolores de cabeza tendremos al momento de realizar los ajustes y reajustes necesarios para su correcto funcionamiento. Una de las ventajas de crear nuestras propias plantillas desde cero es la posibilidad de tener el control total de todo lo que se muestra en el front-end. En esta oportunidad veremos cómo aprovechar esta ventaja.

Antes de empezar

Utilizaremos nuestra plantilla que creamos siguiendo los procedimientos indicados en la serie de tutoriales "Cómo crear una plantilla front-end para Joomla! desde cero" (parte 1, parte 2, parte 3 y parte 4).

La información de nuestra plantilla se encuentra en el archivo templateDetails.xml:

figura-01

La plantilla propiamente dicha, index.php:

figura-02

La hoja de estilos, main.css:

figura-03

El problema

Necesitamos agregar un video de YouTube que se muestre únicamente en la página principal que, en este caso, corresponde al elemento de menú Inicio.

figura-04

La solución estándar

Colocar un video de YouTube es relativamente sencillo de hacer. Podríamos crear un módulo HTML personalizado donde escribiríamos el código que nos brinda YouTube para insertar el video y configurarlo para que se muestre en la página deseada y en una posición específica. Y quizás también tendríamos que agregar alguna nueva posición a nuestro archivo templateDetails.xml. Fácil, ¿no?

Sin embargo, muchas veces el editor de código de Joomla! no nos permite escribir la etiqueta <iframe> que utiliza el código de YouTube así que además tendríamos que configurar el editor u optar por instalar otro.

Como alternativa podríamos buscar una extensión en el JED que inserte el video de una manera más automática. Sin embargo, es probable que dicha extensión "ensucie" el código fuente del index.php debido a que, con frecuencia, algunas extensiones agregan código JavaScript dentro de etiquetas <script> en el <body> y el código fuente de la plantilla se ve muy sobrecargado.

La solución no estándar (pero muy eficaz)

Podemos solucionar el problema propuesto directamente desde el archivo index.php de nuestra plantilla. Es menester indicar que utilizaremos algunas nociones básicas de PHP (declaración de variables y sentencias condicionales). Así que, ¡manos a la obra!

En primer lugar necesitamos conocer en cuál página se encuentra el visitante a nuestro sitio, es decir, cuál es el menú activo. Afortunadamente, Joomla! nos brinda las variables PHP donde se almacena dicha información.

En la primera línea del archivo index.php tenemos el siguiente código PHP:

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

Debemos agregar dos variables más:

<?php
    defined( '_JEXEC' ) or die( 'Restricted access' );
    $app = JFactory::getApplication(); // almacena todos los datos del sitio
    $menu = $app->getMenu(); // almacena los ID de cada menú de nuestro sitio
?>

Como referencia, los ID de cada menú se muestran en la lista "Elementos de menú" del panel de administración (back-end). Por ejemplo, el ID del menú Inicio es 101 (por defecto) y el ID del menú Contacto es 104.

figura-05

Para efectos prácticos, se ha elegido el video "Joomla! 3.4 - New features! (animation)" publicado en el canal de Joomla! en YouTube. Para colocar el video de YouTube entre el <header> y el <section class="main"> escribimos:

<section class="youtube">
     <iframe width="1280" height="720" src="https://www.youtube.com/embed/EfsOibCaQ-k?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>

Si lo dejamos así, el video se mostrará en todas las páginas de nuestro sitio. Para mostrarlo únicamente en la página principal tenemos dos opciones.

En el caso de que el menú Inicio corresponde (por defecto) a la página principal del sitio.

<?php if ($menu->getActive()->id == 101) { ?>
<section class="youtube">
     <iframe width="1280" height="720" src="https://www.youtube.com/embed/EfsOibCaQ-k?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>
<?php } ?>

La variable $menu->getActive()->id almacena el ID del menú activo y se compara con el ID del menú Inicio (101). La condición establece que si dichos valores son iguales entonces se mostrará el video de YouTube contenido dentro de la etiqueta <section class="youtube">. En otras palabras, el video se mostrará únicamente si el visitante se encuentra en el menú Inicio (página principal).

Podría darse el caso de que el menú Inicio no sea la página principal (por defecto), entonces el código debe modificarse.

<?php if ($menu->getActive() == $menu->getDefault()) { ?>
<section class="youtube">
     <iframe width="1280" height="720" src="https://www.youtube.com/embed/EfsOibCaQ-k?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>
<?php } ?>

El ID del menú activo almacenado en la variable $menu->getActive() se compara con el ID del menú por defecto. Si dichos valores son iguales entonces se mostrará el video contenido dentro de la etiqueta <section class="youtube">. Es decir, el video se mostrará únicamente si el visitante se encuentra en la página principal (por defecto).

Hemos logrado nuestro objetivo. Ahora el video de YouTube se muestra en la página principal.

figura-06

Sin embargo, todavía debemos hacer algunos ajustes en la hoja de estilos main.css.

La hoja de estilos

Para que la etiqueta <iframe> se adapte al ancho de su contenedor, debemos agregar la siguiente regla CSS:

iframe {
    max-width: 100%;
}

Para que el video se adapte correctamente a cualquier dispositivo, debemos modificar la altura del <iframe> según los tamaños que usa YouTube:

.youtube iframe {
     height: 315px;
}
@media only screen and (min-width: 35em) {
     .youtube iframe {
          height: 360px;
     }
}
@media only screen and (min-width: 48em) {
     .youtube iframe {
          height: 480px;
     }
}
@media only screen and (min-width: 60em) {
     .youtube iframe {
          height: 720px;
     }
}
@media only screen and (min-width: 80em) {
     .youtube {
          margin: 0 auto;
          max-width: 80em;
     }
}

Finalmente, la página principal se verá así (en ordenadores de escritorio):

figura-07

Dejo al criterio del lector verificar cómo se muestra el video en cualquier dispositivo conectado a Internet (smartphone/iphone, tablet/ipad, laptop/notebook, etc.).

Este procedimiento puede extenderse (con sus correspondientes variaciones) para insertar diapositivas (slideshow), mapas de Google (Google Maps), formularios, plugins sociales de Facebook, widgets de Twitter, complementos de Google Plus o cualquier otro elemento que le agregue funcionalidad a nuestros proyectos basados en Joomla!

Hasta la próxima. Saludos desde Lima, Perú. ¡Abur!

Visto 14121 veces Etiquetado como Desarrollador, Spanish
César Vargas-Machuca B.

César Vargas-Machuca B.

Freelance web developer (front-end). I am focused on responsive web design, SEO and Joomla!

Frequent reader. Passionate about good music. Amateur chef. Friend of animals. Overly punctual. I hate spam. Single yesterday and today. Peruvian, always!

Desarrollador web independiente (front-end). Diseño websites en Joomla!, adaptables al entorno del usuario y optimizados para los motores de búsqueda.

Lector frecuente. Apasionado por la buena música. Cocinero aficionado. Amigo de los animales. Excesivamente puntual. Detesto el spam. Soltero ayer y hoy. Peruano, ¡siempre!