The Joomla! Community Magazine™

Cómo utilizar imágenes en Joomla! 3.3 para controlar el formato de blog?

Escrito por | Monday, 01 December 2014 00:00 | Publicado en Diciembre 2014
Hace unos días estuve desarrollando unas páginas como blog y me puse a buscar información de cómo usar las imágenes de introducción que todavía no conocía bien. Estuve sacando cosas de distintos tutoriales (en inglés) y pensé que a lo mejor sería un buen tema para un artículo en español.
Imagenes blog Imagenes blog

Pestaña “Opciones de imágenes y enlaces”

Desde la versión 2.5 de Joomla! existe una nueva pestaña para insertar imágenes y enlaces en artículos sin necesidad de usar el editor. Esto ayuda mucho en el momento de crear una página tipo blog para tener un formato estandarizado con imágenes y texto.

La pestaña de imágenes y enlaces se puede activar y controlar a través de las opciones de contenido. Para llegar aquí hay que ir a Contenido/Gestor de artículos y pinchar en el botón “Opciones” en la esquina superior derecha, entonces se abre esta ventana:

Screenshot 764

Cuando creamos un artículo vemos ahora la pestaña "Opciones de imágenes y enlaces".

Primero vamos a usar la imagen de introducción para nuestro formato de blog. Aquí elegimos que imagen queremos poner (para tener un formato estandarizado se recomienda crear imágenes del mismo tamaño para cada artículo; en este ejemplo estoy usando imágenes de 180 x 135 px):

Screenshot 765

Le agregamos un texto alternativo a la imagen para mejorar el SEO de nuestra página.

Ahora agregamos el contenido del artículo. Como queremos tener un formato de blog, vamos a poner primero un texto de introducción y después el texto completo separados por un “Leer más”:

Screenshot 771

 

En las opciones del gestor de artículos se puede elegir si uno quiere mostrar el texto de introducción sólo en el formato de blog o también en la vista del artículo completo:

Screenshot 773

En este caso lo puse en  "ocultar", de esta manera el texto de introducción aparece sólo en el formato de blog.

Y así es como queda la página blog con pequeñas imágenes posicionadas a la izquierda del texto de introducción y un botón de “Leer más…” para acceder al texto completo:

 

Screenshot 766

Overrides de layouts

Para lograr este resultado hice también unos pequeños cambios en los layouts de "readmore" e "intro_image". Para esto copié los archivos "readmore.php" e "intro_image.php" que están ubicados en "/layouts/joomla/content" dentro de mi plantilla en "/html/layouts/joomla/content".

En "readmore.php" le agregué dos clases al botón que crea el "Leer más..." para que realmente aparezca como un botón:

<a class="btn btn-info btn-sm"

btn-info: porque quiero que los botones aparezcan del color definido aquí

btn-sm: controla el tamaño de letra y el padding del botón

En "intro_image.php" agregué la clase "thumbnail" a la imagen:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image thumbnail"> <img

La clase "thumbnail" está definida en Bootstrap y crea un borde alrededor de la imagen.

Además en mi template.css creé unas definiciones para las imágenes para controlar los márgenes de acuerdo a si están ubicadas a la derecha o a la izquierda del texto:

.pull-left.item-image {
  margin-right: 10px;
}
.pull-right.item-image {
  margin-left: 10px;
}
.item-image {
  margin-bottom: 20px;
}

Para que sólo aparezca "Leer más..." sin el título del artículo usé estas opciones:

Screenshot 775

Una función que es típica en blogs, es que se pueda pinchar en la imagen para acceder al artículo completo. Esta función no esta presente en Joomla! hasta ahora, pero se puede agregar haciendo un pequeño cambio en el layout de “blog_item”. En este caso copiamos en archivo “blog_item.php” en la carpeta “/html/com_content/category/” de nuestra plantilla y cambiamos esta linea (nr. 41):

<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>

 

de esta manera para obtener un enlace al artículo:

 

<a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>">
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
</a>

Ahora no sólo podemos pinchar en el botón “Leer más…” sino también en la imagen para acceder al artículo completo.

Imagen para mostrar un artículo al completo

Además de la imagen de introducción tenemos la opción de agregar una imagen al texto completo.

Screenshot 776

En este caso la imagen es mas grande (500 px de ancho), está ubicada a la derecha del texto y tiene un subtítulo.

Screenshot 777

Agregando algunas opciones al css de la plantilla lograremos que la imagen sea responsiva:

@media (max-width: 767px) {
.pull-right.item-image, .pull-left.item-image {
float: none !important;
margin: 0 10px 20px 10px;
}
.pull-right.item-image img, .pull-left.item-image img {
display: block;
height: auto;
max-width: 100%;
}
.img_caption {
max-width: 100% !important;
}
}

Screenshot 779

Aquí muestro otro ejemplo de como usé estos pasos para crear una página en formato de blog:

Screenshot 780

Conclusiones

Con estos pasos se pueden crear páginas en formato de blog con imágenes estandarizadas sin necesidad de agregar las mismas en el editor de texto y en cada artículo tener que ponerles definiciones de posición y márgenes. De este modo ahorramos tiempo y evitamos errores.
Con un poco de fantasía y algunos conocimientos de CSS cada uno puede crear su propia página en formato de blog como más le guste.

Visto 11825 veces
Etiquetado como Spanish, Administrador
Viviana Menzel

Viviana Menzel

I'am argentinian, but I'am living in Germany since 1998. I came here to make my PhD in Biology. I was always interested on computers and never was afraid to learn about new software and so I also learned how to develop websites.
I discovered Joomla! on 2006 and I felt in love with it! 

As mother of 3 I wanted to work from home and so I decided 2008 to have my own company and work on websites with Joomla!

In May 2014 I visited my first Joomla! event (jab14) and some months later the JoomlaDay Germany. I like the Joomla! community and more the Spanish-speaking people. Since October/November 2014 I'am collaborating in the Joomla! Magazine Spanish.

Cambiar de idioma

¡Suscríbase!
Su correo electrónico:
Invalid Input

contribuya-articulo p