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!
- 112 views
- 6 previews
- 1 version
- 7 replies
- 4 followers
- Posted By:
- Benjamin Kahn
- January 5, 2021
About this forum
- 11,412 views
- 176 topics
- 3476 followers
7 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 Ben, I couldn't get your code to work. I sent you msg with more details.