Today I'm excited to announce the new Image Picker for HTML-Kit Tools. It's a brand new design that makes it easier to get to your images, even if you have lots of them in multiple folders.
Open Image Picker with a single click on the menu bar
So if you're using HTML-Kit Tools 20111001 or later and haven't seen the new Image Picker yet, click the picture icon on the top right hand corner.
Hover for a bigger preview
One of the first things you'll notice is how much more room there is to preview your images. Whether they're small *.gif files, *.ico favicons, alpha-blended *.png files or high resolution *.jpg pictures, your images come into focus in useful and eye pleasing views.
You can get a better look at an image by holding the mouse over its thumbnail.
View it with light, dark and patterned backgrounds
In cases where an image has to be tested against a light or a dark background, Image Picker will preview the current image with white and black backgrounds.
It can also preview the image against a checkered pattern when you hold the mouse over a thumbnail for a few seconds, so you could quickly check if an image has a transparent or alpha-blended background before inserting into a page.
Browse dozens, hundreds or thousands of images
If you have a large number of images in a single folder, Image Picker can scale up from browsing dozens of images to hundreds:
Or even thousands, by breaking up the number of displayed images into multiple tabs of manageable size:
Jumping to folders is easy too
When you go to the Image Picker after opening HTML-Kit Tools, it'll display a list of images in the current document folder.
You can easily go up the folder level with a single click. If you have a couple of sub folders within the images folder, looking inside them is also as easy as clicking the folder name.
Of course, changing into any other folder is also possible with the Look In option.
Small, large and labeled thumbnails
Depending on the type and average size of images you're previewing, you may want a smaller or a larger thumbnail size.
Click the thumbnail size icon to change thumbnails to small, large without file name or large with file name.
Here's the large thumbnail view without labels:
And large thumbnails with file name labels:
Insert IMG tags or customize it
The Image Picker inserts <img /> tags with automatically calculated width, height and alt attributes. The alt attribute can be customized to insert file size, image dimensions and file name, in any order.
If you're working in CSS, JavaScript or other scripting language, you can customize the inserted code. For example, to the CSS format url(image.png)
Unusual placement, faster access
Wondering why the Image Picker icon is on the far corner of the main menu? This placement makes good use of wide screen displays by previewing images in one corner while freeing up the other corner of the screen to glance at the HTML page you're working on. Having the icon on the main menu, instead of the Actions Bar, means that you can quickly bring up the Image Picker regardless of the currently open tab. Or even if you've toggled off the Actions Bar (F11 key or "View > Actions Bar > View/Hide").
Upcoming HTML-Kit Tools updates will bring other ways to get to the Image Picker. Feel free to send your feedback if you have a particular preference.
Thank you TreeHouse!
As is the case with most new HTML-Kit features, Image Picker first appeared in HTML-Kit TreeHouse builds. These are test versions of HTML-Kit Tools that come before a general release. Special thanks go to everyone who played with early versions of the Image Picker and posted comments. Image Picker has smoother edges because of your feedback!
Hope you'll enjoy using the brand new Image Picker.
