Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / Imagenes / Picsum Photos, imágenes de prueba, el Lorem Ipsum de las imágenes

Picsum Photos, imágenes de prueba, el Lorem Ipsum de las imágenes

abril 9, 2018 Por Oscar martin Deja un comentario

Cuando estamos haciendo una web nueva o preparando una funcionalidad en pruebas en muchas ocasiones necesitamos trabajar con imágenes de prueba para ver como queda.

Lo que solemos hacer es coger de internet cualquier imagen y perder tiempo en preparar unas imágenes que más adelante vamos a sustituir, es decir:

Perdemos el tiempo 😠 👎

Si esto que cuento te suena familiar, el tutorial de hoy te va a encantar 😄

Al igual que existe texto de prueba, el típico Lorem Ipsum, también han creado imágenes de prueba, qué podemos llamar de manera rápida.

Por ejemplo, a continuación tendría que aparecer una imagen de 700×400 píxeles aleatoria (si recargas la página verás una foto distinta):

imagen aleatoria

¿Cómo lo he hecho?
simplemente añadiendo el código siguiente:

<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random"> 

Ahora os lo voy a explicar con calma pero ¿no os parece maravilloso? A mi si 😉

Aquí tienes el tutorial en vídeo:

Suscríbete a mi canal:  

El servicio que estamos usando es Picsum.photos y aunque tiene una ayuda muy buena aquí os voy a explicar como funciona:

Llamar a una imagen de un tamaño concreto

Para hacerlo tan sólo tenemos que poner la url de su web y añadir al final el tamaño de la imagen, por ejemplo 700/400 si lo que queremos es una imagen de 700px de ancho por 400px de alto:

https://picsum.photos/200/300

Añadir la imagen en WordPress

La forma más sencilla es ir a Añadir Objeto dentro de nuestra entrada:

añadir objeto

Hacemos click en “Insertar desde URL” y listo:

WordPress insertar imagen url

Otra forma para hacerlo es por código con un poco de html, es muy sencillo y lo harás más rápido.

Te aseguras que tienes el editor en HTML y simplemente añades lo siguiente:

<img alt="imagen aleatoria" src="https://picsum.photos/700/400?random">

Llamar a una imagen escala de grises

Simplemente añadimos el parámetro “g”, aquí puedes ver como:

<img alt="imagen aleatoria" src="https://picsum.photos/g/700/400">

Resultado:

imagen aleatoria

Llamar a una imagen con ruido

Añadimos al final de la url”?blur”

<img alt="imagen aleatoria" src="https://picsum.photos/700/400/?blur">

Resultado:
imagen aleatoria

Yo he incorporado esta herramienta a mi trabajo diario, espero que a ti también te sea útil 😉

Publicado en: Imagenes, Trucos Etiquetado como: imágenes aleatorias, picsum

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR