Merge pull request #6 from jordanhandy/transformations

Merge Transformations Features
jordanhandy · Apr 9, 2023 · b072f4e · b072f4e
2 parents 8c28a51 + 332800c
commit b072f4e
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@ This plugin allows you to automatically upload images pasted to Obsidian directl
     - Cloud Name
     - Upload Preset Name ([Set that here](https://cloudinary.com/documentation/upload_presets))
     - Set a Folder Name
+5. Optional configuration
+    - Cloudinary default transformation parameters
 
 ## Unsigned vs. Signed Uploads to Cloudinary
 The uploads to Cloudinary are unsigned.  [You can read more about that here](https://cloudinary.com/documentation/upload_images#unsigned_upload).  A signed upload would require the use of an API key and secret, and I opted against asking for that in the plugin configuration, as a choice for security reasons.

diff --git a/main.js b/main.js
@@ -2669,7 +2669,28 @@ var CloudinaryUploaderSettingTab = class extends import_obsidian.PluginSettingTa
         }
       });
     });
-    new import_obsidian.Setting(containerEl).setName("f_auto Option").setDesc("Enable f_auto option for image uploads").addToggle((toggle) => {
+    containerEl.createEl("h4", {text: "URL Manipulations / Transformation"});
+    let textFragment = document.createDocumentFragment();
+    let link = document.createElement("a");
+    const linkTransformation = document.createElement("a");
+    linkTransformation.text = "transformation limits ";
+    linkTransformation.href = "https://cloudinary.com/documentation/transformation_counts";
+    textFragment.append("The settings below are meant for default image transformations.  As they only touch the resulting URL, this should not cause any upload errors, however, if syntax is incorrect, your images will not be referenced correctly (won't render).  Be mindful of your Cloudinary ");
+    textFragment.append(linkTransformation);
+    textFragment.append(" and use the ");
+    link.href = "https://cloudinary.com/documentation/transformation_reference";
+    link.text = " Cloudinary documentation";
+    textFragment.append(link);
+    textFragment.append(" for guidance.");
+    containerEl.createEl("p", {text: textFragment});
+    textFragment = document.createDocumentFragment();
+    link = document.createElement("a");
+    link.href = "https://cloudinary.com/documentation/image_optimization#automatic_format_selection_f_auto";
+    link.text = "f_auto option";
+    textFragment.append("Enable the ");
+    textFragment.append(link);
+    textFragment.append(" for uploads");
+    new import_obsidian.Setting(containerEl).setName("f_auto Option").setDesc(textFragment).addToggle((toggle) => {
       toggle.setValue(this.plugin.settings.f_auto).onChange(async (value) => {
         try {
           this.plugin.settings.f_auto = value;
@@ -2679,6 +2700,22 @@ var CloudinaryUploaderSettingTab = class extends import_obsidian.PluginSettingTa
         }
       });
     });
+    textFragment = document.createDocumentFragment();
+    link = document.createElement("a");
+    link.href = "https://cloudinary.com/documentation/transformation_reference";
+    link.text = "View Cloudinary's transformation reference for guidance.";
+    textFragment.append("Add a comma-delimited default set of transformations to your uploads.  You do NOT need to include f_auto here if already enabled above.  ");
+    textFragment.append(link);
+    new import_obsidian.Setting(containerEl).setName("Default Transformation Parameters").setDesc(textFragment).addText((text) => {
+      text.setPlaceholder("w_150,h_150").setValue(this.plugin.settings.transformParams).onChange(async (value) => {
+        try {
+          this.plugin.settings.transformParams = value;
+          await this.plugin.saveSettings();
+        } catch (e) {
+          console.log(e);
+        }
+      });
+    });
   }
 };
 var settings_tab_default = CloudinaryUploaderSettingTab;
@@ -2688,7 +2725,8 @@ var DEFAULT_SETTINGS = {
   cloudName: null,
   uploadPreset: null,
   folder: null,
-  f_auto: false
+  f_auto: false,
+  transformParams: null
 };
 var CloudinaryUploader = class extends import_obsidian2.Plugin {
   setupPasteHandler() {
@@ -2712,8 +2750,15 @@ var CloudinaryUploader = class extends import_obsidian2.Plugin {
               data: formData
             }).then((res) => {
               console.log(res);
-              const url = import_object_path.default.get(res.data, "secure_url");
+              let url = import_object_path.default.get(res.data, "secure_url");
               let imgMarkdownText = "";
+              if (this.settings.transformParams) {
+                const splitURL = url.split("/upload/", 2);
+                let modifiedURL = "";
+                modifiedURL = splitURL[0] += "/upload/" + this.settings.transformParams + "/" + splitURL[1];
+                imgMarkdownText = `![](${modifiedURL})`;
+                url = modifiedURL;
+              }
               if (this.settings.f_auto) {
                 const splitURL = url.split("/upload/", 2);
                 let modifiedURL = "";

diff --git a/manifest.json b/manifest.json
@@ -5,5 +5,5 @@
   "author": "Jordan Handy",
   "isDesktopOnly": true,
   "minAppVersion": "0.11.0",
-  "version": "0.1.6"
+  "version": "0.2.0"
 }
diff --git a/src/main.ts b/src/main.ts
@@ -18,6 +18,7 @@ interface CloudinarySettings {
   uploadPreset: string;
   folder: string;
   f_auto: boolean;
+  transformParams: string;
   //maxWidth: number; TODO
   // enableResize: boolean; TODO
 }
@@ -28,6 +29,7 @@ const DEFAULT_SETTINGS: CloudinarySettings = {
   uploadPreset: null,
   folder: null,
   f_auto: false,
+  transformParams: null,
   //maxWidth: 4096, TODO
   //enableResize: false, TODO later
 };
@@ -65,13 +67,24 @@ export default class CloudinaryUploader extends Plugin {
           }).then(res => {
           // Get response public URL of uploaded image
           console.log(res);
-            const url = objectPath.get(res.data, 'secure_url')
+            let url = objectPath.get(res.data, 'secure_url')
             let imgMarkdownText ="";
+
+            // Split URL to allow for appending transformations
+            if(this.settings.transformParams){
+              const splitURL = url.split("/upload/",2);
+              let modifiedURL='';
+              modifiedURL = splitURL[0]+="/upload/"+this.settings.transformParams+"/"+splitURL[1];
+              imgMarkdownText = `![](${modifiedURL})`;
+              url = modifiedURL
+            }
             if(this.settings.f_auto){
               const splitURL = url.split("/upload/",2);
               let modifiedURL='';
               modifiedURL = splitURL[0]+="/upload/f_auto/"+splitURL[1];
               imgMarkdownText = `![](${modifiedURL})`;
+
+            // leave stamdard of no transformations added
             }else{
             imgMarkdownText = `![](${url})`;
             }

diff --git a/src/settings-tab.ts b/src/settings-tab.ts
@@ -69,9 +69,38 @@ export default class CloudinaryUploaderSettingTab extends PluginSettingTab {
                         }
                     })
             });
+            containerEl.createEl("h4", { text: "URL Manipulations / Transformation" });
+
+            // Allow for inline hyperlinks with anchor tags
+            let textFragment = document.createDocumentFragment();
+            let link = document.createElement("a"); 
+
+            const linkTransformation = document.createElement("a"); 
+            linkTransformation.text="transformation limits ";
+            linkTransformation.href="https://cloudinary.com/documentation/transformation_counts";
+
+            textFragment.append("The settings below are meant for default image transformations.  As they only touch the resulting URL, this should not cause any upload errors, however, if syntax is incorrect, your images will not be referenced correctly (won't render).  Be mindful of your Cloudinary ");
+            textFragment.append(linkTransformation);
+            textFragment.append(" and use the ");
+
+            link.href = "https://cloudinary.com/documentation/transformation_reference";
+            link.text = " Cloudinary documentation"
+            textFragment.append(link);
+            textFragment.append(" for guidance.");
+            containerEl.createEl("p", { text: textFragment });
+
+
+            textFragment = document.createDocumentFragment();
+            link = document.createElement("a");
+            link.href="https://cloudinary.com/documentation/image_optimization#automatic_format_selection_f_auto";
+            link.text="f_auto option";
+            textFragment.append("Enable the ");
+            textFragment.append(link);
+            textFragment.append(" for uploads");
+
             new Setting(containerEl)
             .setName("f_auto Option")
-            .setDesc("Enable f_auto option for image uploads")
+            .setDesc(textFragment)
             .addToggle((toggle) => {
                 toggle
                     .setValue(this.plugin.settings.f_auto)
@@ -85,5 +114,28 @@ export default class CloudinaryUploaderSettingTab extends PluginSettingTab {
                         }
                     })
             });
+            textFragment = document.createDocumentFragment();
+            link = document.createElement("a");
+            link.href="https://cloudinary.com/documentation/transformation_reference";
+            link.text="View Cloudinary's transformation reference for guidance.";
+            textFragment.append("Add a comma-delimited default set of transformations to your uploads.  You do NOT need to include f_auto here if already enabled above.  ");
+            textFragment.append(link);
+            new Setting(containerEl)
+            .setName("Default Transformation Parameters")
+            .setDesc(textFragment)
+            .addText((text) => {
+                text
+                    .setPlaceholder("w_150,h_150")
+                    .setValue(this.plugin.settings.transformParams)
+                    .onChange(async (value) => {
+                        try {
+                            this.plugin.settings.transformParams = value;
+                            await this.plugin.saveSettings();
+                        }
+                        catch (e) {
+                            console.log(e)
+                        }
+                    })
+            });
     }
 }