miércoles, 2 de abril de 2014

SP2013: Cómo modificar el tamaño de las tiles de los “promoted links” (tiles size)

Sin duda todos sabréis ya a estas alturas que SharePoint 2013 introduce el estilo “metro” mediante los mosaicos (tiles) que generan las listas de “promoted links”. Sin embargo, de nuevo Microsoft se queda a medias, y cuando intentas modificar el tamaño de dichos mosaicos… ¡¡No se puede!! al menos no por los parámetros habituales del WebPart. Por defecto vienen fijados en un tamaño de 150x150 px. No parece que debiera ser muy complicado añadir los parámetros “height” i “weight”, pero de nuevo ese trabajo se deja para el siempre “socorrido” implantador.

Sin duda, buscando por google encontrareis diversas soluciones al problema, la mayoría de ellas sobre javascript. Sin embargo yo prefiero (siempre que se pueda) atacar la solución mediante estilos CSS, por diversos motivos:

  • Se optimiza el tiempo de carga de la página, al evitar cualquier línea de código.
  • Evitamos posibles incompatibilidades con versiones antiguas de explorador.
  • Evitamos tener que referenciar a otros ficheros javascript (como jquery).
  • La simplicidad con CSS es máxima. Únicamente copiar el código en un “script editor webpart”.
  • Se evita ese primer “medio segundo” en que la página se carga normal y luego javascript hace su efecto retocando el objeto/webpart en cuestión. Ese “medio segundo” puede llegar a despistar y ser motivo de queja de algunos usuarios.

Así pues, pasemos a explicar el proceso paso a paso para hacer un resize de los “tiles” de “promoted links” simplemente con unas pocas líneas de CSS.

1.- Partimos de un listado de “promoted links” ya creado, con algunos ítems contenidos en él. Tomo por ejemplo los que se muestran en la siguiente imagen:

image

2.- Editamos la página donde estemos añadiendo este listado de “promoted links” y le añadimos un webpart de “Script Editor”

image

3.- Una vez tengamos añadido el webpart de Script Editor, pulsamos en “EDIT SNIPPET”

image4.- Añadimos el siguiente código al snippet:

<style>
.ms-tileview-tile-root, .ms-tileview-tile-content, .ms-tileview-tile-content img, .ms-tileview-tile-detailsListMedium, .ms-tileview-tile-detailsBox   {
width: 50px !important;
height:50px !important;
margin-right: 20px !important;
}
.ms-promlink-body {
height: 50px !important;
}
</style>

Modificando:

  • cualquiera de los tres “50px” por el tamaño que deseéis realmente.
  • El “Margin-right: 20px” por el espacio de margen que deseeis entre cada tile

Guardamos los cambios realizados en el snippet pulsando el botón de “insert”

5.- Como paso opcional, y únicamente si queremos eliminar las flechas para hacer scroll entre los tiles, podemos añadir el siguiente estilo al snippet:

.ms-promlink-header {
display:none;
}

6.- Salimos de la edición de la página (page - Stop Editing) y observamos cómo han cambiado nuestros mosaicos.

image

7.- Una vez terminado podeis jugar a modificar el parámetro width y height para ajustarlo al tamaño que tengáis disponible en vuestra página en concreto.

Como advertencia final: Tened en cuenta que con unos tiles muy pequeños, vais a tener un texto también muy pequeño que mostrar en su interior, por lo tanto, tendréis que minimizar al máximo los caracteres contenidos en él, o modificar también el tamaño de la letra que contienen, para evitar efectos como el siguiente:

image

En ese caso siempre podéis añadir un par de estilos más al snippet, uno para reducir el margen de la izquierda, y otro para reducir el tamaño de la letra:

.ms-tileview-tile-detailsListMedium {
    padding: 0px;
  }

ms-tileview-tile-titleMedium {
    font-size: 8px;
}

El efecto de añadir estos estilos extra sería el siguiente:

image 

¡Listo! Ahí tenemos nuestros mosaicos al tamaño deseado, de forma rápida, sencilla e indolora.

¡Saludos!

No hay comentarios: