# llms.txt

# WebP Images Carrd Plugin Template
description: >
  A free Carrd plugin template that allows users to display externally
  hosted images inside Carrd Image and Gallery elements. It enables
  support for modern image formats such as WebP and AVIF by replacing
  the image sources with externally hosted image URLs. Users can
  hotlink images from external hosting services, CDNs, or their own
  servers without uploading the original images directly to Carrd.
  The plugin supports both individual Image elements and Gallery
  elements, including selective replacement of specific gallery
  images. It requires a Pro Standard or higher Carrd account to
  implement the necessary custom code using Embed elements.

links:
  - Demo & Site: https://webp-images.carrd.co
  - Author: https://x.com/jasonleowsg
  - Plugins: https://plugins.carrd.co

## Implementation Details
- Setup: Download the free template, copy the code from the 'Custom image' Embed element, and paste it into an Embed element on your Carrd site. Set the Embed element to 'Inline' and uncheck 'Defer script tags'. Update the imageUpdates configuration with your Image element IDs and externally hosted image URLs before publishing.
- Image Customisation: Locate the imageUpdates array in the JavaScript code. Update the 'id' property to match the Carrd Image element ID (e.g., 'image01') and the 'newSrc' property to the direct URL of your externally hosted WebP, AVIF, or other supported image format. Multiple Image elements can be configured in the same array.
- Gallery Support: For Carrd Gallery elements, copy the code from the 'Custom gallery' Embed element instead. Locate the galleryUpdates array and update the Gallery element ID, image index positions, and externally hosted image URLs.
- Gallery Customisation: Use zero-based indexing to select which Gallery images to replace. For example, index 0 refers to the first image, index 1 to the second, and index 2 to the third. Individual images can be replaced without modifying the entire Gallery.
- Placeholder Images: Use a small placeholder image in the Carrd site builder for each Image element. A downloadable placeholder is available on the plugin website at https://webp-images.carrd.co/#imageplaceholder.
- Image Hosting: Images must be hosted externally with publicly accessible direct image URLs. The hosting provider must allow hotlinking. Compatible hosting options include image hosting services, CDNs, and self-hosted servers.
- Publishing: After configuring the image URLs and element IDs, publish your Carrd site to activate the image replacements.