Custom Thumbnail Generator for Speed Dials



  • Hi everyone!

    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:
    My Speed Dial

    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 πŸ™‚



  • If you don't know where to get the icons from, check out these sites:



  • @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:

    Desktop.png

    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 og:image (or possibly 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:

    5f1c5da5-3b79-4794-b215-8e47219adeb2-image.png

    Is this retrieved from the SVG logo on top of page?

    The og:image for the site is:
    http://blog.discogs.com/wp-content/uploads/2015/11/discogs-logo.png
    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 πŸ™‚


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.