Presenting PDF files in Revo?

1,161 Posts

Photowebmax Reply #1, 13 years, 7 months ago

I have a new site where the owner would like to add presentation "cards" that formatted as PDF files. Each card has a lot of intricate layout (text and graphics) happening and converting them to html and css would take a ton of work. What is the best way to present PDF files in Revo?

1,161 Posts

Photowebmax Reply #2, 13 years, 7 months ago

I found the FileLister snippet. This might work but it does add some ugly default styling...

1,145 Posts

donshakespeare Reply #3, 13 years, 7 months ago

You mean, presenting PDF files as PDFs or as something else?

Comes to mind (what I use): Create a new content type, PDF/application etc, point the new static resource using that content type to the PDF on your server. Of course the new resource will have no template, but it will enjoy MODx' privileges as opposed to raw PDFs

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

1,161 Posts

Photowebmax Reply #4, 13 years, 7 months ago

I am trying to create a container page using getResources that will then aggregate all the PDFs via aTV that the site owner can manage. So far the syntax of template and the tv allude me...

1,161 Posts

Photowebmax Reply #5, 13 years, 7 months ago

OK, I ditched the FileLister snippet and went with a template that included a TV for the PDF file name and a TV for the PDF file path. Finally got it working.

Unless there is a better way I think I might go with this. The PDF just gets presented on a blank page, away from the main site template. I know there must be a way to use a jQuery script to "float" the PDF file on top of the parent site witch would add some eye candy...

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 13 years, 7 months ago

Use AJAX to call the PDF page and load it into an empty div container, and the Javascript would make the div an overlay. It's called a "modal dialog" and there are tons of demos, tutorials, and JQuery plugins for them.

http://www.jquery4u.com/windows/14-jquery-modal-dialog-boxes/

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

152 Posts

Henrik Nielsen Reply #7, 13 years, 7 months ago

You could also present the PDF directly in the ressource with this:

<object width="548" height="548" data="[[*your-tv]]" type="application/pdf">
<param name="src" value="[[*your-tv]]" />
Click <a href="[[*your-tv]]">here</a> to view the file. <!-- For browsers who don't understand the object/param -->
</object>

- A small step for mankind, so why not take two...

Working with web production, graphic design/workflow, photo and education - but are trying to get a life in between!

1,161 Posts

Photowebmax Reply #8, 13 years, 7 months ago

Thanks All,

I tried a few things and ran into troubles. In the end I went back to the FancyBox jQuery script I have always had good luck with (I once helped the developer with graphics). I added all the FancyBox elements to the server, added the required code to the head and then could not get it to work. Thinking the source file to be "popped" needs to be a PDF I tried changing the file to an image as a test and then the script worked. So the code needed to target PDFs directly. I found this http://stackoverflow.com/questions/8803927/displaying-pdfs-in-jquery-popup page which had a solution for PDF files. I changed the code and the container page now uses two Revo TVs and the FancyBox script to present the PDF files perfectly...

Happy Day!

1,161 Posts

Photowebmax Reply #9, 13 years, 7 months ago

Unfortunately there is one big issue:

On the iPad the PDF gets cut off halfway through the content with no way of scrolling downwards?

I am using this to trigger the FancyBox script:

$(document).ready(function() {
   30 $(".pdf").click(function() {
   31  $.fancybox({
   32   'width': '70%', // or whatever
   33   'height': '90%',
   34   'autoSize': false,
   35   'content': '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
   36   
   37  });
   38  return false;
   39 }); // pdf 
   40}); // ready

Any ideas here please?

1,145 Posts

donshakespeare Reply #10, 13 years, 7 months ago

I don't use apple products much anymore. Their appliances may be powerful, but the restrictions in them can be mind throttling .
No flash in Ipad? Impressive!
Stuck with itunes? o dear!
Scrolling iframes in Ipad, a luxury? I guess!

Check http://www.lemon8.nl/ipads-and-iframe-scrolling/ if you can bear the solution.
Hope you get your PDF presentation done...

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.