What started as a slow Friday turned into a productive coding session using Windsurf, Codeiums AI-powered IDE, to create a block thumbnail generator for Umbraco block editors.
TLDR; I made a block thumbnail generator for Umbraco
Thumbnails for blocks in Umbraco is typically examples of what the block renders and they greatly improve the content editing experience. I wanted to try out "vibe coding" on something useful, and this project aims to automate that process, saving time and ensuring consistency across Umbraco projects.
I opened up Windsurf, and gave it the following prompt:
Create a webcomponent (possible with webcomponents inside) that contains an upload field (you should also be able to drop a file into it, or have a button where you can get image data from the clipboard). When uploading an image it should render it into a canvas of 500×300, but crop the image to fit the width. The top part of the image should be visible. If there is remaining vertical space, it should fill with the most prominent color of the outer 1 pixel of the uploaded image.
The initial results were surprisingly accurate. Over the next few hours, I refined the component, adding several key features:
- Custom Background Color
I added the option to manually set the background color. While the automatic color detection generally worked well, providing a manual override ensures consistently good-looking thumbnails, especially when the automatically detected color isn't ideal.
- Tinting/Colorization
To avoid overly colorful block catalogs, I implemented a tinting feature. This grayscales the uploaded image and then overlays a selected color using the screen blending mode. The screen blending mode was chosen because it creates a subtle color overlay that preserves the image's details while applying the desired tint. This is especially useful for applying a brand color to all thumbnails.
- Padding
To easily incorporate screenshots taken directly from design tools like Figma (where layers can be copied), I added padding options. The padding is filled with either the automatically detected background color or the custom-selected background color, ensuring a clean and consistent border around the image.
- Fit Options
I expanded the image fitting behavior. Instead of always fitting the uploaded image to the width of the canvas, users can now select whether to fit to the width or the height, providing greater control over the final composition.
- Download Options
Finally, I added options for downloading the resulting image in PNG, JPEG, and WebP formats. The filesize of each format is displayed, allowing users to make informed decisions about image quality and file size optimization.
- Saving preferences to local storage
It also saves your selected preferences for background color, tint, padding and fit to the local storage in the browser. This way you don't have to set these things for every thumbnail you generate.
Adding polish
The first result was somewhat pretty, but still very prototype like. I wanted to give it an Umbraco feel, so I picked some colors from the Umbraco 12 login background, and fed it into the AI, asking it to recolor the site using them, without any further restrictions.
It then colored everything nicely, including versions for both light and dark mode. I did however had to make it reconsider some of its choices for accessibility and contrast reasons.
Refactoring with Lit and TypeScript
To improve the component's maintainability and prepare it for potential use within an Umbraco package, I had Windsurf convert the web component to use Lit and TypeScript.
This also provided a more structured and type-safe codebase. Although - I haven't really read the code, and this is also one of my painpoints with this kind of technology. You never really feel in control of the output, unless you meticulously read through every change it does.
And just for the sake of it, I had Windsurf turn it into a Progressive Web App, so it can be "installed" for local use. So now I have a thumbnail generator sitting on the taskbar, ready to be used.
Was it worth it
One of the biggest challenges was that Windsurf occasionally reintroduced older bugs or reverted to previous requirements, such as the original image size of 500×300 (which should have been 400×250). These regressions required careful monitoring and reiteration of the correct specifications. These issues occurred approximately 2-3 times during the development process.
All in all, using Windsurf as an "assistant developer" was a surprisingly productive experience. While I could have likely implemented some of the individual features manually in a similar timeframe, Windsurf significantly accelerated the overall development process.
For this type of fun idea, it was definitely worth it. Getting a project from idea to working project was fast. I'm not sure if I would use it on anything non-trivial, that I need to support going forward though. I really don't feel like I know what the code is doing, and while I can read through the code for this project - it was never my intention to do that. But for simple changes and features, I can definitely see the benefits.
Try out the thumbnail generator yourself!
You can try out (and install if you like) the thumbnail generator tool at https://skttl.github.io/umbraco-block-thumbnail-generator/ – it's completely free to use, so go nuts!
Top comments (0)