1. Liferay versión 6.1
Trabajando con imágenes

2. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Índice de contenidos
‣ Introducción.
‣ Manejando la fotografía del usuario.
‣ Manejando imágenes de la galería de imágenes.
‣ Manejando imágenes del portlet.

3. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Introducción
‣ Se describe a continuación el proceso para manejar imágenes de
diferentes ámbitos dentro de Liferay.
‣ La visualización de dichas imágenes se realiza mediante la etiqueta
HTML img.
‣ Se pasa a describir cómo parametrizar su atributo src para que Liferay
muestre la imagen adecuada en las situaciones más habituales.

4. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando la fotografía del usuario
‣ El manejo de la fotografía asociada a un usuario se lleva a cabo
construyendo una url algo especial:
‣ Esta url se construye de la siguiente forma:
<img ... src="<%= rutaEspecial %>" />
String rutaEspecial =
themeDisplay.getPathImage()+
"/user_portrait?screenName="+usuario.getScreenName()+
"&amp;companyId="+usuario.getCompanyId();

5. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando la fotografía del usuario
‣ La url se contruye mediante:
‣ Ruta de las imágenes: themeDisplay.getPathImage().
‣ Ruta para hacer peticiones de imágenes /user_portrait pasando como parámetro el
nombre en pantalla del usuario y el companyId.

6. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando la fotografía del usuario
‣ Ejemplo:
<%
Map<String, String> info = (Map<String, String>)
renderRequest.getAttribute(PortletRequest.USER_INFO);
!
long userId = Long.parseLong(info.get("liferay.user.id")
.toString());
User usuario = UserLocalServiceUtil.getUser(userId);
...
long idFoto = usuario.getPortraitId();
int tam = i.getSize();
!
String ruta = themeDisplay.getPathImage()+"/user_portrait?
screenName="+usuario.getScreenName()
+"&amp;companyId="+usuario.getCompanyId();!
%>

7. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando la fotografía del usuario
‣ Ejemplo (cont.):
<div><img src="<%=ruta%>"></img></div>
<div>
<h1>
<label>Identificador de usuario:</label>
<%= userId %>
</h1>
</div>
<div><h2><label>Nombre: </label><%=nombre%></h2></div>
<div><h2><label>Titulo: </label><%=titulo%></h2></div>

8. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Ejercicio
‣ Diseñar un portlet llamado DatosUsuario-portlet que muestre la
información del usuario que está accediendo al portal, algo tal que así:

9. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Ejercicio
‣ Si es otro usuario el que accede al portlet la renderización,
lógicamente, se ve modificada:

10. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ Se pasa a describir a continuación el proceso para visualizar imágenes
que se encuentran en la galería de imágenes.
‣ El proceso es muy simple y muy similar al anteriormente descrito:
‣ Se trabaja con la etiqueta HTML img.
‣ Necesitamos construir una url algo especial.

11. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ El manejo de imágenes de la galería de imágenes de Liferay nos obliga
a trabajar con dos clases Utility que proporciona el core de Liferay
(liferay-service) y que nos ofrecen servicios para manejar las imágenes
y las carpetas de la galería (estos servicios se ofrecen en forma de
métodos estáticos):
‣ La clase IGImageLocalServiceUtil: nos permite manejar imágenes de la galería de
imágenes.
‣ La clase IGFolderLocalServiceUtil: nos permite manejar carpetas de la galería de
imágenes.
‣ Ambas se encuentran en el paquete com.liferay.portlet.imagegallery.service.

12. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ Los conceptos relacionados con imágenes y carpetas serán
modelados mediante dos interfaces:
‣ IGFolder: una referencia de este tipo representa a cualquier carpeta de una galería
de imágenes.
‣ IGImage: una referencia de este tipo representa a cualquier imagen que se
encuentra en una galería de imágenes.
‣ Ambas interfaces se encuentran en el paquete
com.liferay.portlet.imagegallery.model.

13. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ De tal forma que si necesitamos programáticamente recuperar
información de las imágenes que se encuentran en una determinada
galería deberemos hacer algo de este estilo:
// Importante: debemos conocer el id de la comunidad u
// organización sobre la que se está trabajando.
// Paso 1: Este servicio, mediante su método getFolders
// recupera las carpetas que se encuentran en la galería
// asociada a un determinado idGroup
List<IGFolder> carpetas =
IGFolderLocalServiceUtil.getFolders(idGroup);

14. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ (cont.)
// Paso 2: Se itera sobre la lista de carpetas y
// se recuperan las imágenes asociadas.
for(int i=0;i<carpetas.size();i++){
// c representa a cada carpeta.
! IGFolder c = carpetas.get(i);
// El método getImages recupera en forma de lista
// todas las imágenes que se encuentran en una
// determinada carpeta.
! List<IGImage> imagenes = IGImageLocalServiceUtil.
getImages(idGroup,c.getFolderId());
! for(int j=0;j<imagenes.size();j++){
! ! IGImage imagen = imagenes.get(j);
...
}
...
}

15. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ Ejemplo:
<%
List<IGFolder> carpetas =
IGFolderLocalServiceUtil.getFolders(idGroup);
for(int i=0;i<carpetas.size();i++){
! IGFolder c = carpetas.get(i);
! List<IGImage> imagenes = IGImageLocalServiceUtil.
getImages(idGroup,c.getFolderId());
! for(int j=0;j<imagenes.size();j++){
! ! IGImage imagen = imagenes.get(j);
...
}
...
}

16. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ Ejemplo (cont.):
...
<div>
<h2><%=imagen.getName() %></h2>
<img src="<%=themeDisplay.getPathImage()%>/image_gallery?
img_id=<%= imagen.getLargeImageId() %>
&t=<
%=ImageServletTokenUtil.getToken(imagen.getLargeImageId())
%>" width="200" />
</div>
...

17. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes de la galería de imágenes.
‣ El atributo src se contruye mediante:
‣ themeDisplay.getPathImage(): ruta de la imágenes.
‣ La url /image_gallery parametrizada mediante img_id y t.

18. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Ejercicio
‣ Diseñar un portlet que sea capaz de mostrar todas las imágenes que
se encuentran en la galería de imágenes de la comunidad u
organización donde se despliega.

19. Trabajando con imágenes
Preparado por Jesús Salinas Revelles
Manejando imágenes del portlet
‣ Analizamos una última alternativa, el manejo de imágenes que se
encuentran dentro del proyecto web del portlet.
‣ Para hacer referencia a la ruta del contexto de un proyecto específico,
se debe utilizar el método getContextPath() asociado a la petición, por
ejemplo:
‣ Nota: la imagen download.png se encuentra dentro de la carpeta imagenes.
...
<a href="<%=peticionFichero %>">
<img alt="Descarga" src=
"<%=renderRequest.getContextPath()%>/imagenes/download.png">
</a>
...