Feature - Document and Template thumbnail

[tring-prabhakaran]

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

[r00dY]

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]

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.templates and thumbnail are working fine when we save templates in my source code.

[r00dY]

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:

easyblocks/packages/core/src/EasyblocksBackend.ts

Lines 276 to 283 in 35d985c

	const templates = data.map<UserDefinedTemplate>((item) => ({
	id: item.id,
	label: item.label,
	entry: item.config.config,
	isUserDefined: true,
	width: item.width,
	widthAuto: item.widthAuto,
	}));

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.

[tring-prabhakaran]

Got it. I have created PR #65

Just want to confirm once

We need to take screenshot and update to template manually.
Is that right?

[tring-prabhakaran]

Sure. I have created a PR.

…

On Wed, Jul 10, 2024 at 6:06 PM Andrzej Dąbrowski ***@***.***> wrote: 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 <https://screenshotone.com/>), you must specify to take a screenshot of #__easyblocks-preview-container. — Reply to this email directly, view it on GitHub <#63 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGCFPQPVN5ZO2LREA7SXBOLZLUTGDAVCNFSM6AAAAABKCHRPCGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRQGQYDGMBYGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[r00dY]

Hey @tring-prabhakaran,

It's not possible for your PR to work since item.thumbnail is undefined. Please make sure to test the code before submitting next time.

As I suggested above, you should extend EasyblocksBackend to take a callback function that is responsible for generating the thumbnail URL.

[tring-prabhakaran]

I understand what you're saying. But I have to do some immediately for the thumbnail. Can we add the thumbnail key in both get-all and update calls? so I can write a separate logic in our code to update the thumbnail URL. Changes in the Easyblockbackend will be done later. Is that fine with you? *Regards,* Prabhakaran Rajendran

…

On Thu, Jul 11, 2024 at 7:36 PM Andrzej Dąbrowski ***@***.***> wrote: Hey @tring-prabhakaran <https://github.com/tring-prabhakaran>, It's not possible for your PR to work since item.thumbnail is undefined. Please make sure to test the code before submitting next time. As I suggested above, you should extend EasyblocksBackend to take a callback function that is responsible for generating the thumbnail URL. — Reply to this email directly, view it on GitHub <#63 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGCFPQLV7JRCZ24FPUNUNIDZL2GPNAVCNFSM6AAAAABKCHRPCGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRTGAZTGNRTGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[r00dY]

I don't think I understand your question @tring-prabhakaran, can you maybe explain it better? How adding an undefined key would help in any way?

[tring-prabhakaran]

Right now we have the update template call to update the name of the template. Similar way, We can allow users to upload any image to the template. 1. All we need to do is accept the thumbnail key in the template update API. So that the user can upload any image for the template. 2. Return the thumbnail key in the template get the API call. It's just a quick fix. Later we can add the screenshot logic. *Regards,* Prabhakaran Rajendran

…

On Wed, Jul 17, 2024 at 6:50 PM Andrzej Dąbrowski ***@***.***> wrote: I don't think I understand your question @tring-prabhakaran <https://github.com/tring-prabhakaran>, can you maybe explain it better? How adding an undefined key would help in any way? — Reply to this email directly, view it on GitHub <#63 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGCFPQNSLVOXEXSCWVZMP5TZMZVQ5AVCNFSM6AAAAABKCHRPCGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMZTGMYDQNZTG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[r00dY]

Are you suggesting we should do the following things?:

1. Extend "add/update template" UI widget to make it possible for user to upload a custom thumbnail
2. Extend EasyblocksBackend to take this into account.

If so, how does your PR solve this?