🚀 astro-ixmage 🖼️

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.

Providers

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.

Installation

npm install astro-ixmage --save-dev

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

Usage

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

Setup of default values

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.

frontmatter setup

Astro Components

import { Ixmage } from 'astro-ixmage';

In your component body

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

Markdown Files

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

In your markdown content

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

Examples

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.

Original image, sized 320 width

ixmage

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"
/>

cloudinary

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"
/>

sanity.io

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"
/>

imgix

<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"
/>

gumlet

<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"
/>

imagekit

<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"
/>

To Dos

• srcset for image switching between devices
• 🤔