Custom Thumbnail Generator for Speed Dials
ematte last edited by ematte
I recently created a tool that allows anyone to generate custom thumbnails for your Speed Dials.
You just need to add some images (most likely logos) for your bookmarked sites and it will automatically scale and position them.
You can batch create many thumbnails at once, adjust the icon size and background color, and even automatically find icons based on your bookmark's url.
Here is my own Speed Dial generated using it:
If you're interested, check it out: Vivaldi Thumbnail Generator
It's completely free and I just hope you will find it useful. It's still in active development and there are many features planned for the near future. You can find some of them in the roadmap at the bottom of the page.
If you like it, please consider sharing it with fellow Vivaldi enthusiasts. If you want to follow the development and be updated about new features, you can follow me on twitter: @HadrysMateusz.
Any and all feedback is welcome
@ematte Again, thank you for creating this tool, it's a great service to the community
Some feedback as asked
- It's not immediately obvious how to start (the Add icons button). Maybe it should be moved to center under the text, or the "Add some icons" text should link to the same. First time I tried to drag+drop an image directly on the start-page which obviously failed.
- Related to the above, maybe it should start with being able to upload from the very first page?
- If the source image is transparent it should default to this, not the white background.
- The Settings (colours/size) should by default be visible when looking at an image, from its location it's not obvious it's even there.
- There should be some kind of (auto?) crop feature for images with a lot of whitespace and the logo in the middle.
Other than that, really awesome tool and hopefully will be even better after some added features!
@Pathduck Thanks for the feedback!
I agree that the process should be made more intuitive. Drag and Drop on the start page used to be a feature but due to some internal changes it had to be temporarily disabled, but I'm working on bringing it back.
There actually is a help button above the editor. If I may ask, is it just hard to find, or maybe the instructions it provides are not clear? If so, which parts are unclear? The problem with being the maker of something, is that everything seems so obvious and sometimes it's hard to put myself in the shoes of a first-time user. So any info is very helpful for making it more intuitive.
I will experiment with moving the add icons button to the center like you suggested. You are also right about the settings, I'm not sure sure how to do it yet but I'm considering moving it right below the editor.
There actually is auto-cropping but currently it only works if the whitespace is fully transparent. I have a few ideas on how to make it work for other background colors but it will take some time.
Right now I'm mostly focusing on a "save" feature that will allow you to save your settings and icons in one file for easy importing if you ever want to modify all of your thumbnails. (for example if you change your theme).
Here's a tip: if you want to replace all of your thumbnails at once just make sure the files have the same names and put them in the same folder. When you restart your browser Vivaldi will automatically use the new thumbnails
@ematte The position and text of the Help dialog is fine, as well as the position of the Settings. The problem is I think, most users tend to not read Help before trying something out.
Users also tend to assume Settings means something "complicated" they don't need to bother with.... Expecting everything to be immediately intuitive and easy to understand. Basically, users are spoiled, expect hand-holding and don't like reading (or thinking for that matter)
That's why I think the settings should be visible - I admit I did not at first understand that the Settings button allowed control of the icon looks.
Maybe call the button something else, like "Show Controls"?
But it sounds like you have good plans for the tools and will improve on it as time goes on
I think you're right, it should be visible be default. Settings does sound complicated. I will probably make it look something like this:
Thanks for the feedback
@ematte That looks great! Much more logical to have it below the image I think
Another thing I just thought about: When using a URL, It would be good if the tool extracted the images from the
twitter:image) meta tags if they exist. Favicons are often very small and make bad icons and header logos are often not ideal either.
I tested with the site: https://blog.discogs.com/
It found the following:
Is this retrieved from the SVG logo on top of page?
og:imagefor the site is:
This is super-high quality and would make a great logo.
@Pathduck Yeah, I'm currently considering something like that.
Basically I want the 'bookmark url' to use a few different methods to find images (currently I'm only using the Clearbit Logo API). But there are many other images that can be scraped from a site. You mentioned og:image & twitter:image and they might prove useful, but unfortunately these tags are primarily meant for social media previews and they don't always feature a logo (or at least not ONLY the logo).
There are however other options, best of which in my opinion would be the icons used for progressive web apps as they are used for icons for mobile devices and often have a great resolution. But still when I get around to doing this I will probably use any icons I can find for a given site, the problem is that it's probably impossible to do on the client-side because of CORS issues and I would have to create a server (or at least a serverless function) to do that.
Anyway, sorry for the rant. Are you a developer by any chance? Because your feedback has been surprisingly insightful
@ematte Sounds like you've got all the different considerations under control. There are many different things that may seem obvious at first glance which are often complex
I'm not a developer but I like to think I know a bit about usability and user interfaces after using computers for 30 years. At least I like to pretend I do
@Pathduck Yeah, the little things can be sneaky like that
You sure do
kallon last edited by
I really like the tool! It would be great to have an opacity setting. Is this in your roadmap? Thanks.
potmeklecbohdan last edited by
@kallon Just change it in the color picker
kallon last edited by
DonJaviJavi last edited by
My Home Page as of now:
mchipeur last edited by
Thank you @ematte! This app was very helpful! Next is to make one that automatically generates on the Start Page itself!
Thanks for the kind words, everyone! I haven't been here in a while.
I'm a bit busy with another project at the moment, but when I have the time I definitely want to go back and add some more features.
@kallon It might not be that simple, but I'll look into it.
@mchipeur Unfortunately I think that's impossible, but it would be great. The closest idea would be to create a desktop app that automatically updates the thumbnails in the browser whenever you change them. I think it's possible and I want to look into it, but it would be very time consuming so I have no idea when I get around to it.
My Start Page