Al crear prototipos o wireframes de sitios y aplicaciones web, es habitual incluir contenidos de relleno por no disponer de los contenidos definitivos. Rellenar texto es muy sencillo con el famoso Lorem Ipsum y otras técnicas que ya presentamos en este mismo sitio. Sin embargo, incluir imágenes de relleno no es tan fácil, ya que requiere mucho tiempo preparar imágenes con diferentes tamaños.
La librería holder.js, creada por el diseñador y programador Ivan Malopinsky, soluciona este problema creando las imágenes de relleno directamente en el navegador. Las imágenes se crean mediante el elemento <canvas> y otras técnicas similares, por lo que funciona bien en todos los navegadores móviles y de escritorio, incluyendo Internet Explorer.
Generando imágenes de relleno
Antes de generar las imágenes, descarga holder.js y enlaza la librería en tus páginas (también puedes instalarla mediante Composer, Bower, etc.):
<!DOCTYPE html>
<html>
<head>
...
<script src="/js/holder.js"></script>
</head>
<body> ... </body>
</html>A continuación, genera la primera imagen de relleno utilizando la siguiente sintaxis:
<img src="holder.js/250x250">El truco consiste en utilizar un valor especial para el atributo src de la imagen. Este valor está formado por el texto holder.js seguido de las dimensiones en píxeles de la imagen que se quiere generar (con el formato anchura x altura).
La siguiente imagen muestra el resultado del ejemplo anterior (ten en cuenta que la imagen no existe físicamente y está siendo generada en tiempo real por tu navegador):
Como el valor del atributo src no corresponde a ninguna imagen que exista físicamente, es posible que en Firebug y en herramientas similares veas un montón de errores. Para evitarlo, puedes utilizar el atributo data-src de HTML5 en vez del tradicional atributo src:
<img src="holder.js/250x250">
<img data-src="holder.js/250x250">Personalizando las imágenes de relleno
Por defecto, holder.js añade a cada imagen un texto mostrando sus dimensiones. Si quieres utilizar un texto propio, añade la propiedad text. Esto puede ser útil por ejemplo para indicar que una imagen de relleno representa en realidad a un anuncio:
<img data-src="holder.js/728x90/text:ANUNCIO">Y este es el resultado de generar la imagen de relleno tal y como la muestra tu navegador:
El color de las imágenes generadas por defecto es gris claro. Para hacer que las imágenes se integren mejor con tu diseño, holder.js define seis temas: sky (azul), vine (verde), lava (naranja), gray (el gris claro por defecto), industrial (gris muy oscuro) y social (azul Facebook). Cambia el tema de cada imagen indicando su nombre después de sus dimensiones:
<img data-src="holder.js/200x200/sky">
<img data-src="holder.js/200x200/vine">
<img data-src="holder.js/200x200/lava">
<img data-src="holder.js/200x200/gray">
<img data-src="holder.js/200x200/industrial">
<img data-src="holder.js/200x200/social">Y así se ve este ejemplo en tu navegador:
En la documentación de holder.js se explica cómo crear tus propios temas. No obstante, si lo que quieres es modificar rápidamente el color de una imagen de relleno, lo puedes hacer indicando el color de fondo y el color del texto después de sus dimensiones.
<img data-src="holder.js/400x200/text:LIBROSWEB/#CC1414:#FFF">La imagen del ejemplo anterior utiliza los colores corporativos de librosweb.es y también un texto personalizado:
Imágenes de relleno responsive
Aunque el concepto de imágenes responsive todavía no está tan desarrollado como debería, la librería holder.js sí que permite generar imágenes con tamaños relativos que se adaptan a los dispositivos o a la anchura de otros elementos de la página. Para ello, indica el tamaño en porcentaje en vez de en píxeles:
<img data-src="holder.js/100%x90">
<img data-src="holder.js/728x20%">El único problema de las imágenes de relleno responsive es que muestran su tamaño en píxeles. Si quieres que muestren su tamaño en porcentaje, añade la propiedad textmode:literal:
<img data-src="holder.js/100%x90/textmode:literal">
<img data-src="holder.js/728x20%/textmode:literal">Imágenes de relleno de fondo
Las imágenes de relleno también se pueden generar como imagen de fondo de cualquier elemento. Para ello, aplica en primer lugar la clase holderjs (todo junto y sin punto) a cualquier elemento:
<div id="imagen" class="holderjs"></div>
<div id="anuncio" class="holderjs"></div>Después, aplica la propiedad background: url(...) utilizando la misma sintaxis que en los ejemplos mostrados anteriormente. La única diferencia es que tienes que añadir el carácter ? por delante de la URL:
#imagen { background: url("?holder.js/250x250") no-repeat; }
#anuncio { background: url("?holder.js/300x250/text:ANUNCIO") no-repeat; }