This post provides a quick overview of image and Open Graph image usage in Focus Bit. For more detailed information on how Astro handles images, please consult the documentation.
Embedding images
Astro, and by extension Focus Bit, 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.
src/content/posts/my-post.md
or
or
Images in MDX
In Astro (.astro) or MDX (.mdx) files, you can also use Astro’s built-in <Image> component.
src/pages/my-page.astro---
import logo from '@/assets/logo.svg'
import { Image } from 'astro:assets'
---
<Image alt="Focubit logo" src={logo} />Public images
In addition to local assets, we can also use images from the web.
src/pages/my-page.md
data-img-embed
For a nice embedding of images into the content, you can use the data-img-embed attribute, this will give the image a bordered, rounded appearance.
src/pages/my-page.md// embedded image
<img src="https://focusbit.io/preview.png" data-img-embed/>
<img src="https://focusbit.io//preview.png" data-img-embed="true"/>
// normal apperance
<img src="https://focusbit.io/preview.png"/>
<img src="https://focusbit.io/preview.png" data-img-embed="false"/>
Zoomable images
Starting from Focubit version 2.3.0, the data-action="zoom" attribute makes images zoomable on click, displaying them almost fullscreen with a blurred background.
src/pages/my-page.md<img src="https://focusbit.io/preview.png" data-img-embed data-action="zoom"/>Open Graph Images
Images and image URLs can be used in frontmatter, for instance as openGraphImage. To use a local asset, use:
src/content/posts/my-post.mdopenGraphImage: "@/assets/logo.svg"
or
openGraphImage: "../../assets/logo.svg"
or
openGraphImage: "src/assets/logo.svg"To use a public image, use:
src/content/posts/my-post.mdopenGraphImage: "https://focusbit.io/favicon.svg"Note that supplying openGraphImage is entirely optional. If a post (any file in src/content/posts) does not have an openGraphImage provided, Focubit 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, Focubit generates and uses a generic image that displays the site title and description on every page where none has been defined, looking like this:
