Iframe Sidebar for the ProcessWire page edit screen. RockIframe shows a preview of any content that can be rendered in an iframe and keeps the page editor 100% visible to the user.

RockIframe

Iframe Sidebar for the ProcessWire page edit screen

Problem


Sometimes the editor wants to see a preview of a file while editing a page. For example this can be helpful when digitizing invoices. Regular ProcessWire panels can be used for preview but overlap the page editor so the user has to open and close the panel repeatedly while working.

RockIframe shows a preview of any content that can be rendered in an iframe and keeps the page editor 100% visible to the user.

Usage


Simply call $modules->get('RockIframe')->show('path/to/your/file.pdf') anywhere in the admin to show your data in a sidebar iframe on page load. You can also define a Pagefile(s) object as source of the iframe.

Example


This example shows the first file of the field myfilesfield on the page edit screen of pages having template mypagetemplate:

$wire->addHookAfter("ProcessPageEdit::buildForm", function($event) {
  $page = $event->process->getPage();
  if($page->template !== 'mypagetemplate') return;

  /** @var RockIframe $iframe */
  $iframe = $this->wire->modules->get('RockIframe');
  if($iframe) $iframe->show($page->get('myfilesfield'));
});

img

$wire->addHookAfter("ProcessPageEdit::buildForm", function($event) {
  $page = $event->process->getPage();
  if($page->template !== 'mypagetemplate') return;

  /** @var RockIframe $iframe */
  $iframe = $this->wire->modules->get('RockIframe');
  if($iframe) $iframe->show("http://www.example.com");
});

img

Ideas & Notes


PDF preview relies on the browser's capability to preview PDFs. Also at the moment there are no checks which content is thrown to the iframe as source. For images for example we could use https://leafletjs.com/examples/crs-simple/crs-simple.html to enable panning & zooming on the image. For better browsersupport of PDF we could use https://mozilla.github.io/pdf.js/web/viewer.html;

Mobile view is not yet taken care of... Ideas or help welcome - but I'm using it for desktop-only and backend-only apps at the moment.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • This week ProcessWire (3.0.175) gained the ability to maintain separate read-only and read-write database connections to optimize scalability, cost and performance. The post covers why this can be so valuable and how to configure it in ProcessWire— More
    2 April 2021
  • ProcessWire 3.0.174 core updates: improvements to the new path/URL hooks and more— More
    12 March 2021
  • ProcessWire 3.0.173 adds several new requested features and this post focuses on one of my favorites: the ability to hook into and handle ProcessWire URLs, independent of pages— More
    5 March 2021

Latest news

  • ProcessWire Weekly #361
    In the 361st issue of ProcessWire Weekly we'll take  closer look at a new third party module called Copy Markdown, and check out the latest weekly update from Ryan. Read on!
    Weekly.pw / 10 April 2021
  • ProcessWire 3.0.175 adds new database scalability options
    This week ProcessWire gained the ability to maintain separate read-only and read-write database connections to optimize scalability, cost and performance. The post covers why this can be so valuable and how to configure it in ProcessWire.
    Blog / 2 April 2021
  • Subscribe to weekly ProcessWire news

“I am currently managing a ProcessWire site with 2 million+ pages. It’s admirably fast, and much, much faster than any other CMS we tested.” —Nickie, Web developer