Merge pull request #6 from jparkerweb/tweaks

add y-position option

Author: jparkerweb

README.md

@@ -6,8 +6,11 @@ Pexels Banner is a plugin for Obsidian that allows you to automatically add beau
 
 - Automatically fetch and display banner images from Pexels based on keywords
 - Use direct URLs for custom images
+- Use local images from your vault
+- Use Obsidian internal links to images
 - Customize image size and orientation
 - Set default keywords for when no specific keyword is provided
+- Adjust vertical position of the banner image globally or per note
 - Seamless integration with Obsidian's interface
 
 ## Installation
@@ -21,19 +24,38 @@ Pexels Banner is a plugin for Obsidian that allows you to automatically add beau
 
 1. Obtain a free API key from [Pexels](https://www.pexels.com/api/)
 2. In Obsidian, go to Settings > Pexels Banner and enter your API key
-3. In any note, add a `pexels-banner` field to the frontmatter with keywords for the desired image or a direct URL:
-    ```yaml
-    ---
-    pexels-banner: blue turtle
-    ---
+3. In any note, add a `pexels-banner` field to the frontmatter with keywords for the desired image, a direct URL, a path to a local image, or an Obsidian internal link:
 
-    # Or use a direct URL:
+```yaml
+---
+pexels-banner: blue turtle
+---
 
-    ---
-    pexels-banner: https://example.com/image.jpg
-    ---
-    ```
-4. The plugin will automatically fetch and display a relevant banner image at the top of your note
+# Or use a direct URL:
+
+---
+pexels-banner: https://example.com/image.jpg
+---
+
+# Or use a local image:
+
+---
+pexels-banner: /path/to/local/image.jpg
+---
+
+# Or use an Obsidian internal link:
+
+---
+pexels-banner: [[path/to/internal/image.jpg]]
+---
+
+# Specify a custom y-position for the image (0-100):
+
+---
+pexels-banner: nature
+pexels-banner-y-position: 30
+---
+```
 
 ## Configuration
 
@@ -43,6 +65,9 @@ In the plugin settings, you can customize:
 - Image orientation (landscape, portrait, square)
 - Number of images to fetch (1-50)
 - Default keywords for when no specific keyword is provided
+- Global y-position of the banner image (0-100)
+
+The global y-position can be overridden on a per-note basis using the `pexels-banner-y-position` frontmatter field.
 
 ## Example Note Screenshot
 

src/main.js

@@ -5,7 +5,8 @@ const DEFAULT_SETTINGS = {
     imageSize: 'medium',
     imageOrientation: 'landscape',
     numberOfImages: 10,
-    defaultKeywords: 'nature,abstract,landscape,technology,art,cityscape,wildlife,ocean,mountains,forest,space,architecture,food,travel,science,music,sports,fashion,business,education,health,culture,history,weather,transportation,industry,people,animals,plants,patterns'
+    defaultKeywords: 'nature,abstract,landscape,technology,art,cityscape,wildlife,ocean,mountains,forest,space,architecture,food,travel,science,music,sports,fashion,business,education,health,culture,history,weather,transportation,industry,people,animals,plants,patterns',
+    yPosition: 50 // Add this line: default to 50% (center)
 };
 
 module.exports = class PexelsBannerPlugin extends Plugin {
@@ -17,6 +18,7 @@ module.exports = class PexelsBannerPlugin extends Plugin {
         lastRequestTime: 0,
         minInterval: 1000 // 1 second between requests
     };
+    lastYPositions = new Map();
 
     async onload() {
         await this.loadSettings();
@@ -73,9 +75,11 @@ module.exports = class PexelsBannerPlugin extends Plugin {
         if (activeLeaf && activeLeaf.view.file === file) {
             const frontmatter = this.app.metadataCache.getFileCache(file)?.frontmatter;
             const newKeyword = frontmatter && frontmatter['pexels-banner'];
+            const newYPosition = frontmatter && (frontmatter['pexels-banner-y-position'] || frontmatter['pexels-banner-y']);
             const oldKeyword = this.lastKeywords.get(file.path);
+            const oldYPosition = this.lastYPositions.get(file.path);
 
-            if (newKeyword !== oldKeyword) {
+            if (newKeyword !== oldKeyword || newYPosition !== oldYPosition) {
                 await this.updateBanner(activeLeaf.view, true);
             }
         }
@@ -91,17 +95,29 @@ module.exports = class PexelsBannerPlugin extends Plugin {
     async updateBanner(view, isContentChange) {
         const frontmatter = this.app.metadataCache.getFileCache(view.file)?.frontmatter;
         const contentEl = view.contentEl;
-        await this.addPexelsBanner(contentEl, { frontmatter, file: view.file, isContentChange });
+        const customYPosition = frontmatter && (frontmatter['pexels-banner-y-position'] || frontmatter['pexels-banner-y']);
+        const yPosition = customYPosition !== undefined ? customYPosition : this.settings.yPosition;
+        
+        await this.addPexelsBanner(contentEl, { 
+            frontmatter, 
+            file: view.file, 
+            isContentChange,
+            yPosition
+        });
+
+        // Update the lastYPositions Map
+        this.lastYPositions.set(view.file.path, yPosition);
     }
 
     async addPexelsBanner(el, ctx) {
-        const { frontmatter, file, isContentChange } = ctx;
+        const { frontmatter, file, isContentChange, yPosition } = ctx;
         if (frontmatter && frontmatter['pexels-banner']) {
             let input = frontmatter['pexels-banner'];
 
-            // If input is an array, try to get the first string element
+            // Handle the case where input is an array of arrays
             if (Array.isArray(input)) {
-                input = input.flat().find(item => typeof item === 'string') || '';
+                // Reconstruct the Obsidian link format
+                input = `[[${input.flat(Infinity).join('')}]]`;
             }
 
             const inputType = this.getInputType(input);
@@ -129,34 +145,33 @@ module.exports = class PexelsBannerPlugin extends Plugin {
                 }
             }
 
-            if (imageUrl) {
-                // Find the appropriate parent elements
-                const previewView = el.querySelector('.markdown-preview-view');
-                const sourceView = el.querySelector('.markdown-source-view');
+            // Find the appropriate parent elements
+            const previewView = el.querySelector('.markdown-preview-view');
+            const sourceView = el.querySelector('.markdown-source-view');
 
-                // Remove existing banners if present
-                const existingBanners = el.querySelectorAll('.pexels-banner-image');
-                existingBanners.forEach(banner => banner.remove());
+            // Remove existing banners if present
+            const existingBanners = el.querySelectorAll('.pexels-banner-image');
+            existingBanners.forEach(banner => banner.remove());
 
-                // Create the banner div
-                const bannerDiv = createDiv({ cls: 'pexels-banner-image' });
-                bannerDiv.style.backgroundImage = `url('${imageUrl}')`;
+            // Create the banner div
+            const bannerDiv = createDiv({ cls: 'pexels-banner-image' });
+            bannerDiv.style.backgroundImage = `url('${imageUrl}')`;
+            bannerDiv.style.backgroundPosition = `center ${yPosition}%`;
 
-                // Insert the banner div in the appropriate locations
-                if (previewView) {
-                    previewView.prepend(bannerDiv.cloneNode(true));
-                }
-                if (sourceView) {
-                    const cmSizer = sourceView.querySelector('.cm-sizer');
-                    if (cmSizer) {
-                        cmSizer.prepend(bannerDiv.cloneNode(true));
-                    } else {
-                        sourceView.prepend(bannerDiv.cloneNode(true));
-                    }
+            // Insert the banner div in the appropriate locations
+            if (previewView) {
+                previewView.prepend(bannerDiv.cloneNode(true));
+            }
+            if (sourceView) {
+                const cmSizer = sourceView.querySelector('.cm-sizer');
+                if (cmSizer) {
+                    cmSizer.prepend(bannerDiv.cloneNode(true));
+                } else {
+                    sourceView.prepend(bannerDiv.cloneNode(true));
                 }
-
-                el.classList.add('pexels-banner');
             }
+
+            el.classList.add('pexels-banner');
         } else {
             // Remove the banners if 'pexels-banner' is not in frontmatter
             const existingBanners = el.querySelectorAll('.pexels-banner-image');
@@ -239,21 +254,15 @@ module.exports = class PexelsBannerPlugin extends Plugin {
     }
 
     getInputType(input) {
-        // If input is an array, try to get the first string element
-        if (Array.isArray(input)) {
-            input = input.flat().find(item => typeof item === 'string') || '';
-        }
-
-        // Check if input is a string
         if (typeof input !== 'string') {
             return 'invalid';
         }
 
-        // Trim the input
-        input = input.trim();
+        // Trim the input and remove surrounding quotes if present
+        input = input.trim().replace(/^["'](.*)["']$/, '$1');
 
         // Check if it's an Obsidian internal link
-        if (input.match(/^\[\[.*\]\]$/)) {
+        if (input.includes('[[') && input.includes(']]')) {
             return 'obsidianLink';
         }
 
@@ -274,8 +283,10 @@ module.exports = class PexelsBannerPlugin extends Plugin {
     }
 
     getPathFromObsidianLink(link) {
-        // Remove the [[ and ]] from the link
-        const innerLink = link.slice(2, -2);
+        // Remove the [[ from the beginning of the link
+        let innerLink = link.startsWith('[[') ? link.slice(2) : link;
+        // Remove the ]] from the end if it exists
+        innerLink = innerLink.endsWith(']]') ? innerLink.slice(0, -2) : innerLink;
         // Split by '|' in case there's an alias, and take the first part
         const path = innerLink.split('|')[0];
         // Resolve the path within the vault
@@ -290,11 +301,20 @@ module.exports = class PexelsBannerPlugin extends Plugin {
                 const blob = new Blob([arrayBuffer], { type: `image/${file.extension}` });
                 return URL.createObjectURL(blob);
             } catch (error) {
+                console.error('Error reading vault image:', error);
                 return null;
             }
         }
         return null;
     }
+
+    updateAllBanners() {
+        this.app.workspace.iterateAllLeaves(leaf => {
+            if (leaf.view.getViewType() === "markdown") {
+                this.updateBanner(leaf.view, false);
+            }
+        });
+    }
 }
 
 class PexelsBannerSettingTab extends PluginSettingTab {
@@ -398,32 +418,50 @@ class PexelsBannerSettingTab extends PluginSettingTab {
                 textarea.style.height = '100px';
             });
 
+        new Setting(mainContent)
+            .setName('Image Vertical Position')
+            .setDesc('Set the vertical position of the image (0-100)')
+            .addSlider(slider => slider
+                .setLimits(0, 100, 1)
+                .setValue(this.plugin.settings.yPosition)
+                .setDynamicTooltip()
+                .onChange(async (value) => {
+                    this.plugin.settings.yPosition = value;
+                    await this.plugin.saveSettings();
+                    this.plugin.updateAllBanners();
+                })
+            );
+
         // How to use section
         new Setting(mainContent)
             .setName('How to use')
             .setHeading();
 
         const instructionsEl = mainContent.createEl('div', {cls: 'pexels-banner-section'});
-        instructionsEl.createEl('p', {text: 'Add a "pexels-banner" field to your note\'s frontmatter with keywords for the image you want, or a direct URL to an image.'});
+        instructionsEl.createEl('p', {text: 'Add a "pexels-banner" field to your note\'s frontmatter with keywords for the image you want, or a direct URL to an image. You can also specify a custom y-position for the image.'});
         const codeEl = instructionsEl.createEl('pre');
         codeEl.createEl('code', {text: 
 `---
 pexels-banner: blue turtle
+pexels-banner-y: 30
 ---
 
 # Or use a direct URL:
 ---
 pexels-banner: https://example.com/image.jpg
+pexels-banner-y: 70
 ---
 
 # Or use a path to an image in the vault:
 ---
 pexels-banner: Assets/my-image.png
+pexels-banner-y: 0
 ---
 
 # Or use an Obsidian internal link:
 ---
 pexels-banner: [[example-image.png]]
+pexels-banner-y: 100
 ---`
         });
 

styles.css

@@ -29,17 +29,18 @@
 /* ------------------------------------------------------------------ */
 /* -- push frontmatter container down to give room to banner image -- */
 /* ------------------------------------------------------------------ */
-.pexels-banner .metadata-container {
-    margin-top: 210px;
-}
 .pexels-banner .frontmatter-container,
 .pexels-banner .metadata-container {
 	position: relative;
 	z-index: 2;
-	margin-top: 150px !important;
+}
+.pexels-banner .markdown-preview-section {
+    margin-top: 150px !important;
 }
 
-/* Settings Page Styles */
+/* -------------------------- */
+/* -- Settings Page Styles -- */
+/* -------------------------- */
 .pexels-banner-settings {
     padding: 20px;
     max-width: 800px;