=== Browser Mockup & Scrolling Screenshot Portfolio - Amitry Project Grid ===
Contributors: amitry
Tags: browser mockup, scrolling screenshot, website preview, portfolio, showcase
Requires at least: 6.2
Tested up to: 7.0
Requires PHP: 7.4
Stable tag: 1.0.3
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Browser mockup plugin that shows website screenshots scrolling on hover. Build a portfolio grid of project cards with a live website preview.

== Description ==

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](https://demo.amitry.de/)

= 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

== Installation ==

1. Upload the plugin folder to `/wp-content/plugins/` or install it via the Plugins screen.
2. Activate the plugin.
3. Add the "Project Grid" or "Project Card" block, use the `[apshow_project_card]` shortcode, or add the Elementor widget.

== Frequently Asked Questions ==

= Do I need an external service or API key? =

No. The plugin works entirely with images you upload to your own media library.

= Can I use just one card without the grid? =

Yes. The Project Card block works standalone.

= Does it work with my theme? =

The blocks, shortcode, and Elementor widget work with any standard WordPress theme. Wide and full alignment on the grid require a theme that supports those alignments.

= Is Elementor required? =

No. The Elementor widget only registers when Elementor is active.

= How tall can my screenshot be? =

Any height. The plugin reads the original uploaded image, so even very tall full-page screenshots stay sharp inside the mockup.

= How do I get the scrolling effect? =

Upload a full-page screenshot (a tall image of the whole page). The mockup scrolls through it on hover. A short screenshot has nothing to scroll, so use a full-page capture for the best effect.

== Screenshots ==

1. The hover effect in action: a full-page website screenshot scrolling inside a browser mockup.
2. The Project Card block in the editor with all fields filled in.
3. A Project Grid block with three cards; set 1 to 6 columns in the sidebar.
4. A single card on the frontend, and the same card during hover showing the screenshot scrolled.
5. Sidebar controls for the icon, headline, mockup, and call to action.

== Changelog ==

= 1.0.3 =
* New: optional caption line below the mockup (block, shortcode, and Elementor).

= 1.0.2 =
* Added a link to the live demo.

= 1.0.1 =
* Renamed the single-card shortcode to `[apshow_project_card]` for prefix consistency.
* Readme: clearer title and description for the browser-mockup and scrolling-screenshot use case.

= 1.0.0 =
* Initial release.

== Upgrade Notice ==

= 1.0.3 =
Adds an optional caption below the mockup.

= 1.0.2 =
Adds a link to the live demo.

= 1.0.1 =
The shortcode tag is now [apshow_project_card]. Update any existing shortcodes.

= 1.0.0 =
Initial release.
