Joomla! viene con un componente para manejar contactos. Una limitación que algunas veces me ha llevado a buscar otra extensión para mostrar los contactos en una página, es que la vista de todos los contactos en una categoría no permite mostrar las fotos o avatares de las personas. En este artículo te voy a mostrar cómo hacer un override que agrega las imágenes en la lista de contactos.

En este ejemplo estaré usando la plantilla Protostar que viene con Joomla. Cómo también vamos a hacer modificaciones de las plantillas de estilo, sería conveniente crear una copia de la plantilla antes de empezar. En la nueva versión 3.5 de Joomla, esto no va a ser necesario, ya que Protostar va a venir con la opción de agregar estilos CSS personalizados sin que se sobreescriban con la próxima actualización de Joomla.
Empezamos creando la categoría y los contactos necesarios. Importante es que en los contactos agreguemos una foto o avatar de la persona.
Después creamos el item de menú de tipo “Mostrar todos los contactos de una categoría”, seleccionando la categoría que contiene los contactos a mostrar.

Lo que obtenemos en la página es esto, una vista nada espectacular y sin imágenes:

Ahora vamos a hacer algunos cambios en la vista de la categoría. Para eso necesitamos crear un override de com_contact/category/default_items.php
Primero vamos a Extensiones -> Plantillas y cliqueamos en “Plantillas”:

Después seleccionamos “Detalles y archivos de la plantilla Protostar” (o de la plantilla que tengas en uso):

Ahora vamos a la pestaña “Crear modificaciones” y elegimos Componentes -> com_contact -> category

Joomla nos avisa que se crearon todos los archivos necesarios dentro de la plantilla:

Entonces nos vamos a la pestaña “Editor” y buscamos el archivo que queremos modificar:

Lo que modificamos en el código es la lista de contactos, separando los distintos bloques de información en contenedores (<div class="spanX">...</div>). En el primer contenedor insertamos la imagen, en el segundo nombre y dirección, en el tercero los números de teléfono / fax. Este ejemplo está basado en Bootstrap 2, si quieres hacer cambios en una plantilla con Bootstrap 3, tienes que cambiar las clases “spanX” por “col-md-X”:

<ul class="category list-striped">

<?php foreach ($this->items as $i => $item) : ?>

<?php if (in_array($item->access, $this->user->getAuthorisedViewLevels())) : ?>

<?php if ($this->items[$i]->published == 0) : ?>

<li class="system-unpublished cat-list-row<?php echo $i % 2; ?>">

<?php else: ?>

<li class="row cat-list-row<?php echo $i % 2; ?>" >

<?php endif; ?>

<?php if ($this->items[$i]->image) : ?>
 <div class="span2">
 <a href="/<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>">
 <?php echo JHtml::_('image', $this->items[$i]->image, JText::_('COM_CONTACT_IMAGE_DETAILS'), array('class' => 'contact-thumbnail')); ?></a>
 </div>
 <?php endif; ?>

<div class="list-title span7">
 <a href="/<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>">
 <?php echo $item->name; ?></a>
 <?php if ($this->items[$i]->published == 0) : ?>
 <span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
 <?php endif; ?>
 <p>
 <?php if ($this->params->get('show_position_headings')) : ?>
 <?php echo $item->con_position; ?><br />
 <?php endif; ?>
 <?php if ($this->params->get('show_email_headings')) : ?>
 <?php echo $item->email_to; ?><br />
 <?php endif; ?>
 <?php if ($this->params->get('show_suburb_headings') AND !empty($item->suburb)) : ?>
 <?php echo $item->suburb . ', '; ?>
 <?php endif; ?>

<?php if ($this->params->get('show_state_headings') AND !empty($item->state)) : ?>
 <?php echo $item->state . ', '; ?>
 <?php endif; ?>

<?php if ($this->params->get('show_country_headings') AND !empty($item->country)) : ?>
 <?php echo $item->country; ?><br />
 <?php endif; ?>
 </p>
 </div>
 <div class="span3">
 <?php if ($this->params->get('show_telephone_headings') AND !empty($item->telephone)) : ?>
 <?php echo JText::sprintf('COM_CONTACT_TELEPHONE_NUMBER', $item->telephone); ?><br />
 <?php endif; ?>

<?php if ($this->params->get('show_mobile_headings') AND !empty ($item->mobile)) : ?>
 <?php echo JText::sprintf('COM_CONTACT_MOBILE_NUMBER', $item->mobile); ?><br />
 <?php endif; ?>

<?php if ($this->params->get('show_fax_headings') AND !empty($item->fax) ) : ?>
 <?php echo JText::sprintf('COM_CONTACT_FAX_NUMBER', $item->fax); ?><br />
 <?php endif; ?>
 </div>

</li>
 <?php endif; ?>
 <?php endforeach; ?>
</ul>

En la hoja de estilos tenemos que agregar unas definiciones para que los elementos sean mostrados de manera apropiada:

.contact-category .row {
   margin-left:0;
}

.contact-thumbnail {
   margin-bottom: 10px;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,0.2);
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Guardamos los cambios y volvemos a ver nuestra página:

Mucho mejor, no?

Es bueno ver que con pequeños cambios en Joomla mismo podemos crear nuevas posibilidades sin necesidad de tener que instalar más extensiones.

Basado en este override he creado un cambio en los archivos núcleo de Joomla, para agregar la opción de mostrar las imágenes en la lista de contactos. Esos cambios están como Pull Request en Github. Si suficiente gente se interesa por ese Pull Request a lo mejor el cambio sea integrado en Joomla como nueva función: https://github.com/joomla/joomla-cms/pull/8580

Te invito también a ver otro ejemplo de este override en la página de j!-over: https://www.j-over.de/es/template-override/com_contact/lista-de-contactos-con-imagenes.html 

Ponte a crear nuevos overrides y participa en el “j!-over sorteo de compleaños”. Tienes tiempo hasta el 30 de abril! https://www.j-over.de/es/novedades/general/j-over-birthday-contest.html