Adding support for custom HTML markup

[seesjays]

Users can now control how the plugin replaces image nodes with HTML markup in the config. This is helpful for people who want to have a different set of attributes, modify alt text, set custom classes, want a different style of markup for their output, and other use cases.

Default Markup

export function defaultMarkup({ src, sources, width, height, alt }: MarkupValues)
{
    return `
        <picture>
        ${sources}
        <img
            src="${src}"
            width="${width}"
            height="${height}"
            alt="${alt}"
            loading="lazy"
            decoding="async">
    </picture>`;
}

Writing your own markup function.

Just create a function that returns a template string with the HTML markup you need. It'll get called in the plugin with the following values passed into the props as an object.

astro-config-mjs

import { defineConfig } from 'astro/config';
import { remarkEleventyImage } from "astro-remark-eleventy-image";

function customMarkup({ src, width, height, alt, format, sources, isRemote, mdFilePath }) {
    return `
        <picture>
        ${sources}
        <img
            src="${src}"
            width="${width}"
            height="${height}"
            alt="${alt}"
            loading="lazy"
            decoding="async">
    </picture>`;
}

// https://astro.build/config
export default defineConfig({
  markdown: {
    remarkPlugins: [remarkEleventyImage],
    remarkImages: {
      customMarkup: customMarkup
    }
  }
});

type MarkupValues = {
    src: string,
    width: number,
    height: number,
    alt: string,
    format: string,
    sources: string,
    isRemote: boolean,
    mdFilePath: string,
}

src: The path to the image in your outDir. Very recommended to NOT modify this and pass it into your <img> tag as is. (see the defaultMarkup)

width: The width of the optimized image. Keep in mind that this will be the same as the width of the original image.

height: The height of the optimized image. Keep in mind that this will be the same as the height of the original image.

alt: The alt text associated with the image in Markdown.

format: The base format of the optimized image. By default this should be jpeg for local images and whatever format the image came with for remote images.

sources: A string containing the proper <source> tag markup for the image (the outlined markup).

isRemote: A Boolean that's true if the image was originally remote (don't worry about this if you don't have remoteImages enabled.

mdFilePath: The path to the Markdown file referencing this image You could use Node's path.basename to get the md file name from this, among other things you might find a use for.

Custom Markup Examples (astro.config.mjs)

Just an <img> node with the optimized image + alt, nothing else

In case you want some simpler markup

function customMarkup({ src, width, height, alt, format, sources, isRemote, mdFilePath }) {
	return `
	<img
		src="${src}"
		width="${width}"
		height="${height}"
		alt="${alt}"
		loading="lazy"
		decoding="async">
	`;
}

Removing the width and height attributes from the <img> node

@scottaw66's use case

export function customMarkup({ src, sources, width, height, alt }: MarkupValues)
{
    return `
        <picture>
        ${sources}
        <img
            src="${src}"
            alt="${alt}"
            loading="lazy"
            decoding="async">
    </picture>`;
}

Adding a class

export function customMarkup({ src, sources, width, height, alt }: MarkupValues)
{
    return `
        <picture class="custom-class">
        ${sources}
        <img
            src="${src}"
            alt="${alt}"
            loading="lazy"
            decoding="async">
    </picture>`;
}