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_src = 'https://picsum.photos/1600/900?random=9999' %}
{% set image_src = image.src|default(placeholder_src) %}
{% set image_alt = image.alt|default(title) %}
{% set image_position = image_position|default('center') %}
<img class="block aspect-square h-full w-full bg-neutral-900 object-cover transition duration-500 ease-out group-hover:brightness-[1.2] object-position-{{image_position}}" src="{{ image_src }}" alt="{{ image_alt }}" />
