manifest / editor / device-frame-showcase

Device Frame Showcase

Display your screenshots inside beautiful device frames — browser windows, iPhones, MacBooks, iPads, and Android phones.

by Device Frame Showcase · github.com/tomfinitely/device-frame-showcase

★ 0stars

0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/tomfinitely/device-frame-showcase/archive/refs/heads/main.zip

Readme github.com/tomfinitely/device-frame-showcase ↗

Display your screenshots inside beautiful device frames — browser windows, iPhones, MacBooks, iPads, and Android phones.

Description

Device Frame Showcase lets you wrap any image in a realistic device mockup directly in the WordPress block editor. Choose from several frame types:

Browser — A minimal top-bar chrome (traffic-light dots and address bar) that sits above the image with no surrounding border, perfect for showcasing web designs.
iPhone — A modern smartphone frame with rounded corners and a notch, with the image scrollable inside the viewport area.
MacBook — A laptop frame with a screen bezel and keyboard base, scrollable image content.
iPad — A tablet frame with slim bezels and home indicator, scrollable image.
Android Phone — A modern Android device frame with a punch-hole camera, scrollable image.

The block supports full width alignment options (wide, full), custom dimensions, and spacing controls — everything you would expect from a core WordPress block. On the front end, device frames allow vertical scrolling so visitors can explore tall screenshots interactively.

Installation

Upload the plugin files to the /wp-content/plugins/device-frame-showcase directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the 'Plugins' screen in WordPress.
Add the "Device Frame Showcase" block in the editor, upload or select an image, and choose your device frame.

Frequently Asked Questions

Can I change the frame type after inserting the block?

Yes! Use the block inspector sidebar to switch between Browser, iPhone, MacBook, iPad, and Android Phone at any time.

Does the image scroll inside device frames?

Yes. When a device frame (iPhone, MacBook, iPad, Android) is selected, the image area is scrollable on the front end, allowing visitors to explore tall screenshots.

Does the browser frame wrap the entire image?

No. The browser frame only renders a top chrome bar (with traffic-light dots and an address bar) above the image. There is no surrounding border or bounding frame.