Ben's tips: Making the document viewer taller
I get a LOT of questions from my users about how to use Igloo. Some of these questions are interesting enough to share widely. I'll try and remember to post some of the questions (and hopefully answers!) here.
The Igloo Document Viewer
The Igloo document viewer is used to display PDF and Office documents. It suffers from a number of problems and limitations, but the biggest issue I get asked about is the default small size. Here's an example of a document being previewed:
There are a number of ways to fix this inside a Folder channel, but when users try to embed a document on a page, the size is fixed.
The document above produced code similar to this when clicking on the embed link:
<iframe src="//example.igloo.com/embed.media?data=9712f715-5320-4897-b856-8ebce3add27d" width="100%" height="525" frameborder="0" allowfullscreen ></iframe>
Simply insert this code into an HTML widget, and the document appears on the page.
It looks straightforward to increase the height of the frame, right? Just increase the 525 number! But it doesn't work; you'll get a bigger space for the document on the page, but the same small viewer.
So what can be done? The problem is that flexpaper, the widget Igloo is using to display the PDF document, is hardcoding the small size in the code. The second problem is that we can't use CSS code to change the size because the CSS of a document can't change the CSS inside an iframe.
The solution is to insert Javascript into the HTML widget. First, add the class "pdfresizer" to your HTML widget.
Then insert this at the end of the source code to your HTML block:
<script> jQuery('.pdfresize iframe').each(function(i, frame) { frame.addEventListener("load", ev => { let new_style_element = document.createElement("style"); new_style_element.textContent = ".flexpaper_viewer_container { height: " + ev.target.contentDocument.getSize().y + "px !important; } .js-flashpaper,.flexpaper_pages {height: " + (ev.target.contentDocument.getSize().y - 62) + "px !important;}"; ev.target.contentDocument.head.appendChild(new_style_element); }) }); </script>
This code will find all the iframes on the page inside a widget with a class of pdfresize, wait until they are finished loading, and then reach inside and edit the hard-coded sizes to make the appropriate change. The full example looks like this:
<iframe src="//example.igloo.com/embed.media?data=9712f715-5320-4897-b856-8ebce3add27d" width="100%" height="800" frameborder="0" allowfullscreen ></iframe> <script type="text/javascript"> jQuery('.pdfresize iframe').each(function(i, frame) { frame.addEventListener("load", ev => { let new_style_element = document.createElement("style"); new_style_element.textContent = ".flexpaper_viewer_container { height: " + ev.target.contentDocument.getSize().y + "px !important; } .js-flashpaper,.flexpaper_pages {height: " + (ev.target.contentDocument.getSize().y - 62) + "px !important;}"; ev.target.contentDocument.head.appendChild(new_style_element); }) }); </script>
I hope this helps someone!
23 Replies
This works great, thanks for the information! You mentioned that this can also be done for a folder channel. How would one do that?
Judy Headrick The easiest way would be to add some code to your site theme. For example:
Note that this will not resize depending on screen size; more complex CSS can solve that if needed.
Benjamin Kahn Thanks!
Thank you! You must have been reading my mind
Thanks Ben, I was playing with CSS settings for this as well but couldn't hack it out.
Is there also a way to force the document to Fit Vertical on page load?
Brett Anderson Yes....
The Flexpaper object is a little tricky to get to. I found it here:
From there, you can call the sizing options. For example:
or
Next, you need to determine WHEN to call the sizing function; likely after the rendered event is thrown. (In the code above we're looking for Page rendering. But we'll need to watch for PDF rendering or initialization.) But I haven't checked how to do that. You could always just call the function after waiting a couple of seconds, I suppose.
Note that these functions are directly accessing FlexPaper. This means that it'll work on a page inside a folder channel. On a page with an embedded widget, you'll need to locate these methods and variables inside the iframe. That looks like this mouthful:
Yuck.
Thanks Benjamin Kahn, I couldn't get your code to work. Is your code for the viewer or the document?![](/.api2/binaries/gBzHQFrXsq/thumbnails/vertical.PNG?width=300)
edit: I am trying to get the document inside the viewer to fit vertically to the window on page load. The exact function when the Fit Page button is clicked below.
Brett Anderson
There were two code blocks above; the first is for the document view; the second is when viewing the document embedded on a page.
To test, you should try the code in the Javascript console in your browser. It should "click" the fitHeight() button.
Note that the second code block doesn't include the fitHeight() call. It just gets at the object that has the call. You'll need to append the function at the end.
Also, as I noted, the function should be called once the flexpaper object is ready to receive it. I didn't investigate how to tell when it's ready. Step 1 is just getting access to it.
Thanks Benjamin Kahn , I was able to fit the document in a folder using the fitheight code in the Chrome console. I'll see if I can run the code on page-load. Much appreciated.
Hi, I have a similar problem so hoping this discussion group can help.
I am using the viewer to view a PDF that is made up of 5 portrait pages and the 6th page is landscape. By default the viewer shows this document on the first page but with the scroll bar positioned based on the center of the landscape page. Is there any code I can add so that the first page is shown left justified or with the scroll bar centred on the first portrait page.
The current result looks sloppy.
Thanks in advance for help.
Louise
Louise Burke I have finally been able to add some code to trigger the vertical button click on page load.
First you need to get the guid number from the embed code of the document.
From this : <iframe src="//server.com/embed.media?data=8640b6d7-97dc-47f9-8cd3-35fcb1014268" width="100%" height="525" frameborder="0" allowfullscreen ></iframe>
You need to copy the guid number from data= and store that in notepad.
2: From Folder Channel where document lives, go to Advanced, paste in the following code: (replacing the guid below with your guid)
<style type="text/css">
.flexpaper_viewer_container {
height: 700px !important;
}
.js-flashpaper,.flexpaper_pages {
height: 638px !important;
}
</style>
<script type="text/javascript">
//<![CDATA[
setTimeout(function() {
jQuery("#toolbar_flexpaper_8640b6d7-97dc-47f9-8cd3-35fcb1014268 > img.flexpaper_tbbutton.flexpaper_fitmode.flexpaper_fitheight.flexpaper_bttnFitHeight").click();
},2000);
//]]>
</script>
If you need to use the embeded iframe, you need to add this code after the click() function in the code above:
Benjamin Kahn fyi.
Brett Anderson Tried what you suggested on the Wiki Article but it did not work.
I am not a coder so just copied and pasted as per your instructions into the Javascript code area after selecting the advanced option from the wiki article actions.
Tried, with and without the extra step in respect to the embedded iframe option but did not make any difference. Article continues to display with hotizontal scoll bar centred based on the single landscape page at the end of the document.
Louise Burke The code above is for the source document located in the folder channel and for the html widget using Benjamin's iframe code.
For a wiki article, its the same concept, except where you paste the embed code, include class="pdfresize" to the <div> in the code. so it should be
<div class="pdfresize">
Then the code in the Advanced area should be: (replacing the guid with your document guid)
<script type="text/javascript">
//<![CDATA[
setTimeout(function() {
jQuery("#toolbar_flexpaper_8640b6d7-97dc-47f9-8cd3-35fcb1014268 > img.flexpaper_tbbutton.flexpaper_fitmode.flexpaper_fitheight.flexpaper_bttnFitHeight").click();
jQuery('.pdfresize iframe')[0].contentDocument.window["FlexPaperViewer_Instance" + Object.keys(jQuery('.pdfresize iframe')[0].contentDocument.window.Igloo.FlexPaperViewers)[0]].fitHeight();
},2000);
//]]>
</script>
I've just tested this and it worked for me:![noname_1616540803342](/.api2/binaries/KleCvwI2Xs/thumbnails/noname_1616540803342?height=224&width=345)
Hi Brett, still not working for me. This is my Javascript.
Brett,
does your workplace learning wiki article have landscape pages in it ?
Louise Burke Yes, the document last page is landscape.
Have you tried the code where the source document lives in the folder channel?
Also, best to send me a direct message to my profile, so we don't overtake Benjamin's original discussion topic.
Thanks.
Hi Brett, I re-read your instructions and now realise there are 2 different code areas I need to copy your code into;
1. In View panel code area - include <div class="pdfresize">
2. In advanced Java script area - include all the rest (with the correct guild number)
It does work but id does reduce the scale to 44%
Louise Burke Brett Anderson So I've stayed mostly silent on this discussion because of the new document viewer that Igloo was promising that is not based on the Flexpaper platform. Now that the new previewer is about to be released, it's time to discuss the new viewer.
I found a sample PDF with mixed page sizes here: https://researchtorevenue.files.wordpress.com/2015/04/1r41ai10801601_fong.pdf
Here is how it previews in the flexpaper viewer by default:
It's very interesting that the new viewer resizes each page to have the same WIDTH, so landscape pages will have different zoom levels than portrait pages:
The new viewer appears to be a React component, but I haven't explored much about it.
Benjamin Kahn Thanks Benjamin, this is great news. Look forward to seeing it rolled out soon.
Thanks Benjamin, that new viewer looks like exactly what I need. When is it being rolled out and available for use ?
Hi Benjamin Kahn , with the new document viewer, have you noticed hyperlinks not working for Word or PDFs?
Brett Anderson Yeah. That's a bug in the new viewer. We've been told that Igloo will get it fixed soon...
Our customer success rep gave us a hint that you can replace the Igloo PDF viewer with the browser's built in viewer. So, we created two small JavaScript snippets which might help you. You can run these by loading the Javascript console on the page ( Ctrl - Shift - I usually?)
Replace the built in viewer with the browser viewer:
pdfurl = document.location.protocol + "//" + document.location.host + jQuery('#ig-button_download_pdf').attr('href').replace(/;v[0-9]+/, '').replace("attachment=1", "attachment=0"); pdfheight =jQuery('#ig-leafpreview').height(); pdfwidth = jQuery('#ig-leafpreview').width();pdfembed = '<iframe height="'+pdfheight+'" width="'+pdfwidth+'" src="' + pdfurl + '"></iframe>'; jQuery('#ig-leafpreview').html(pdfembed);
Popup an embed code users can use in widgets:
pdfurl = document.location.protocol + "//" + document.location.host + jQuery('#ig-button_download_pdf').attr('href').replace(/;v[0-9]+/, '').replace("attachment=1", "attachment=0"); pdfheight =jQuery('#ig-leafpreview').height(); pdfwidth = jQuery('#ig-leafpreview').width(); pdfembed = '<iframe height="'+pdfheight+'" width="'+pdfwidth+'" src="' + pdfurl + '"></iframe>'; pdfembedEscape = jQuery('<div/>').text(pdfembed).html();alertify.alert('PDF Embed Code', "<input value='"+pdfembedEscape+"'>");
To try them, just try cutting and pasting these lines into the console and pressing ENTER.
The first code snippet might be interesting to replace the viewer on each page load.
The second one would be interesting as a button or a menu item added to the page itself.
Actually installing this code onto your install is a little more involved, but not impossible.
We aren't running this on our site -- I'd rather wait for the real fix -- so it's possible that there are problems with this code.
Benjamin Kahn Thanks, this is very helpful.
I don't want to mess with the Server files but I might use the script on a per doc basis. At least we have some options.