Joomla nos permite añadir un par de iconos al lado del titulo de un articulo y en cualquier presentación del mismo para acceder rápidamente a una impresión o al correo.
Pero, si no nos gusta o queremos añadir mas iconos?
Por ejemplo, si quremos añadir un boton de facebook?
- En nuestro caso necesitamos la modificacion de "content" en "presentaciones"
- Seguidamente vamos a la pestaña "editar" y buscamos la modificiacion que hemos creado.
Primer paso:
Crear una modificacion de la plantilla
- Abrir el gestor de plantillas.
- Seleccionar la pestaña de "plantilla"
- Seleccionar la plantilla deseada.
- Seleccionar la pestaña "crear modificacion".
- Seleccionar la modificacion que queremos crear.
Segundo paso:
Comprender el codigo.
En nuestra plantilla, el codigo por defecto de icons.php es el siguiente:
<?php
/**
* @package Joomla.Site
* @subpackage Layout
*
* @copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('JPATH_BASE') or die;
$canEdit = $displayData['params']->get('access-edit');
?>
<div class="icons">
<?php if (empty($displayData['print'])) : ?>
<?php if ($canEdit || $displayData['params']->get('show_print_icon') || $displayData['params']->get('show_email_icon')) : ?>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> <span class="icon-cog"></span> <span class="caret"></span> </a>
<?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
<ul class="dropdown-menu">
<?php if ($displayData['params']->get('show_print_icon')) : ?>
<li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']); ?> </li>
<?php endif; ?>
<?php if ($displayData['params']->get('show_email_icon')) : ?>
<li class="email-icon"> <?php echo JHtml::_('icon.email', $displayData['item'], $displayData['params']); ?> </li>
<?php endif; ?>
<?php if ($canEdit) : ?>
<li class="edit-icon"> <?php echo JHtml::_('icon.edit', $displayData['item'], $displayData['params']); ?> </li>
<?php endif; ?>
</ul>
</div>
<?php endif; ?>
<?php else : ?>
<div class="pull-right">
<?php echo JHtml::_('icon.print_screen', $displayData['item'], $displayData['params']); ?>
</div>
<?php endif; ?>
</div>
Lo primero que debemos observar es que hace una diferenciacion entre $displayData['params'] que es un array asociativo de las diferentes opciones del articulo a mostrar y $displayData['item'] que es el propio articulo.
Usando los valores de ['params'] va mostrando o no los dintos iconos, en el caso de esta plantilla, los organiza dentro de un menu desplegable.
Paso 3:
Editar el codigo.
Empezamos por fin con el quid de la cuestion, nuestro objetivo es dejar la seccion de iconos sin el icono de menu desplegable y con un boton de compartir de facebook, el primer paso es eliminar el menu desplegable.
<?php if ($canEdit || $displayData['params']->get('show_print_icon') || $displayData['params']->get('show_email_icon')) : ?>
<div class="btn-group pull-right">
<?php if ($displayData['params']->get('show_print_icon')) : ?>
<span class="print-icon"> <?php echo JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']); ?> </span>
<?php endif; ?>
<?php if ($displayData['params']->get('show_email_icon')) : ?>
<span class="email-icon"> <?php echo JHtml::_('icon.email', $displayData['item'], $displayData['params']); ?> </span>
<?php endif; ?>
<?php if ($canEdit) : ?>
<span class="edit-icon"> <?php echo JHtml::_('icon.edit', $displayData['item'], $displayData['params']); ?> </span>
<?php endif; ?>
</div>
<?php endif; ?>
Eliminamos la seccion '<a class="btn dropdown-toggle"' y seguidamente la seccion '<ul class="dropdown-menu">', recordemos que tambien tenemos que eliminar las etiquetas que se cierran.
Seguidamente tenemos una serie de elementos '<li>' que ya no tienen sentido, substituimos la etiqueta "li" por "span".
El siguiente paso es obtener la direccion que usan las distintas redes sociales para generar el dialogo de comparticion. Estas direcciones se componen de 2 partes:
- La dirección propia de la red que hace referencia a la comparticion.
- La direccion que queremos compartir, que se pasa como parametro(?status, ?u, ?url ...).
Una vez hayamos obtenido las diferentes URL que nos interesen procederemos a integrarlas en nuestro codigo.
<span class="facebook-icon"> <a href="http://facebook.com/sharer.php?u=<?php echo $root.JRoute::_(ContentHelperRoute::getArticleRoute($displayData['item']->slug, $displayData['item']->catid)); ?>" title="Facebook" onclick="popupwindow(this.href, 'winfacebook' ,640,480); return false;" rel="nofollow"><span class="icon-social-facebook" style="max-width:100%;></span> facebook </a> </span>
Podemos observar que en la parte de codigo que representa la URL a compartir (?u=) hemos concatenado "$root" ($root=JUri::root();), que devuelve la raiz del sitio, con la función "JRoute::_(ContentHelperRoute::getArticleRoute())" a la que debemos pasar la id del articulo y la id de la categoría para que se genere la url correspondiente a dicho articulo, dichos parámetros los obtenemos de $displayData['item'].
El codigo tambien tiene una funcion onclick que abre el enlace en una ventana emergente, para complementar esta funcion hemos añadido un script que, al abrir la ventana la coloca en el centro:
<script>
function popupwindow(url, title, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>
Finalmente solo queda maquetar:
Lo primero es añadir los iconos, una forma es añadir como fondo de una imagen con varios iconos y definir el tamaño de los botones mediante css:
[class^="icon-social-"],
[class*="icon-social-"] {
display: inline-block;
width: 36px;
height: 36px;
*margin-right: .3em;
line-height: 36px;
vertical-align: text-top;
background-image: url("../../../images/iconos-sociales.png");
background-size: 340px 246px;
background-repeat: no-repeat;
margin-top: 1px;
}
Luego debemos definir en que posicion se encuentra el icono que nos interesa:
.icon-social-facebook {
background-position: -199px -58px;
}
Este proceso debemos repetirlo para cada icono que queramos añadir, incluidos los iconos de joomla si queremos personalizarlos, imprimir, correo y editar, pero en este caso aun habría que cambiar algo.
Los iconos de joomla se generan mediante una función(JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']);) que llama a otra funcion en /components/com_content/helpers/icon.php, debemos editar dicho archivo y buscar la funcion correspondiente, podemos modificar directamente la función o bien podemos crear una copia (mismo nombre con _custom añadido). Ahora solo hemos de editar la variable $text donde crea el "<span class="icon-print"></span>"
Nuevamente debemos repetir el proceso con todos los iconos deseados.
