Astro component that makes working with ixmage.com easier.

This component has been refactored to allow usage of other "Image CDN" solutions.

The requirement that permits a service to be able to fit into this component, as a new provider, is that the service can transform images using a querystring API.

i.e. &width=200&height=120 or ../w_200,h_120/.. or similar.

The provider model only needs to implement and export one function getImage(options); this function returns the correct URL to the image.

Current functional providers:

• ixmage.com the first implemented provider ~ April 14.
• cloudinary v1.0 ~ April 30.
  • more details
• sanity.io ~ April 30.
• imgix.com ~ May 3.
• imagekit.io ~ May 3.
• gumlet.com ~ May 3.

🧁 This component will...

• Most of these services will put your images on a CDN,
• optimize images for size,
• even turn them into webp when appropriate.

npm install astro-ixmage --save-dev

This is a build-time component that will render out <img> markup to the client.

Import into your other components or pages
(or .md files using the setup field)

You are required to create a file named ixmage.config.mjs in your project root folder. The file will be a sibling to astro.config.mjs

The file contents will be

export default {
  "provider": "ixmage"
};

where you can specify the default provider like ixmage or cloudinary, etc. Anytime you use the Ixmage component without specifying the provider prop, it will default to this value.

import { Ixmage } from 'astro-ixmage';

<Ixmage token="your-token" src="https://image-url.format" alt="An optimized image" />

setup: |
  import { Ixmage } from 'astro-ixmage';

<Ixmage token="your-token" src="https://image-url.format" alt="An optimized image" />

The examples below are using an image URL to the respective service.

To see a page using the actual npm package for astro-ixmage go to this blog post.

My image accessed thru the ixmage service

<Ixmage token="TQKkCpGYGK" w="200" h="200"
  bgc="_00ff00" flop={true}
  src="bucket1/demo/wall.jpg"
  alt="demo wall image"
/>

I uploaded the same image to my cloudinary account. Initally, it gave my image a name with an id, but I was able to rename it just "wall.jpg"

<Ixmage token="batousai" width="200" height="200"
  provider="cloudinary" bgc="00ff00" crop="lpad" flop={true} 
  src="demo/wall.jpg"
  alt="demo wall image"
/>

I also uploaded the image to a sanity.io account. It gave it a cryptic name, and I could not change it. Also, I could not get the background color to work despite following their documentation.

Sanity gave me a UID to use for my account, which I am using as token.

<Ixmage token="qg0lypr0" w="200" h="200"
  provider="sanity" bgc="ff00ff00" flip="h" fit="fill"
  src="4450124c33af1267f4def68cc220c7c0ffb56185-1200x900.jpg"
  alt="demo wall image"
/>

<Ixmage token="ixmage" width="200" height="200"
  provider="imgix" 
  fill-color="lime" flip="h" fit="fill" fill="solid"
  src="demo/wall.jpg"
  alt="demo wall image"
/>

<Ixmage token="ixmage" width="200" height="200"
  provider="gumlet" 
  fill-color="lime" flip="h" mode="fill" fill="solid"
  src="demo/wall.jpg"
  alt="demo wall image"
/>

<Ixmage token="ixmage" width="200" height="200"
  provider="imagekit" bg="lime" flip="h" cm="pad_resize"
  src="demo/wall_qdUth8otg.jpg"
  alt="demo wall image"
/>

• srcset for image switching between devices
• 🤔