Ability to keep local images src, Adding custom class to container div element

[HMLeeSoundcat]

First of all, thank you for making a good plugin. It is very helpful for publishing my obsidian document on the website with the WYSIWYG editor.

But I had to edit the plugin script to use in various environments, it would be great if some functions were supported by default.

1. Keeping local images src as it is -> When many images are included in an obsidian document, encoding and pasting the whole converted HTML takes some time. Rather than encoding images to base64, I think keeping the original app://image-path in the src is useful in some cases. (After pasting the HTML source, users can replace the image with the proper one.

like...

  async replaceImageSource(image) {
    const imageSourcePath = decodeURI(image.src);
    if (this.options.leaveLocalImages) {
// if the option 'leaveLocalImages' is toggled on, do not replace the image source..
    } else {
      if (imageSourcePath.startsWith(this.vaultUriPrefix)) {
        let path = imageSourcePath.substring(this.vaultUriPrefix.length + 1).replace(/[?#].*/, "");
        path = decodeURI(path);
        const mimeType = this.guessMimeType(path);
        const data = await this.readFromVault(path, mimeType);
        if (this.isSvg(mimeType) && this.options.convertSvgToBitmap) {
          image.src = await this.imageToDataUri(data);
        } else {
          image.src = data;
        }
      } else {
        image.src = await this.imageToDataUri(image.src);
      }
    }
  }

2. Adding custom class to container div -> It would be useful when using a custom stylesheet. If I want to post my obsidian document on a website (but not an independent document), the stylesheet should not make changes to the original website appearance. I think adding a class to the container div would resolve this problem!

Like..

  async renderMarkdown(markdown, path) {
    const processedMarkdown = this.preprocessMarkdown(markdown);
    const wrapper = document.createElement("div");
    if (this.options.customClassDiv) { // adding custom class to wrapper div
      wrapper.className = this.options.customClassDiv; 
    }
    wrapper.style.display = "hidden";
    document.body.appendChild(wrapper);
    await import_obsidian.MarkdownRenderer.render(this.app, processedMarkdown, wrapper, path, this.view);
    await this.untilRendered();
    const result = wrapper.cloneNode(true);
    document.body.removeChild(wrapper);
    this.view.unload();
    return result;
  }

Thanks again for making this plugin!

[mvdkwast]

Hi @HMLeeSoundcat, thanks for your report !

It seems that your use-case is publishing HTML documents from Obsidian, which is not entirely what I had in mind when I wrote this plugin. In fact, its main purpose was to convert all types of image representations (images, diagrams etc...) to data:base64 for inclusion in gmail or word documents.

Now, you're not the first one asking for this :

• 62 : have links with .html extension

• 58 : suggests having a customizable header section (which would solve your custom class)

• 47 : convert links

So would the following cover your use-case ?

• custom html template (header and footer)
• convert Obsidian links, including to images to <a href="obsidian://open?vault=vaultName&amp;file=Test">Test</a> style links

[mvdkwast]

As the requests seemed to be covered by other enhancements, the issue is now closed.

If the latest version (0.8.0) doesn't cover your needs, feel free to reopen or create a new issue !