[WordPress] 外掛分享： Browser Mockup & Scrolling Screenshot Portfolio – Amitry Project Grid

外掛標籤

開發者團隊

原文外掛簡介

Amitry Project Grid is a browser mockup and scrolling screenshot plugin for WordPress. Upload a full-page website screenshot and it appears inside a clean browser frame that scrolls through the entire page when a visitor hovers over it. Group these project cards into a responsive portfolio grid to showcase your work.
It is built for agencies, freelancers, and anyone who needs to display websites: a portfolio grid, a project showcase, a case-study layout, or a single website preview.
See the live demo
Why a scrolling browser mockup?
A flat screenshot only shows the top of a page. A browser mockup that scrolls on hover shows the whole website, looks interactive, and invites a click. It is the difference between a static image and a living portfolio.
People search for this kind of tool under many names: browser mockup, scrolling screenshot, website preview, website mockup, portfolio screenshot grid, project showcase, or a website frame for WordPress. Amitry Project Grid covers all of these, and you can add it as a block, a shortcode, or an Elementor widget.
Key features

Browser mockup frame with traffic-light dots and an address bar
Scrolling screenshot on hover (desktop) with automatic playback on touch devices
Responsive portfolio grid with a 1 to 6 column setting
Works as a Gutenberg block, a shortcode, and an Elementor widget
Optional caption, call-to-action button, and click-through link per card
Keeps full-page screenshots sharp by using the original uploaded image
No external services, no API keys, no tracking

What is on a card

Icon (Dashicon picker or an uploaded image)
Headline with a selectable heading level (H2 to H6)
Description with basic inline formatting (bold, italic, links)
Browser-mockup screenshot with hover-scroll for full-page images
Optional caption shown below the mockup
Call-to-action button with text, URL, and target

Three ways to add it

Project Grid block: a grid container with a 1 to 6 column setting, responsive on smaller screens
Project Card block: a single card, used standalone or inside a grid
Shortcode [apshow_project_card] for classic themes
Elementor widget that loads only when Elementor is active

How the mockup works
The uploaded screenshot is rendered inside a browser-style frame. On a desktop, hovering scrolls the image from the top to the bottom of the screenshot, then it returns when the cursor leaves. On touch devices the scroll plays automatically when the card enters the viewport, and tapping replays it. Reduced-motion preferences are respected.
The plugin uses the original uploaded image, not the WordPress auto-scaled copy, so even very tall full-page screenshots stay sharp inside the mockup.
Privacy
The plugin makes no external network requests. No data is collected, transmitted, or stored outside your own WordPress installation.
For developers
The plugin exposes hooks for extensions:

apshow_renderer_defaults, apshow_wrapper_classes, apshow_render_html, apshow_kses_allowed (filters)
apshow_allowed_frames, apshow_allowed_scroll_modes, apshow_mockup_bar_html, apshow_mockup_html (filters for extending mockup frames and animation modes)
apshow_before_render, apshow_after_render, apshow_loaded, apshow_activated, apshow_deactivated, apshow_admin_about_after_content (actions)
APSHOW_HOOK_VERSION constant for compatibility checks