search

easyblockshq / easyblocks

The open-source visual builder framework.
https://easyblocks.io
GNU Affero General Public License v3.0
241 stars 33 forks source link

Feature - Document and Template thumbnail #63

Open tring-prabhakaran opened 1 week ago

tring-prabhakaran commented 1 week ago

Can a thumbnail be added for a dynamically created document and template?

r00dY commented 1 day ago

Hey @tring-prabhakaran, sorry for delay, was on holidays. Could you specify what do you exactly mean by "dynamically created"? The templates in Config.templates have thumbnail property.

tring-prabhakaran commented 20 hours ago

I am creating a dynamic template by using save as template action and it's getting saved in easyblock DB.

Is there a way to add the thumbnail while creating?

Also, I have tried to update the template using thumbnail. But it's not working

config.templatesand thumbnailare working fine when we save templates in my source code.

r00dY commented 12 hours ago

Ah, I get it now. It's not possible now but can be possible with a small contribution.

Please look at this line of the EasyblocksBackend.ts: https://github.com/easyblockshq/easyblocks/blob/35d985ce850194a36f783cfe7838eff5a96029b2/packages/core/src/EasyblocksBackend.ts#L276-L283

As you can see in the code above, the thumbnail property of Template is not set for dynamic templates.

I suggest you to do a PR that extends EasyblocksBackend so that you can provide your own function of generating preview for a specific template/document. Usually it comes down to using some 3rd party service like ScreenshotOne.

Another question is: what to render? Good news is that there's already an endpoint for rendering templates or documents, all you need to do is to set preview=true and provide template or document id:

  1. For templates: http://localhost:3000/easyblocks-editor?template=TEMPLATE_ID&preview=true
  2. For documents: http://localhost:3000/easyblocks-editor?document=DOCUMENT_ID&preview=true

There's another important thing here, namely the template size. When you save as template a card which is 400px wide, or a section that was 1366px wide, we always save the width of the component when the save operation was called. It's a good hint that this size is probably a good looking one and should be used for a screenshot.

When you use above-mentioned endpoints for rendering a template, the component is always rendered in a container <div id="__easyblocks-preview-container">...</div> which has a correct size. So if you use a 3rd party service for taking screenshots (screenshotone), you must specify to take a screenshot of #__easyblocks-preview-container.