.webp images in Carrd
A FREE Carrd plugin template to use externally hosted images and hotlink them inside Image elements in your Carrd site. Yes, that means you can use your own webp. and .avif images in Carrd!
Made by @jasonleowsg. Tutorial here →.
Images from picsum.photos
Image elements with externally hosted images:
Gallery element with externally hosted images:
TUTORIAL
Here's how to set up this plugin in your Carrd site:
– Download the template– Copy the code from the Embed element titled "Custom image"– Set the Embed element in your Carrd site to Inline - remember to uncheck "Defer script tags"– Look for this code at the top:
<script>
// --- Configuration: single image containers ---
const imageUpdates = [
{ id: "image01", newSrc: "https://picsum.photos/200?random=1" },
{ id: "image02", newSrc: "https://picsum.photos/200?random=2" },
{ id: "image03", newSrc: "https://picsum.photos/200?random=3" }
];
– Update the id and the newSrc with the respective element IDs of the Image elements, and URLs of your externally hosted images– You can use a small image file as a placeholder for the Image elements in your site Builder. Download one here.– Hit publish and you're done!
--------------------
– NOTE: If you're using Gallery elements, copy the code from the Embed element "Custom gallery" instead.– Look for this code at the top:
<script>
// --- Configuration: gallery containers ---
const galleryUpdates = [
{
id: "gallery01",
updates: [
{ index: 0, newSrc: "https://picsum.photos/200?random=11" },
{ index: 1, newSrc: "https://picsum.photos/200?random=12" },
{ index: 2, newSrc: "https://picsum.photos/200?random=13" }
]
},
];
– Update the index for the index position of the image in the Gallery element. For example, if the image you want to replace is the first image, use "0". If it's the 3rd image, use "2". So yes, you can skip images in the Gallery element!– Update the newSrc with the respective URLs of your externally hosted images.– Hit publish and you're done!
