Add the ability to customise the inserted Markdown

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "google-photos",
 	"name": "Google Photos",
-	"version": "1.1.12",
+	"version": "1.1.13",
 	"minAppVersion": "0.15.0",
 	"description": "Google Photos integration for Obsidian",
 	"author": "Alan Grainger",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "google-photos",
-	"version": "1.1.12",
+	"version": "1.1.13",
 	"description": "Google Photos integration for Obsidian",
 	"main": "main.js",
 	"scripts": {

src/handlebars.ts

@@ -0,0 +1,13 @@
+export interface HandlebarTemplate {
+  local_thumbnail_link?: string;
+  google_photo_url?: string;
+  google_photo_id?: string;
+  google_base_url?: string;
+}
+
+export function handlebarParse (content: string, template: HandlebarTemplate) {
+  for (const key of Object.keys(template) as Array<keyof HandlebarTemplate>) {
+    content = content.replace(new RegExp(`{{\\s*${key}\\s*}}`, 'gi'), template[key] as string)
+  }
+  return content
+}

src/photoModal.ts

@@ -1,6 +1,7 @@
 import { App, Editor, MarkdownView, Modal, moment, Platform, requestUrl, Setting } from 'obsidian'
 import { GridView } from './renderer'
 import GooglePhotos from './main'
+import { handlebarParse } from './handlebars'
 
 export class PhotosModal extends Modal {
   plugin: GooglePhotos
@@ -23,7 +24,7 @@ export class PhotosModal extends Modal {
     try {
       // Remove the photo grid and just show the loading spinner while we wait for the thumbnail to download
       await this.gridView.resetGrid()
-      let {baseurl, producturl, filename = ''} = event.target.dataset
+      let {photoid, baseurl, producturl, filename = ''} = event.target.dataset
       const src = baseurl + `=w${this.plugin.settings.thumbnailWidth}-h${this.plugin.settings.thumbnailHeight}`
       const noteFolder = this.view.file.path.split('/').slice(0, -1).join('/')
       // Use the note folder or the user-specified folder from Settings
@@ -53,7 +54,12 @@ export class PhotosModal extends Modal {
       const imageData = await requestUrl({url: src})
       await this.view.app.vault.adapter.writeBinary(thumbnailFolder + '/' + filename, imageData.arrayBuffer)
       const cursorPosition = this.editor.getCursor()
-      const linkText = `[![](${linkPath})](${producturl}) `
+      const linkText = handlebarParse(this.plugin.settings.thumbnailMarkdown, {
+        local_thumbnail_link: linkPath,
+        google_photo_id: photoid,
+        google_photo_url: producturl,
+        google_base_url: baseurl
+      })
       this.editor.replaceRange(linkText, cursorPosition)
       // Move the cursor to the end of the thumbnail link after pasting
       this.editor.setCursor({line: cursorPosition.line, ch: cursorPosition.ch + linkText.length})

src/renderer.ts

@@ -41,10 +41,11 @@ export default class Renderer {
    * @param {function} onclick
    */
   appendThumbnailsToElement (el: HTMLElement, thumbnails: [], onclick: (event: MouseEvent) => void) {
-    (thumbnails || []).forEach(({productUrl, baseUrl, mediaMetadata}) => {
+    (thumbnails || []).forEach(({id, productUrl, baseUrl, mediaMetadata}) => {
       // Image element
       const img = new Image()
       img.src = baseUrl + `=w500-h130`
+      img.dataset.photoid = id
       img.dataset.baseurl = baseUrl
       img.dataset.producturl = productUrl
       const {creationTime} = mediaMetadata

src/settings.ts

@@ -11,6 +11,7 @@ export interface GooglePhotosSettings {
   thumbnailWidth: number;
   thumbnailHeight: number;
   filename: string;
+  thumbnailMarkdown: string;
   parseNoteTitle: string;
   defaultToDailyPhotos: boolean;
   locationOption: string;
@@ -27,6 +28,7 @@ export const DEFAULT_SETTINGS: GooglePhotosSettings = {
   thumbnailWidth: 400,
   thumbnailHeight: 280,
   filename: 'YYYY-MM-DD[_google-photo_]HHmmss[.jpg]',
+  thumbnailMarkdown: '[![]({{local_thumbnail_link}})]({{google_photo_url}) ',
   parseNoteTitle: 'YYYY-MM-DD',
   defaultToDailyPhotos: true,
   locationOption: 'note',
@@ -217,6 +219,23 @@ export class GooglePhotosSettingTab extends PluginSettingTab {
         setVisible(locationFolderEl, this.plugin.settings.locationOption === 'specified')
         setVisible(locationSubfolderEl, this.plugin.settings.locationOption === 'subfolder')
       })
+    new Setting(containerEl)
+      .setName('Inserted Markdown')
+      .setDesc('This will be the text inserted when adding a thumbnail. You can use these variables:')
+      .addTextArea(text => text
+        .setPlaceholder(DEFAULT_SETTINGS.thumbnailMarkdown)
+        .setValue(this.plugin.settings.thumbnailMarkdown)
+        .onChange(async (value) => {
+          this.plugin.settings.thumbnailMarkdown = value
+          await this.plugin.saveSettings()
+        }))
+      .then(setting => {
+        const ul = setting.descEl.createEl('ul')
+        ul.createEl('li').setText('local_thumbnail_link - The path to the locally saved thumbnail image')
+        ul.createEl('li').setText('google_photo_url - The URL to the original Google Photo')
+        ul.createEl('li').setText('google_base_url - Advanced variable, see Photos API docs')
+        ul.createEl('li').setText('google_photo_id - Advanced variable, see Photos API docs')
+      })
 
     /*
      Other settings

versions.json

@@ -9,5 +9,6 @@
 	"1.1.9": "0.15.0",
 	"1.1.10": "0.15.0",
 	"1.1.11": "0.15.0",
-	"1.1.12": "0.15.0"
+	"1.1.12": "0.15.0",
+	"1.1.13": "0.15.0"
 }