Guide: Using Image Components in MDX for Astro | Writ In Light | Writ In Light

Switching to MDX

Wanted to use a more modular method to import images in blog articles. Found with general .md files text was easy but images were a bit more difficult to style. With .mdx I can directly import the image in as .js

Using Image Components in MDX

This post acts as a template for how to utilise multiple methods to inject images into MDX formatted documents, utilising placehold.co

Full Width Image

A full width image example
astro 
<JournalImage
variant="full"
src="./images/my-image.jpg"
alt="Description"
/>

Inline Image

An inline image example
astro 
<JournalImage
variant="inline"
src="./images/my-image.jpg"
alt="Description"
/>

Float Left with Text

Float left image

This text wraps around the floated image. You can see how the image is positioned to the left and the text flows around it. This is great for creating more dynamic layouts in your blog posts.

astro 
<JournalImage
variant="float-left"
src="./images/my-image.jpg"
floatSize="w-1/3"
alt="Description"
/>

Captioned Image

Captioned image example
A beautiful sunset over the mountains
astro 
<JournalImage
variant="caption"
src="./images/my-image.jpg"
caption="Caption text here."
alt="Description"
/>

Image Pair

Before the change
Before the change
After the change
After the change
astro 
<JournalImage variant="pair" images={[
{ src: "./images/before.jpg", caption: "Before" },
{ src: "./images/after.jpg",  caption: "After"  }
]} />
astro 
<JournalImage variant="gallery" images={[
{ src: "./images/image-1.jpg" },
{ src: "./images/image-2.jpg" },
{ src: "./images/image-3.jpg" }
]} />

Pull Quote

“A charming pull quote.”
astro 
<JournalImage
variant="pullquote"
caption="Quote text here."
/>

Initial Colour Palette

Canvas

Dust

Ink

astro 
<JournalImage variant="color-palette" images={[
{ src: "#hex", caption: "Name" },
{ src: "#hex", caption: "Name" },
{ src: "#hex", caption: "Name" }
]} />

Before & After

Before
Before
After
After
astro 
<JournalImage variant="before-after" images={[
{ src: "./images/before.jpg" },
{ src: "./images/after.jpg"  }
]} />

Regular Markdown Still Works

You can still use regular markdown alongside the components:

  • Bold text and italic text
  • Lists work normally
  • Links function as expected
  • Code blocks work too:
console.log("Hello, MDX!");

Benefits of MDX

  1. Component Reusability: Import and use any component in your blog posts
  2. Interactive Content: Add interactive elements to your posts
  3. Consistent Styling: Use your design system components
  4. Better Organization: Keep your content and presentation logic separate

Now you can create rich, interactive blog posts with custom components while maintaining the simplicity of markdown!