Crea imágenes automáticamente para rellenar espacios // Image placeholders

iamfrontend Seguir

Eta
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
10 Oct 2010
Mensajes
1.417
Hoy les quiero mostrar algo que uso mucho, al momento de trabajar, ya que soy Desarrollador Web.

Cuando estamos haciendo una página web, a veces necesitamos llenar espacios, por ejemplo el de un bloque de adsense que irá en cierta zona de nuestra web, pero es muy tedioso, creo yo, ir a photoshop y hacer una imagen de ciertas dimensiones para llenar dicho espacio.

Existen muchas formas de hacer esto en solo segundos, librerías para crear imágenes del lado del cliente o servicios que generan automáticamente la imagen con tan solo usar una url con parámetros.



Holder.js // Es una librería de Javascript.

¿Cómo funciona?

Simplemente debemos escribir en el apartado del src="" de nuestra imagen holder.js/300x200, las dimensiones en ancho y alto de nuestra imagen y listo.

Ejemplo: <img src="holder.js/300x200">

Página oficial



Placehold.it // Es un script que funciona por parámetros, en el cual no debemos agregar librería algúna a nuestro código.

¿Cómo funciona?

Placehold, funciona mediante parámetros que nos permiten agregar texto, color, tamaño y formato.

Definir tamaño de imagen
Simplemente agregamos a la url las dimensiones como parámetro, primero ancho y después alto.

Ejemplo: Placehold.it - Quick and simple image placeholders350x150



Agregar texto a la imagen
Para añadirle texto a la imagen, demos agregar como parámetro: &text=nuestro+texto

Ejemplo: http://placehold.it/350x150&text=nuestro+texto



Definir formato de imagen
Podemos definir un formato de imagen, ya sea JPG, PNG, GIF, JPEG. Añadiengo al final &.formato

Ejemplo: http://placehold.it/350x150&text=nuestro+texto&.png



Añadir color
El script también nos permite añadir color a nuestra imagen, agregando después de las dimensiones /primercolor/segundocolor

Ejemplo: http://placehold.it/350x150/ffffff/000000&text=nuestro+texto



Página oficial



:encouragement: Saludos a todos, espero les sirva :p8:.
 
Última edición:
Arriba