Joomla: Imágenes con atributo title personalizado
06 de Enero de 2008 en Javascript, Programación, PHP, Joomla
Lecturas: 7,585

JoomlaLas imágenes en el contenido de Joomla se insertan mediante un tag {mosimage}. En las propiedades de la imagen que podemos ajustar desde una de las pestañas del panel de la derecha podemos ajustar muchos parámetros, que se guardarán todos en un mismo campo de la base de datos separados por el carácter "pipe". Desgraciadamente sólo se guarda un sólo texto descriptivo para la imagen propiamente, que se usará tanto para el atributo alt como para el atributo title.
A continuación voy a explicar qué modificaciones internas son necesarias para tener el campo title y alt separados y personalizables.

1.- Modificación de las plantillas

Primero de todo debemos modificar las plantillas de la administración para insertar un campo de texto nuevo que será el que controle el atributo title. Debemos hacerlo tanto para el contenido normal como para el contenido estático:

Contenido normal:
Editamos el archivo administrator/components/com_content/admin.content.html.php y sobre la línea 890, debajo del TR del texto de la etiqueta, insertar:

PHP:
  1. <tr>
  2.     <td align="right">
  3.     Texto del t&iacute;tulo
  4.     </td>
  5.     <td>
  6.     <input class="text_area" type="text" name="_title" value="" />
  7.     </td>
  8. </tr>

Contenido estático:
Editamos el archivo administrator/components/com_typedcontent/admin.typedcontent.html.php y sobre la línea 636, debajo del TR del texto de la etiqueta, insertar:

PHP:
  1. <tr>
  2.     <td align="right">
  3.     Texto del t&iacute;tulo
  4.     </td>
  5.     <td>
  6.     <input type="text" name="_title" value="" />
  7.     </td>
  8. </tr>

2.- Modificar la función Javascript

Debemos modificar la función Javascript que aplica los cambios introducidos, para que tenga en cuenta el nuevo campo que hemos insertado. Para ello debemos editar el archivo includes/js/joomla.javascript.js, y sobre la línea 250 encontramos la función:

JavaScript:
  1. function applyImageProps() {
  2.     form = document.adminForm;
  3.     if (!getSelectedValue( 'adminForm', 'imagelist' )) {
  4.         alert( "Select and image from the list" );
  5.         return;
  6.     }
  7.     value = form._source.value + '|'
  8.     + getSelectedValue( 'adminForm', '_align' ) + '|'
  9.     + form._alt.value + '|'
  10.     + parseInt( form._border.value ) + '|'
  11.     + form._caption.value + '|'
  12.     + getSelectedValue( 'adminForm', '_caption_position' ) + '|'
  13.     + getSelectedValue( 'adminForm', '_caption_align' ) + '|'
  14.     + form._width.value;
  15.     chgSelectedValue( 'adminForm', 'imagelist', value );
  16. }

Aquí debemos añadir el nuevo campo title al final de todo, dejando la función de la siguiente manera:

JavaScript:
  1. function applyImageProps() {
  2.     form = document.adminForm;
  3.     if (!getSelectedValue( 'adminForm', 'imagelist' )) {
  4.         alert( "Select and image from the list" );
  5.         return;
  6.     }
  7.     value = form._source.value + '|'
  8.     + getSelectedValue( 'adminForm', '_align' ) + '|'
  9.     + form._alt.value + '|'
  10.     + parseInt( form._border.value ) + '|'
  11.     + form._caption.value + '|'
  12.     + getSelectedValue( 'adminForm', '_caption_position' ) + '|'
  13.     + getSelectedValue( 'adminForm', '_caption_align' ) + '|'
  14.     + form._width.value + '|'
  15.     + form._title.value;
  16.     chgSelectedValue( 'adminForm', 'imagelist', value );
  17. }

Notar que después del form._width.value hemos añadido un separador más y justo debajo una línea nueva con el valor del campo title.

También debemos modificar la función que muestra las propiedades de la imagen cuando pinchamos sobre una de las imágenes de la lista. En el mismo archivo, sobre la línea 232 tenemos la función showImageProps():

JavaScript:
  1. function showImageProps(base_path) {
  2.     form = document.adminForm;
  3.     value = getSelectedValue( 'adminForm', 'imagelist' );
  4.     parts = value.split( '|' );
  5.     form._source.value = parts[0];
  6.     setSelectedValue( 'adminForm', '_align', parts[1] || '' );
  7.     form._alt.value = parts[2] || '';
  8.     form._border.value = parts[3] || '0';
  9.     form._caption.value = parts[4] || '';
  10.     setSelectedValue( 'adminForm', '_caption_position', parts[5] || '' );
  11.     setSelectedValue( 'adminForm', '_caption_align', parts[6] || '' );
  12.     form._width.value = parts[7] || '';
  13.  
  14.     //previewImage( 'imagelist', 'view_imagelist', base_path );
  15.     srcImage = eval( "document." + 'view_imagelist' );
  16.     srcImage.src = base_path + parts[0];
  17. }

La debemos modificar, incluyendo el nuevo campo title. Para ello añadimos una línea más justo después del form._width.value que adquiera el valor del title, quedando la función de la siguiente manera:

JavaScript:
  1. function showImageProps(base_path) {
  2.     form = document.adminForm;
  3.     value = getSelectedValue( 'adminForm', 'imagelist' );
  4.     parts = value.split( '|' );
  5.     form._source.value = parts[0];
  6.     setSelectedValue( 'adminForm', '_align', parts[1] || '' );
  7.     form._alt.value = parts[2] || '';
  8.     form._border.value = parts[3] || '0';
  9.     form._caption.value = parts[4] || '';
  10.     setSelectedValue( 'adminForm', '_caption_position', parts[5] || '' );
  11.     setSelectedValue( 'adminForm', '_caption_align', parts[6] || '' );
  12.     form._width.value = parts[7] || '';
  13.     form._title.value = parts[8] || '';
  14.  
  15.     //previewImage( 'imagelist', 'view_imagelist', base_path );
  16.     srcImage = eval( "document." + 'view_imagelist' );
  17.     srcImage.src = base_path + parts[0];
  18. }

3.- Modificación del Mambot

Joomla sustituye en tiempo de ejecución el tag {mosimage} por la imagen que hemos definido y le aplica las propiedades que hemos puesto. Así que será ahí dónde debemos tocar el código PHP para que recoja el nuevo campo y lo aplique como title. Para ello debemos editar el archivo mambots/contents/mosimage.php y, sobre la línea 99 encontramos la declaración de la función processImages(). Dentro de ella se recoge el string que contiene los parámetros de la imagen separados por un "pipe" y lo convierte en un array, por lo que como en el paso anterior hemos añadido nuestro title al final, será la última iteración del array.
Así que sobre la línea 159, justo debajo del IF que comprueba y seta el atributo 7 (la anchura o width) debemos insertar el siguiente código:

PHP:
  1. // $attrib[8] title
  2. if ( !isset($attrib[8]) || !$attrib[8] ) {
  3.     $attrib[8] = 'Image';
  4. } else {
  5.     $attrib[8] = htmlspecialchars( $attrib[8] );
  6. }

Este código hace el mismo trabajo que para el atributo 2 (el alt) pero trabajando sobre el nuevo campo title.
Finalmente, en la línea 186 (después de haber insertado el código anterior) encontramos la siguiente línea:

PHP:
  1. $image .=' hspace="6" alt="'. $attrib[2] .'" title="'. $attrib[2] .'" border="'. $border .'" />';

Como vemos, Joomla usa el mismo texto del alt para el alt y para el title. Como ahora tenemos un atributo nuevo para el title, simplemente tenemos que cambiar el atributo al que se hacer referencia para el title, de 2 a 8, quedando la línea de la siguiente forma:

PHP:
  1. $image .=' hspace="6" alt="'. $attrib[2] .'" title="'. $attrib[8] .'" border="'. $border .'" />';

Y ya tenemos soporte para los dos atributos por separado ;)

Saludos!

Tag:
 Enviar a Fresqui

Escribe un Comentario





Estadísticas