Cambiar el Logo en Liferay 6

por

Una de las ventajas que nos ofrece Liferay a la hora de crear portales web es la posibilidad de modificar el logo de nuestra web a través de su interfaz del panel de control.

A parte de esta forma tenemos otras igualmente efectivas aunque perdiendo esa herramienta que nos da Liferay.

Liferay introduce el logo en nuestra web a través de una propiedad del tema que ,por lo general, esta escrita en el fichero _diffs/templates/portal_normal.vm . Esa línea suele tener la siguiente forma en Liferay 6:


<h1 class="company-title">
<a class="logo" href="$company_url" title="#language("go-to") $company_name">
</a>
</h1> 

A través de esta línea se incluye el logo en el tema y nos permite modificar el logo desde la interfaz de Liferay en el Panel de Control->Organizaciones->Nombre de la organización a la que pertecene el portal->Administrar Páginas->Configuración->Logo y aquí podemos cambiar el logo de nuestro portal.

Una segunda forma de incluir el logo en nuestra web es a través del tema nuevamente pero en este caso en vez de hacer que el logo se cargue automáticamente desde la interfaz de liferay, deberemos subirlo de la misma forma pero para incluirlo en el tema lo haremos a través de la siguiente línea de código:


<h1 class="logo">
<a class="png" href="$url_portal_current_url_public">
<img alt="" src="/image/organization_logo?img_id=23145"/>
</a>
</h1>

Para subir el logo debemos hacerlo a través de la siguiente ruta: Panel de Control->Organizaciones->Nuestra organización->Cambiar y subimos ahí nuestro logo.Una vez hecho esto debemos volver a la pagina donde estaba el "Cambiar" y hacer click derecho sobre el logo->Ver imagen y una vez ahi debemos copiar el ID de la imagen. Este id podemos verlo en la url del navegador escrito de la siguiente forma: img_id=123 por ejemplo.

Este es el id que debemos incluir en el código que veiamos en el código anterior de la siguiente forma:


<h1 class="logo">
<a class="png" href="$url_portal_current_url_public">
<img alt="" src="/image/organization_logo?img_id=123"/>
</a>
</h1>

Y ahora os preguntareis para que vamos a hacerlo de esta forma si de la otra podemos modificar el logo de una forma mucho más cómoda y sencilla. La respuesta es que Liferay tiene varios problema de accesibilidad y éste es uno de ellos. Si lo hacemos por el primer método no pasará los test de accesibilidad y una solución a ese problema es la segunda forma de introducirlo. Por tanto si no os importa la accesibilidad utilizad el priemr método sin problema pero si vuestro caso es el de tener que cumplir con los criterios de accesibilidad entonces debereis hacerlo de la segunda forma a pesar de ser mas tediosa.

Una última forma de incluir el logo en la web es eliminando las líneas que vimos de los anteriores casos y sustituirlas por la típica línea de incluir una imagen html:

Los dos últimos casos son ,ambos, validos para cumplir los requisitos de accesibilidad, así que sólo debeis elegir uno y seguirlo.

Espero haberos ayudado.

COMENTARIOS

25-10-2011 22:17:30
Supongo que las imágenes las tienes en el tema. Suponiendo que tu imagen esta en la carpeta _diffs/images/imagen1.png por ejemplo y que tu tema se llama prueba-theme, la ruta que deberías usar para acceder a la imagen seria /prueba-theme/images/imagen1.png o tambien puedes usar ../images/imagen1.png Por lo general, las imagenes que se usan para la estetica de la pagina se guardan en el tema y las imagenes que se usan en contenidos web se guardan en la galeria de imagenes del portal. Espero haberte ayudado. Si sigues teniendo problemas no dudes en seguir preguntando.
24-10-2011 23:52:19
muy buena la informacion pero me podrias ayudar es kiero mostrar unas imagenes en la pagina principal y esas estan contenidas en una carpeta esto lo ago atraves de realizando un porlet la ruta k yo porgo es esta <div> <p> <a href="tech.html"><img src="../../images/GreenRegisterButton1.jpg" width="163" height="72" alt="Register" longdesc="../../images/GreenRegisterButton1.jpg" /></a><a href="company.html"><img src="../../images/GreenRegisterButton1.jpg" width="163" height="72" alt="Register" longdesc="../../images/GreenRegisterButton1.jpg" /></a> </p></div>

DEJA TU COMENTARIO