Often, I want to get started building a website before the final photography is ready. I find that using placeholder imagery gives a much better sense of how a page feels in the browser, while also making it easier to fine-tune loading states and scroll-based animations. It’s certainly more realistic than duplicating the same placeholder image throughout a site.
Rather than downloading images and cluttering the CMS with temporary assets, I’ve recently started pulling in placeholder imagery on the fly. The following snippet, built with Timber/Twig and Tailwind, does the job nicely, so I thought I’d share it.
{% set image = image|default({}) %}
{% set placeholder_seed = placeholder_seed|default(random()) %}
{% set placeholder_src = 'https://picsum.photos/seed/' ~ placeholder_seed ~ '/1600/900' %}
{% set image_src = image.src|default(placeholder_src) %}
{% set image_alt = image.alt|default(title) %}
<img class="aspect-video w-full bg-neutral-900 object-cover transform-gpu transition duration-500 ease-out group-hover:brightness-[1.2]" src="{{ image_src }}" alt="{{ image_alt }}" />