Obsidian Stats logoObsidian Stats

Image Glance

by chenjhu
5
4
3
2
1
Score: 50/100
Install Code

Description

Reviews

No reviews yet.

Stats

0
stars
121
downloads
0
forks
87
days
88
days
87
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
3
commits

Latest Version

0.2.3
3 months ago

Changelog

Changelog

0.2.3

  • Fixes automated review feedback by moving preview visibility and position state out of direct static style assignments.
  • Uses Obsidian DOM helper APIs for preview and thumbnail elements.
  • Declares CodeMirror packages used by the Live Preview extension.
  • Adds GitHub artifact attestations for release assets.

0.2.2

  • Adds opt-in thumbnail rendering for marked wiki and Markdown image embeds.
  • Supports Reading view and Live Preview.
  • Adds hover preview on desktop and optional tap preview on mobile.
  • Prevents marked thumbnails from triggering Obsidian's native image click and resize behavior.
  • Keeps unmarked images rendering normally.
See all version on GitHub

README file from

Github

Image Glance

CI

Image Glance keeps selected images from interrupting the flow of a note. Only images marked with glance become compact inline thumbnails; all other images keep Obsidian's normal rendering.

It is designed for notes where a picture is useful context, but a full-size embed would break the sentence or paragraph you are writing.

Features

  • Opt-in compact thumbnails in Reading view and Live Preview.
  • Normal Obsidian image embeds stay untouched unless you mark them with glance.
  • Hover preview on desktop, with optional tap preview on mobile.
  • Click isolation for marked thumbnails, so accidental clicks do not trigger Obsidian's native image resize behavior.
  • Configurable thumbnail size, preview bounds, and corner radius.
  • No network requests, telemetry, vault scanning, or Markdown modification.

Usage

For a wiki image embed, add |glance:

Text before ![[image.png|glance]] text after.

For a standard Markdown image, use glance as the alt text:

Text before ![glance](https://raw.githubusercontent.com/chenjhu/image-glance/HEAD/image.png) text after.

An optional description can appear before the marker:

![Diagram description|glance](https://raw.githubusercontent.com/chenjhu/image-glance/HEAD/diagram.png)

Unmarked images remain unchanged:

![[image.png]]
![Normal image](https://raw.githubusercontent.com/chenjhu/image-glance/HEAD/image.png)

To keep a thumbnail directly after text, put the image embed on the same Markdown line as that text.

Manual installation

Download main.js, manifest.json, and styles.css from the latest GitHub release, then place them in:

<your-vault>/.obsidian/plugins/image-glance/

Reload Obsidian and enable Image Glance under Community plugins.

Development

npm install
npm run dev

For a production build:

npm run build

Do development in a test vault rather than your main vault.

Release

Releases are built by GitHub Actions. To publish a new version:

  1. Update version in manifest.json and package.json.
  2. Add the version to versions.json if the minimum Obsidian version changes.
  3. Run npm run build.
  4. Commit the changes.
  5. Push a tag that exactly matches the manifest version, such as 0.2.2.

The release workflow uploads main.js, manifest.json, and styles.css.

License

MIT

Sponsors