[SharePoint 2013] Mejoras en sitios de publicación: Renderizar imagenes

En las últimas semanas estamos llevando a cabo un proyecto sobre un portal de publicación, cuyos resultados pronto lo veréis en el mundo real. Este proyecto ha sido nuestro segundo portal de publicación y en el que hemos podido introducir alguna de las novedades que trae SharePoint 2013, también nos hemos encontrado con varios inconvenientes que una vez que los tengamos resueltos escribiremos un post sobre todo esto (principalmente son aspectos relativos a la seguridad de un sitio web y que tenemos que tener en cuenta a la hora de hacer un portal de publicación).

Dentro de las mejoras que comento, voy a hablar sobre el tema del renderizado de imágenes. Esto es algo que puede parecer muy simple y que quizás gente que no trabaje a diario realizando aplicaciones Web no sepa de la importancia que tiene. Pongámonos esta situación realizamos un WebPart que muestra en un carrusel las imágenes de las últimas noticias de una web como por ejemplo está imagen:

Tenemos un Tipo de Contenido donde tengo la descripción de la noticia y una imagen de publicación que es lo que se muestra en el carrusel. Esta imagen que hay que añadir en la noticia desde diseño indican que tienen que tener una determinada resolución: por ejemplo, 300 de ancho y 400 de alto, y que no tenga un tamaño de más de 100 Kb porque sino da un efecto un tanto raro al mostrar el carrusel. Ponemos la web en producción y todas estas noticias están correctas porque nos hemos encargado de verificar que cumplían estos requerimientos.

Hasta este punto está todo correcto, que ocurre que la primera noticia que tiene que introducir el cliente coge la imagen y no le realiza ningún tratamiento, de la cámara a la página de SharePoint. ¿Qué significa esto? Que la imagen igual tiene un tamaño aproximado de 10 Megas y su tamaño es 2000 px de ancho por 3000 px de alto. Consecuencia que el desarrollo tan bonito que habíamos implementado se estropea porque el encargado de introducir la información desconocía esa información o requisitos que habíamos informado con anterioridad.

¿ Como lo mejoramos en SharePoint 2013?

SharePoint 2013 trae una característica que se llama Representación de Imágenes que nos ayuda a optimizar la entrega de imágenes, manteniendo en caché una versión optimizada de la misma en diferentes tamaños. ¿Esto qué quiere decir? Que dentro de esta característica podemos definir un nuevo tipo de imagen como carrusel en la que disponemos de un alto y ancho tal y como nos han indicado en diseño. Y en el momento de realizar la llamada a la imagen le indicamos que nos la muestre con el renderizado indicado. De esta forma la faena que tenia que realizar el encargado de introducir la imagen en el portal de publicación se encarga SharePoint de realizarla.

Para que esta característica funcione

1º . Activar la «Blob Cache» en nuestro sitio Web. Para activarla tenemos que dirigirnos al web.config y en la entrada donde pone «<BlobCache ….» poner el valor «Enabled=True»

2º.- Definir el Tamaño que queremos utilizar para eso dentro del sitio de SharePoint «Configuración del Sitio->Administración de Imágenes»

Aquí añadiríamos un nuevo elemento con los requerimientos de nuestro caso. Esta característica también es interesante por ejemplo si queremos realizar la web responsive y dependiendo del tamaño de la pantalla pues cargar una representación u otra.

3.- Ahora bien, ¿cómo debemos de llamar a la imagen para que tenga estas caracteristicas? Pues concatenando a la url de la imagen el parámetro «?RenditionID=Numero» donde Numero es el número que esta en el apartado 2.

En caso de que necesitemos un tamaño que no este definido por defecto también tenemos la posibilidad de pasarle los parametros a la imagen de la siguiente forma «?width=150&heigth=100» Los dos parámetros no son obligatorios podemos indicar solamente el alto o el ancho y el mismo se encarga de proporcionarla en base a ese valor.

Conclusión

Hemos visto como pequeñas mejoras introducidas en SharePoint 2013 nos son de gran utilidad, ya que con realizar tan solo ésta mejora, conseguimos por ejemplo, que nuestros desarrollos sigan igual de bonitos independientemente de quien introduzca los datos. Lo que se traduce, por ejemplo, en que los encargados del desarrollo de la web estén satisfechos por el resultado desarrollado y al encargado de introducir el contenido en la web también porque se le ahorra bastante trabajo.