Quick Preview It!
Contents
Quick Preview It!
Quick Preview It! (QPI!) lets you see a live preview of any page you create with an HTML editor. What's so special about that?
It lets you see the contents of all the SBI! Include files that you've added to the page, along with images, video and audio players, and CSS styling.
So you can see exactly what the page will look like when you publish.
Important
Quick Preview It! runs on Java (not JavaScript) as an app on your computer. Browsers no longer support Java applets, so you will have to download and install an application that we created just for this purpose.
To ensure that this Java app will run on your computer, download and install the latest Java JRE here...
Downloading the QPI! App
If you use Windows, download the .exe executable file. If you use Mac OS, download the disk image.
Once downloaded, run the executable or launch the disk image to install the app on your computer.
Any time you want to preview an HTML file, run the app.
Windows
Double-click to open the app (likely found in your Downloads folder -- move it to your desktop or Documents folder to make it easier to access it).
Mac
Double-click on the DMG file (likely located in your Downloads folder). A Finder window will open.
Drag QuickPreviewIt.app to your Applications folder.
If you use a newer version of Mac OS, right-click (or control-click) on the app in the Applications folder and select Open from the context menu.
A message will appear that QuickPreviewIt cannot be opened because it's from an unidentified developer.
Click on the Open button below that message to whitelist the app and launch it for use. After this first time, double-clicking to launch should work.
If you use an older version (before Mavericks), simply double-click on the app to launch it the first time.
Choosing an HTML File to Preview
As soon as you open QPI!, you'll see a dialog box with a large button that says Click To Choose an HTML File To Preview. Click on that button. Navigate to the page file you want to preview.
Select the file you want to open. The local URL for the file will display below the large button. To open the preview, click on the Open Page in Browser button.
A new browser window will open, displaying the preview of the file you selected. Any correctly referenced files you stored in the folders (images, SBI! Includes content) will display along with the design and the body content.
If you have your browser set to open new tabs, the preview may appear in a new tab rather than a new window.
Very Important
QPI! will not open the file if you do not have your site's local folder structure set up properly. You must have the following folders set up in your root folder...
-
image-files
-
support-files
-
media-files
You must also have all SBI! Include files (files ending with .shtml ) at the root level (the same level as the page files, which end with .html ). To sort your includes easily, start all includes file names with "z" (e.g., z-navinclude.shtml).
For more information about setting up your local file and folder structure, read the Integration Guidelines for Upload Your Own HTML.
For QPI! to work most effectively, you need to relative-reference all images and media files, the CSS file and any other support files, but especially all links to other pages of your site. See the Integration Guidelines for more about this as well.
If your folders and files are not set up correctly, QPI! will return an error message informing you that you need to change your set up.
Quick Preview It! does not preview functionality tags, such as ***NAVBAR***, ***SOCIALIZEIT*** and Face It! tags, and it does not preview FBI! forms and Content 2.0 invitations.
Previewing Additional HTML Files
The original QPI! app window remains open after you open the browser preview.
To preview another page in your browser, simply click on the relative-referenced link in your custom navigation, if it's a Tier 2 page (you will not see your navigation if you use either of the navigation functionality tags).
If it's a Tier 3 page, click on the in-context link in its related Tier 2 page. As long as the links are relative-referenced, the next page will replace the current preview in that same window or tab.
You can also view another page by changing the file name in the browser's address bar, or closing the browser window, selecting another file in the app, then clicking Open Page in Browser again. You can also do this if you have more than one SBI! site and wish to preview them all.
Editing and Previewing HTML Files
If you don't like what you see in the preview, edit the file in your HTML editor and save it. Then refresh the QPI! preview to see the latest changes (you do not need to start over again, reselecting the file).
Once you're satisfied that the page is exactly how you want it, go to Upload Your Own HTML or Quick Upload It! and upload the file.