×

Advertencia

JUser: :_load: No se ha podido cargar al usuario con 'ID': 634

El Enlace desaparecido en las Imágenes de Introducción en Joomla! 2.5

Escrito por | 30 Noviembre 2012 | Publicado en Dic. 2012
El nuevo parámetro "Imágenes y Enlaces" ha sido un gran añadido a Joomla 2.5. Pero, ¿se ha preguntado alguna vez por qué la imagen de introducción del blog no enlaza directamente al artículo completo? En este sencillo tutorial le mostraré cómo modificar su plantilla para añadir ese enlace desaparecido.

¿A quién le gusta hacer clic en las imágenes? A mí me gusta. Así que si hablamos de diseño de blogs, ¿por qué la imagen de introducción de nuestro artículo no enlaza al artículo completo? Es verdad que tenemos un enlace en el título y un enlace en "leer más", pero a veces eso no es suficiente para nosotros, que nos gusta hacer clic en las propias imágenes. Puede que esta opción se incluya en una futura actualización de Joomla!. Hasta entonces, puede seguir estos pasos para añadir los enlaces a las imágenes de introducción de su plantilla.

Para este ejemplo, trabajaremos con el diseño Categoría Blog. Estoy utilizando la plantilla por defecto de Joomla! "Beez 2" y el sitio de pruebas "Australian Parks", pero estos pasos podrían aplicarse a la mayoría de plantillas de Joomla 2.5.

El diseño Categoría Blog de Joomla!

Este es nuestro diseño de Categoría Blog estándar. Estoy utilizando el parámetro "Imágenes y Enlaces" para añadir  estas imágenes de introducción, alineándolas a la izquierda del texto.

Categoría Blog Estándar

Categoría Blog Estándar

Crear un override de plantilla

Paso 1: Localice el directorio html dentro de su plantilla, templates/beez_20/html . Después, cree estos dos directorios vacíos dentro: com_content/category . (Con category anidado dentro de com_content). Si su plantilla no tiene un directorio html, créelo también.

3

Paso 2: Localice este archivo en el core de Joomla: /components/com_content/views/category/tmpl/blog_item.php

4

 Paso 3: Copie el archivo blog_item.php a la carpeta category de su plantilla, que creó en el paso 1

5

Ahora, podemos editar el diseño del blog dentro del ámbito de nuestra plantilla, sin preocuparnos de que los cambios se sobreescriban cuando actualice Joomla! o su plantilla. Si estos archivos ya existen en su plantilla no necesita copiarlos de los archivos del sistema. Simplemente proceda con los siguientes pasos.

Añadir el enlace

Nota para principiantes: No se preocupe si no está familiarizado con HTML o PHP. El concepto básico es que estamos creando una etiqueta de enlace (anchor) envolviendo la imagen de introducción, haciendo que se pueda hacer clic en ella. Después añadiremos algo de código php dentro del enlace (href) para que funcione.

Volviendo al archivo blog_item.php que creamos en el paso anterior, busque “image_intro”. Está buscando el siguiente bloque de código, apróximadamente en la línea 130:

<img
     <?php if ($images->image_intro_caption):
           echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
     endif; ?>
     src="/<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>

El código anterior es el código por defecto para nuestra imagen de introducción. Ahora podemos envolver esa imagen con una etiqueta anchor de HTML. Para el enlace, podemos usar el mismo snippet PHP que se encuentra en el enlace del título (apróximadamente en la línea 28). El código final debería parecerse a esto:

<a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>"><img
     <?php if ($images->image_intro_caption):
           echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
     endif; ?>
     src="/<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
</a>

¡Y eso es todo! Ahora sus imágenes de introducción deberían enlazar al artículo completo, igual que lo hace el enlace “leer más”.

Hay que señalar que el diseño de “Artículos Destacados” de Joomla utiliza una plantilla diferente a la de “Categoría Blog”, así que necesitan overrides de plantillas separados. Tendría que copiar el siguiente archivo del sistema: components/com_content/views/article/featured/default_item.php , y después repita los mismos pasos que hemos visto para crear el enlace.

*IMPORTANTE: Haga siempre una copia de seguridad de sus cambios para que pueda volver a ellos si se sobreescriben por alguna actualización de Joomla o de su plantilla.

Para una visión general sobre cómo usar Imágenes y Enlaces en Joomla 2.5, vea este videotutorial (en inglés) publicado cuando se lanzó esta característica.

¿Está utilizando la imagen de introducción de Joomla de una forma interesante? Muestre su sitio en los comentarios de este artículo.

Artículo original: Tutorial - The Missing Link to Intro Images in Joomla 2.5 de Scott Greenwald
Traducido por: Andoitz Brit
Miembro del: Equipo de Marketing y Difusión de Joomla! en español

Visto 5651 veces Etiquetado como Spanish, Desarrollador