Description
Hwinote Image Scroll extends the native WordPress Image block with an opt-in vertical image viewer. It is intended for long screenshots, illustrated instructions, and other tall images that would otherwise occupy a large portion of a post.
Features:
* Works with the existing core/image block; there is no custom image block.
* Scrolling is disabled by default, leaving existing images untouched.
* Choose viewport height by aspect ratio or by pixels.
* Optional automatic tall-image detection per Image block (1.5x, 2x, or 3x height-to-width; default 2x).
* Optional separate maximum viewport height on screens 767px wide or narrower, with an 80% screen-height cap.
* Scroll hint appears only if content actually overflows (when JavaScript is available).
* Optional progress indicator shows how far the image has been scrolled.
* Optional full-image control: expand/collapse the existing image directly inside the post (default), or open the original media in a new tab.
* Expanded images have collapse controls above and below; collapsing corrects page scroll position.
* Keeps the standard Image block caption outside the scroll area on the front end.
* Preserves standard image links and native WordPress image lightbox markup.
* Lightweight, scoped CSS and dependency-free frontend JavaScript enqueued only when a scroll-enabled image is rendered.
* English source strings, Japanese translations (PO/MO and editor JSON), and a POT template.
Automatic detection applies only to image blocks where scrolling is enabled and automatic detection has been selected; it does not scan or change other image blocks. Detection uses intrinsic dimensions available in markup / WordPress metadata and rechecks loaded image dimensions in the browser. If dimensions are unavailable with JavaScript disabled, the image stays fully visible.
The editor offers an approximate visual preview. On the published page, scrolling and overflow detection are calculated against the actual rendered image. The WordPress image lightbox remains available when already enabled in the standard Image block; the full-image control can expand and collapse the existing image inside the article without navigation, or use a separate original-image link in a new tab. Neither option replaces the standard lightbox.
Related Links
- Japanese Introduction
https://hwinotes.com/image-scroll/
Screenshots
Installation
- Upload the plugin ZIP under Plugins > Add New Plugin > Upload Plugin.
- Activate Hwinote Image Scroll.
- Select a standard Image block in the block editor.
- In the Image scrolling sidebar panel, choose Off, On (manual), or On (automatic detection).
- Select the viewport height method, and optionally choose a separate mobile height, a scroll hint, or a full-image control. Choose whether it expands in the post or opens in a new tab.
All features are opt-in per image. No global plugin settings are added.
FAQ
-
Does it change images already in posts?
-
No. Only Image blocks with scrolling set to On (manual) or On (automatic detection) are modified on the published page.
-
How does automatic detection work?
-
An image is treated as tall if its intrinsic height divided by its intrinsic width is at least the selected threshold. The default is 2. For an 800×1600 image, the ratio is 2; for an 800×1200 image, it is 1.5. The actual scroll hint appears only if the rendered image exceeds the visible viewport height.
-
Can I set a different size for mobile?
-
Yes. Enable Custom mobile height and enter a height in pixels. This takes effect for viewport widths of up to 767px. On narrow screens, the viewer is capped at 80% of the visible screen height. The main viewport ratio or pixel maximum applies on wider screens.
-
What happens if I disable the plugin?
-
Images retain the normal saved core/image block HTML. The optional scrolling wrapper exists only at rendering time and disappears when the plugin is disabled. Gutenberg block attributes remain stored but do not alter normal display.
-
Is the plugin available in Japanese?
-
Yes. Japanese translations are included for both editor UI and frontend text. Other locales fall back to English until a translation is added.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Hwinote Image Scroll” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Hwinote Image Scroll” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- First public release.
- Add opt-in vertical scrolling to native WordPress Image blocks.
- Include per-image automatic tall-image detection, responsive height options, scrolling hints, progress display, and inline image expansion.
- Include English source strings and Japanese translations.
- Load frontend assets only when a scroll-enabled Image block is rendered.