Made a site using Radicle, Trellis and Sage 11

showcase
,
1

Site went live last friday on Sage 10 (which comes with Radicle). Just did a manual transition to Sage 11 based on the git commits.

Developed locally using Trellis as well. My personal and work PC’s run a Windows 11 + WSL 1 (rather than WSL 2) setup which makes the speed of Vagrant and VirtualBox reasonable.

My co-workers aren’t as tech-savvy and were struggling with WSL. So afaik, transitioning to Vite will make local development on just Windows possible.

2 Likes
2

Man this alone will be worth the switch in my eyes.

As for your site, I think it looks really nice. Almost entirely made in Tailwind. The images are a bit blurry though, maybe you should use picture or just img with imgsrc for that?

Here’s how I’ve done it using Cloudflare Images, but you can do it using larger images instead:

<picture>
    <source media="(max-width: 796px)" srcset="
        https://example.com/cdn-cgi/image/width=376,height=244,quality=80,format=auto,onerror=redirect,metadata=none/https://example.com/path/to/image.jpg  1x,
        https://example.com/cdn-cgi/image/width=752,height=488,quality=80,format=auto,onerror=redirect,metadata=none/https://example.com/path/to/image.jpg  2x
    ">
    <source media="(min-width: 797px)" srcset="
        https://example.com/cdn-cgi/image/width=557,height=346,quality=80,format=auto,onerror=redirect,metadata=none/https://example.com/path/to/image.jpg   1x,
        https://example.com/cdn-cgi/image/width=1114,height=692,quality=80,format=auto,onerror=redirect,metadata=none/https://example.com/path/to/image.jpg  2x
    ">
    <img src="https://example.com/cdn-cgi/image/quality=80,format=auto,onerror=redirect,metadata=none/https://example.com/path/to/image.jpg" decoding="async" alt="An image description" fetchpriority="high" loading="eager">
</picture>
3

Thanks for the feedback!

I’m pretty sure the images are blurry due to a plugin. It converts uploaded media to webp with a quality threshold (WebP Express). It also allows you to make wp_get_attachment_image calls return <picture> elements:

{84CC2828-D501-4930-BE73-D8966CB313AB}
{84CC2828-D501-4930-BE73-D8966CB313AB}637×150 8.58 KB

Besides that I’m also quite strict with the image sizing.

{!! wp_get_attachment_image($items[$i]["image"]["ID"], [500, 450], false, ["class" => "relative rounded-3xl object-cover z-20", "data-aos" => $i % 2 == 0 ? "slide-left" : "slide-right"]) !!}

So I’ll be doing some local experimenting with the image sizing / quality threshold.

4

Maybe our responsive pics plugin might come in handy for this:

1 Like