jueves, 6 de febrero de 2014

Holder.js fluid image

La libreria holder.js que Bootstrap ya incluye por default, nos permite generar placeholders mediante javascript. Cuando la imagen que queremos generar es "fluid", holder.js pone las dimensiones de la imagen por default como texto.
Para cambiar este comportamiento y hacer que holder.js genere la imagen con nuestro texto, una forma es:

 function render(mode, el, holder, src) {
                        ...
                        holder.theme.text = holder.text; //Esto hara que la imagen se genere con nuestro texto.
el.holderData = holder;
fluid_images.push(el);
fluid_update(el);
                        ...

<img data-src='holder.js/100%x100/#fff:#000/text:Hola'/>