Add support for rendering images from Obsidian wikilinks

Author: EzraMarks

src/frontmatterImageEditorExtension.ts

@@ -12,19 +12,13 @@ import {
 } from "@codemirror/view";
 import FrontmatterImagePlugin from "./main";
 import { Pos, TFile } from "obsidian";
+import { getImageSrc, renderFrontmatterImage } from "./utils";
 
 export interface FrontmatterImageStateFieldValue {
     readonly activeFile: TFile;
     decorationSet?: DecorationSet;
 }
 
-export const renderFrontmatterImage = (src: string): HTMLElement => {
-    const img = document.createElement("img");
-    img.src = src;
-    img.classList.add("frontmatter-image");
-    return img;
-}
-
 export const frontmatterImageEditorExtension = (
     plugin: FrontmatterImagePlugin,
 ): StateField<FrontmatterImageStateFieldValue | undefined> => {
@@ -35,9 +29,9 @@ export const frontmatterImageEditorExtension = (
 
     const buildDecorationSet = (
         frontmatterPosition: Pos,
-        currentImageValue?: string,
+        resolvedImageSrc?: string,
     ) => {
-        if (!currentImageValue) return Decoration.none;
+        if (!resolvedImageSrc) return Decoration.none;
 
         const builder = new RangeSetBuilder<Decoration>();
         builder.add(
@@ -46,7 +40,7 @@ export const frontmatterImageEditorExtension = (
             Decoration.widget({
                 widget: new (class extends WidgetType {
                     toDOM(view: EditorView): HTMLElement {
-						return renderFrontmatterImage(currentImageValue);
+                        return renderFrontmatterImage(resolvedImageSrc);
                     }
                 })(),
             }),
@@ -69,29 +63,27 @@ export const frontmatterImageEditorExtension = (
             oldValue: FrontmatterImageStateFieldValue | undefined,
             transaction: Transaction,
         ): FrontmatterImageStateFieldValue | undefined => {
-			if (!oldValue) return;
+            if (!oldValue) return;
 
             if (!isLivePreview()) {
-				return { ...oldValue, decorationSet: undefined };
+                return { ...oldValue, decorationSet: undefined };
             }
 
             const cachedMetadata = plugin.app.metadataCache.getFileCache(oldValue.activeFile);
-            const frontmatterCache = cachedMetadata?.frontmatter;
             const frontmatterPosition = cachedMetadata?.frontmatterPosition;
-            if (!frontmatterCache || !frontmatterPosition) {
-				return { ...oldValue, decorationSet: undefined };
+            if (!frontmatterPosition) {
+                return { ...oldValue, decorationSet: undefined };
             }
 
-            const currentImageKey = plugin.settings.imageKeys.find(key => frontmatterCache[key]);
-            const currentImageValue = currentImageKey && frontmatterCache[currentImageKey];
+            const imageSrc = getImageSrc(oldValue.activeFile.path, plugin);
 
-			return {
-				...oldValue,
-				decorationSet:  buildDecorationSet(
-					frontmatterPosition,
-					currentImageValue,
-				)
-			};
+            return {
+                ...oldValue,
+                decorationSet: buildDecorationSet(
+                    frontmatterPosition,
+                    imageSrc,
+                )
+            };
         },
         provide: (
             field: StateField<FrontmatterImageStateFieldValue | undefined>,

src/main.ts

@@ -1,12 +1,13 @@
 import {
     App,
     MarkdownPostProcessorContext,
+    MarkdownRenderer,
     Plugin,
     PluginSettingTab,
-    Setting,
+    Setting
 } from "obsidian";
-
-import { frontmatterImageEditorExtension, renderFrontmatterImage } from "src/frontmatterImageEditorExtension";
+import { frontmatterImageEditorExtension, } from "src/frontmatterImageEditorExtension";
+import { getImageSrc, renderFrontmatterImage } from "./utils";
 
 interface FrontmatterImagePluginSettings {
     imageKeys: string[];
@@ -24,24 +25,19 @@ export default class FrontmatterImagePlugin extends Plugin {
 
         this.addSettingTab(new FrontmatterImageSettingTab(this.app, this));
 
-		// Register editor extension for editor view (live preview)
+        // Register editor extension for editor view (live preview)
         this.registerEditorExtension(frontmatterImageEditorExtension(this));
 
         // Register markdown post-processor for reading view
         this.registerMarkdownPostProcessor(
             (element: HTMLElement, context: MarkdownPostProcessorContext) => {
-				if (!element.hasClass("mod-frontmatter")) return;
-
-                const fileCache = this.app.metadataCache.getCache(context.sourcePath);
-                const frontmatter = fileCache?.frontmatter;
-                if (!frontmatter) return;
+                if (!element.hasClass("mod-frontmatter")) return;
 
-                const currentImageKey = this.settings.imageKeys.find(key => frontmatter[key]);
-                const currentImageValue = currentImageKey && frontmatter[currentImageKey];
-                if (!currentImageValue) return;
+                const imageSrc = getImageSrc(context.sourcePath, this);
+                if (!imageSrc) return;
 
                 const div = document.createElement("div");
-                const img = renderFrontmatterImage(currentImageValue);
+                const img = renderFrontmatterImage(imageSrc);
                 div.appendChild(img);
                 const br = document.createElement("br");
                 div.appendChild(br);
@@ -50,7 +46,7 @@ export default class FrontmatterImagePlugin extends Plugin {
         );
     }
 
-    onunload() {}
+    onunload() { }
 
     async loadSettings() {
         this.settings = Object.assign(
@@ -81,14 +77,14 @@ class FrontmatterImageSettingTab extends PluginSettingTab {
         new Setting(containerEl)
             .setName("YAML keys")
             .setDesc(
-                "Frontmatter keys that contain image src; one per line. Only the first populated key's image will be rendered.",
+                "Frontmatter keys that contain image source; one per line. Only the first populated key's image will be rendered.",
             )
             .addTextArea((text) =>
                 text
                     .setPlaceholder("Enter your keys")
                     .setValue(this.plugin.settings.imageKeys.join("\n"))
                     .onChange(async (value) => {
-                        this.plugin.settings.imageKeys =  value.split("\n").map(key => key.trim()).filter(key => key.length > 0);
+                        this.plugin.settings.imageKeys = value.split("\n").map(key => key.trim()).filter(key => key.length > 0);
                         await this.plugin.saveSettings();
                     }),
             );

src/utils.ts

@@ -0,0 +1,38 @@
+import FrontmatterImagePlugin from "./main";
+
+export const getImageSrc = (activeFilePath: string, plugin: FrontmatterImagePlugin): string | undefined => {
+    const fileCache = plugin.app.metadataCache.getCache(activeFilePath);
+    const frontmatter = fileCache?.frontmatter;
+    if (!frontmatter) return;
+
+    let rawValue = plugin.settings.imageKeys
+        .map(key => frontmatter[key])
+        .find(value => !!value);
+
+    // Extract image from wikilink format: [[img.jpg|...]] or [[img.jpg]]
+    const wikilinkMatch = rawValue.match(/^\[\[([^|\]]+)(?:\|[^\]]+)?\]\]$/);
+    if (wikilinkMatch) {
+        rawValue = wikilinkMatch[1];
+    }
+
+     // Check if it's already a full URL or path
+    if (rawValue.startsWith('http') || rawValue.startsWith('/') || rawValue.startsWith('data:')) {
+        return rawValue;
+    }
+    
+    // Try to resolve as an Obsidian file
+    const file = plugin.app.metadataCache.getFirstLinkpathDest(rawValue, activeFilePath);
+    if (file) {
+        return plugin.app.vault.getResourcePath(file);
+    }
+    
+    // If we can't resolve it, return the original value
+    return rawValue;
+};
+
+export const renderFrontmatterImage = (src: string): HTMLElement => {
+    const img = document.createElement("img");
+    img.src = src;
+    img.classList.add("frontmatter-image");
+    return img;
+}