Support Clickable Thumbnails in HTMLEditor #1357

Closed
opened 2026-01-29 17:52:33 +00:00 by claunia · 3 comments
Owner

Originally created by @wss-alubic on GitHub (Aug 19, 2024).

Is your feature request related to a problem? Please describe.
We're using Radzen and we have a request to support uploading larger images as thumbnails. There's no built in way to do this currently that I'm able to see.

Describe the solution you'd like
I think the easiest solution is to modify Radzen.createEditor to accept an optional response property of "thumbnailUrl". If it exists, insert the HTML of <a href="result.url" target="_blank"><img src="result.thumbnailUrl"></a> instead of just the img tag.

dd4afb1d0a/Radzen.Blazor/wwwroot/Radzen.Blazor.js (L1814)

Describe alternatives you've considered
I am considering patching Radzen.createEditor myself to do this functionality. I would replace createEditor with an equivalent version that supports result.thumbnailUrl from the upload url http response.

I'm willing to submit a PR with the enhancement, but I wanted to open an issue and have a discussion first.

Originally created by @wss-alubic on GitHub (Aug 19, 2024). **Is your feature request related to a problem? Please describe.** We're using Radzen and we have a request to support uploading larger images as thumbnails. There's no built in way to do this currently that I'm able to see. **Describe the solution you'd like** I think the easiest solution is to modify Radzen.createEditor to accept an optional response property of "thumbnailUrl". If it exists, insert the HTML of &lt;a href=&quot;result.url&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;result.thumbnailUrl&quot;&gt;&lt;/a&gt; instead of just the img tag. https://github.com/radzenhq/radzen-blazor/blob/dd4afb1d0a2fa70a6ebb18b1e076fe657f829c24/Radzen.Blazor/wwwroot/Radzen.Blazor.js#L1814 **Describe alternatives you've considered** I am considering patching Radzen.createEditor myself to do this functionality. I would replace createEditor with an equivalent version that supports result.thumbnailUrl from the upload url http response. **I'm willing to submit a PR with the enhancement**, but I wanted to open an issue and have a discussion first.
Author
Owner

@akorchev commented on GitHub (Aug 28, 2024):

Hi @wss-alubic,

I am afraid I didn't understand what you are trying to achieve. At the moment image uploads rely on the url attribute of the result returned from the upload method. You can probably return whatever value you want in that attribute without the need of a new one.

@akorchev commented on GitHub (Aug 28, 2024): Hi @wss-alubic, I am afraid I didn't understand what you are trying to achieve. At the moment image uploads rely on the [url](https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/wwwroot/Radzen.Blazor.js#L1872) attribute of the result returned from the upload method. You can probably return whatever value you want in that attribute without the need of a new one.
Author
Owner

@wss-alubic commented on GitHub (Aug 28, 2024):

Hello @akorchev!

You're correct, we could return a thumbnail as the result.url from the upload method, but that does not fit the goal we're trying to achieve.

Our use case is that we want the thumbnail image to be clickable so you can view the full-sized image. I apologize as I should have made this clearer in the original post. This would mean we require two URLs; one to a resized thumbnail URL and one to a full-sized URL.

@wss-alubic commented on GitHub (Aug 28, 2024): Hello @akorchev! You're correct, we could return a thumbnail as the result.url from the upload method, but that does not fit the goal we're trying to achieve. Our use case is that we want the thumbnail image to be **clickable** so you can view the full-sized image. I apologize as I should have made this clearer in the original post. This would mean we require two URLs; one to a resized thumbnail URL and one to a full-sized URL.
Author
Owner

@akorchev commented on GitHub (Sep 2, 2024):

Still not sure what this means. In order for the image to be clickable you have to insert a link as well. This isn't supported out of the box - you need to implement a custom tool. Check the implementation of RadzenHtmlEditorImage and the custom tools demo for inspiration.

@akorchev commented on GitHub (Sep 2, 2024): Still not sure what this means. In order for the image to be clickable you have to insert a link as well. This isn't supported out of the box - you need to implement a custom tool. Check the implementation of RadzenHtmlEditorImage and the custom tools demo for inspiration.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1357