node-html-to-image
node-html-to-image copied to clipboard
frinyvonnick
[feature]: `html` as an array
First of all, thanks for this great library!
I'm using this lib to generate multiple images in a project that happens to use liquidjs instead of handlebarsjs. Since issue #47 is ongoing, I'd like to suggest that the html property to also accept arrays, like it already does for content. In this case one could render the HTML using a rendering engine of his/hers liking yet generating multiple images.
On a personal note I'd love to have an htmlRender property which could deal with any specific template render engine. It also could be a way for gracefully deprecate any handlerbarsjs options without introducing breaking changes.
Hi @hefler š Thx for opening this issue. Could you provide some concrete examples of usage so I could better understand your idea please?
I'll use the example from the README#Genrating Multiple Images as a base.
const liquidjsHTML = liquidjsRenderFunction( 'template.liquid', objectWithSomeData ); //outputs an HTML
const pugHTML = pugsRenderFunction( 'template.pug'', objectWithSomeData ); //outputs an HTML
const preRenderedHTMLs = [ liquidjsHTML, pugHTML ];
nodeHtmlToImage({
html: preRenderedHTMLs,
content: [{ output: './image1.png' }, { output: './image2.png' }]
})
.then(() => console.log('The images were created successfully!'))
Does that makes sense?
Also might be worth to mention that in my case the same template has the logic to generate multiple different images. The only reason I'm not using content is because the template engined has to be liquidjs and not handlebarsjs. It can see it having a "workaround" feel to it. š Perhaps the solution lies on issue 47?
āļø
@hefler I am somewhat divided over this issue. Your solution make node-html-to-image compatible with every template engine. On the other hand for my own usage I like that node-html-to-image supports directly handlebars. If we keep both there are two ways of using the library š¤ I feels like there is a choice to make. Another solution would be to add support for liquidjs in node-html-to-image and introduce an option templateEngine.
What do you think?
@frinyvonnick Re-reading the issue made me question the quality of my writing. š I think I mixed up two different features in one issue.
- The original issue was to request for the
htmlprop to accept an array of multiples HTML content. - The second part was to be able to allow a custom template engine.
Regarding item 1, I think it'd be nice to have multiple input sources (multiple HTMLs). It'd be needed to rethink a bit how the library would deal with the pairs html and content. Should they always have same length? Or should it generate an image for each output on each html index?
const html1 = '<html><body>Iām {{ name }}</body></html>';
const html2 = '<html><body>My name is: {{ name }}</body></html>';
const htmls = [ html1, html2 ];
nodeHtmlToImage({
html: htmls,
content: [{ output: './image1.png' }, { output: './image2.png' }]
})
.then(() => console.log('Images created'))
// OUTPUTS:
// image1_html1.png
// image2_html2.png
// OR
// image1_html1.png
// image1_html2.png
// image2_html1.png
// image2_html2.png
As for item 2, Introducing templateEngine is, in my view, smart. It would allow anyone to use their own template engine. Personally, I'd also prefer the library to be agnostic of template engine and let users implement whatever they prefer, without bloating it with dependencies. But that's my personal preference, and I have no hard feelings if someone prefers something else.
Apologies if things got a bit convoluted.