Hwinote Image Scroll
| 开发者 | hwinote |
|---|---|
| 更新时间 | 2026年10月11日 12:22 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- 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.
安装:
- 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.
屏幕截图:
常见问题:
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 800x1600 image, the ratio is 2; for an 800x1200 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.
更新日志:
- 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.