Image Thumbnails

Shows the images in a folder as a thumbnail gallery in an editor tab.

Usage

• Right-click a folder in the Explorer and choose 🪟 Browse Images in Folder.
• Right-click an image file in the Explorer and choose 🪟 Browse Images in Folder. The gallery opens for the image's folder and scrolls to that image.
• Or run Image Thumbnails: 🪟 Browse Images in Folder from the Command Palette and pick a folder.

In the gallery:

• Click a thumbnail to open the image in VS Code's image preview.
• Double-click a thumbnail, press Space, or right-click a thumbnail and choose Preview Image, to view it full size inside the gallery, where the presenter tools are. Use the arrow keys (or Home/End) to step through the images in their current filter and sort order, Enter to open the image in the editor, Delete to delete it, and Esc or Space to return to the grid.
• Move between thumbnails with the arrow keys (Up/Down move a row), PageUp/PageDown, and Home/End; hold Shift to extend the selection. Enter opens the focused image.
• Select several images with Ctrl+click (Cmd+click on macOS), Shift+click for a range, or Ctrl+A for all shown. Esc or clicking empty space clears the selection.
• Right-click a thumbnail and choose Reveal in File Explorer (Reveal in Finder on macOS, Open Containing Folder on Linux) to show that image in your file manager.
• Right-click a thumbnail and choose Copy Path, Copy Relative Path, or Copy as Markdown Image to copy the selected images, one per line. Markdown links are relative to the Markdown file open next to the gallery; if none (or more than one) is open, they start with / from the workspace folder, which VS Code's Markdown preview and GitHub both resolve. You can also drag thumbnails out of the gallery.
• Right-click a thumbnail and choose Delete Selected Images, or press Delete. You are asked to confirm, and files go to the Recycle Bin / Trash unless files.enableTrash is off.
• Filter by file name, sort by name or modified date, and resize the thumbnails with the slider.
• Tick Include subfolders to also show images in nested folders (node_modules and .git are skipped).
• The gallery refreshes automatically when images are added, changed, or deleted.

Open images in the viewer

Image files can also open straight into the full-size viewer, with the presenter tools, as Image Thumbnails Viewer: right-click an image's editor tab (or the file in the Explorer, under Open With…) and choose Reopen Editor With… → Image Thumbnails Viewer. The arrow keys step through the other images in its folder, and Esc shows the folder's thumbnails.

To make it the default for some image types, choose Configure default editor for '*.png'… in that same picker, or add them to your settings:

"workbench.editorAssociations": {
  "*.png": "imageThumbnails.viewer",
  "*.jpg": "imageThumbnails.viewer",
  "*.jpeg": "imageThumbnails.viewer"
}

VS Code's own image preview stays available: Reopen Editor With… → Image Preview, the viewer's Open button (or Enter), and any image type you leave out of the setting.

Presenter tools

The full-size viewer has a laser pointer, a pen, and a highlighter for presenting an image. Use the buttons in the viewer's top bar or these keys:

Hold or right-click a tool button for its colors and sizes. Each image keeps its own ink while the gallery is open, also when you step to other images and back; it is not kept when the gallery tab is hidden and reloaded.

Save with Ink saves a PNG copy of the image with its ink, at the image's full resolution (an SVG at twice its shown size; an animated GIF saves its first frame). You choose where; by default it is <name>-ink.png next to the image. The original image is never changed, and fading ink is not saved.

Settings

Development

npm install
npm run compile

Press F5 in VS Code to launch an Extension Development Host.

To build an installable package:

npm run package
code --install-extension image-thumbnails-0.0.1.vsix