diff --git a/README.md b/README.md index 2c11bc5..d510c14 100755 --- 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 index b90a42f..21ec05a 100755 --- 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 index 1c4807e..dd454af 100755 --- 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 index 93d35f1..e36d4b2 100755 --- 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 index 6ecd641..ab06c80 100755 --- 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) + } + }) + }); } } \ No newline at end of file