Crie imagens automaticamente para preencher espaços // Image placeholders

  • Autor Autor gful
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
gful

gful

Eta
Redactor
Verificación en dos pasos activada
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 😛8:.
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Gracias, muy util
 
Voltar
Topo