Include image metadata from content source
vimtor opened this issue · comments
Hi there! Can image metadata be included when extracted from content instead of front matter?
I need the image width
and height
in the MDX component for the Next.js Image component. Currently, only src
and alt
properties are available.
Also, is it possible to import images directly for use with a custom component like this:
import image from './example.png'
# Title
See the image below:
<Figure>
<FigureImage src={image} alt="" />
<FigureCaption>
Caption
</FigureCaption>
</Figure>
First of all, Velite does not intend to support the dynamic import method, but now there are plans to process the local image metadata referenced in the content.
Got it, @zce!
Velite looks really promising. In case anyone is interested, I finally managed to accomplish this using RSC:
import getImageSize from "image-size";
import { Figure, FigureImage, FigureCaption } from "./components";
const useMDXComponent = (code: string) => {
const fn = new Function(code);
return fn({ ...runtime }).default;
};
interface MdxProps {
code: string;
components?: Record<string, React.ComponentType>;
}
export const MDXContent = async ({ code, components }: MdxProps) => {
const Component = useMDXComponent(code);
return (
<Component
components={{
...components,
img: async ({ src, alt }: { src: string; alt?: string }) => {
const location = path.join(process.cwd(), "public", src);
const { width, height } = getImageSize(location);
return (
<Figure>
<FigureImage
src={src}
alt={alt ?? ""}
width={width}
height={height}
/>
{alt && <FigureCaption>{alt}</FigureCaption>}
</Figure>
);
},
}}
/>
);
};
Yes, this is a good idea at the moment, but I still plan to put getting metadata into build to improve runtime efficiency
I did something hacky where you embed the info via a rehype plugin: https://github.com/Adriel-M/adriel.dev/blob/main/lib/remarkPlugins/RemarkImgToJsx.ts (originally from https://github.com/timlrx/pliny/blob/main/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)
I also bundled everything in the images
folder https://github.com/Adriel-M/adriel.dev/blob/main/lib/Images.ts#L2 and swap the source to that bundled path: https://github.com/Adriel-M/adriel.dev/blob/main/components/Image.tsx#L7
I did this to actually have the image have a non 0 max age cache-control for nextjs: (https://nextjs.org/docs/app/building-your-application/optimizing/static-assets#caching)
If you're not on nextjs, just the first paragraph seems to be the useful bit. I just came from contentlayer and I'm still exploring the capabilities of velite.
I did something hacky where you embed the info via a rehype plugin: Adriel-M/adriel.dev@
main
/lib/remarkPlugins/RemarkImgToJsx.ts (originally from timlrx/pliny@main
/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)
At present, it is a good way to use the remark/rehipe plug-in, but I plan to integrate image metadata into the built-in rehipeCopyLinkedFiles
/ remarkCopyLinkedFiles
plug-in
If you use Next.js, you can also get a better experience by optimizing the pictures in building with the custom image loader.
There is a tool for my own use: https://github.com/zce/zimg
import { ImageLoader } from 'next/image'
const CustomLoader: ImageLoader = ({ src, width, quality }) => {
if (process.env.NODE_ENV !== 'production') return src + '?dev'
// do not optimize svgs and gifs
if (/\.(svg|gif)$/.test(src)) return src + '?uo'
// pre-optimize images with zimg in production build
if (/^\//.test(src)) return src.replace(/\.[a-z]+$/i, `.${width}.webp`)
return `${src}?w=${width}&q=${quality ?? 75}`
}
export default CustomLoader
I do this myself
Great!
It works with my bundling approach: https://github.com/Adriel-M/adriel.dev/pull/166/files#diff-5acfbc6c5ec1739b3121c7454d949384b38bcbdffa4645a0b002e52521bed26eR3
Using this since cloudflare doesn't have image optimization. Thanks a lot!
Roughly how much time does it add to your builds?
Here comes another idea which use the Velite built-in getImageMetadata and remarkPlugins. It's a fork from @Adriel-M 's work.