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

A message to Russian people


If you currently live in Russia, please read this message.

SWUbanner


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

  • A review of weekly core updates, plus a simple recipe for a very effective listing cache—More
    24 June 2022
  • Weekly update: Making ProcessWire render pages at old WordPress URLs (or building a simple/custom URL router in PW): More
    17 June 2022
  • New post: ProcessWire now comes with just 1 site installation profile, the "blank" profile. It makes very few assumptions, making it a minimal though excellent starting point. Here’s how you might use it— More
    10 June 2022

Latest news

  • ProcessWire Weekly #424
    In the 424th issue of ProcessWire Weekly we'll check out the latest weekly update from Ryan, introduce a new third party module, and more. Read on!
    Weekly.pw / 25 June 2022
  • Starting a site with the “blank” profile
    ProcessWire 3.0.200+ comes with just 1 site installation profile, the site-blank profile. This profile makes very few assumptions, making it a minimal though excellent starting point. Here’s how you might use it. 
    Blog / 10 June 2022
  • Subscribe to weekly ProcessWire news

I just love the easy and intuitive ProcessWire API. ProcessWire rocks!” —Jens Martsch, Web developer