James Raymond Thompson This post provides a quick overview of image and Open Graph image usage in Nordlys. For more detailed information on how Astro handles images, please consult the documentation.
import logo from ’@/assets/logo.svg’ import { Image } from ‘astro:assets’
Embedding images
Astro, and by extension Nordlys, offers various ways to use images in your content.
Images in Markdown
In all Markdown (.md) files, images can be embedded using the usual syntax. Astro will resolve local assets as the image source.
or
or
Images in MDX
In Astro (.astro) or MDX (.mdx) files, you can also use Astro’s built-in <Image> component.
---
import logo from '@/assets/logo.svg'
import { Image } from 'astro:assets'
---
<Image alt="Nordlys logo" src={logo} />Public images
In addition to local assets, we can also use images from the public directory or from the web.
From the `public` folder:
From the web:
Open Graph Images
Images and image URLs can be used in frontmatter, for instance as openGraphImage. To use a local asset, use:
openGraphImage: "@/assets/logo.svg"
or
openGraphImage: "../../assets/logo.svg"
or
openGraphImage: "src/assets/logo.svg"To use a public image, use:
openGraphImage: "/favicon.svg"
or
openGraphImage: "https://nordlys.fjelloverflow.dev/favicon.svg"Note that supplying openGraphImage is entirely optional. If a post (any file in src/content/posts) does not have an openGraphImage provided, Nordlys will automatically generate and use a basic template, displaying the post title, description, author, and website title, which looks like this:
Similarly, when there is no global openGraphImage configured in theme.config.ts, Nordlys generates and uses a generic image that displays the site title and description on every page where none has been defined, looking like this: