A nifty way to view PDF files: embedding the Issuu.com player in Commonspot pages.
I'll be using an upload of the 2009 SCU Viewbook for this example.
Upload PDF to Issuu.com
- Accounts are free @ Issuu.com. Create your account. Login.
- Uploads are restricted to 100MB/500 pages.
To start, click Upload Document, click Upload a file radio button, browse your computer to the PDF file you want to upload.
Fill in the blanks:
General Info
- Title: 2009 Santa Clara University Viewbook
- Description: 2009 Santa Clara University Viewbook
- Web name: 09viewbook
- Keywords: viewbook, scu, santa clara
- Info Link: http://www.scu.edu/ugrad/viewbook/2009
- Type: Catalog
- Child-safe: Yes
Target your audience
- Category: Knowledge & Resources
- Language: English
- Target area: The World
Media > Choose options
Publishing options > Choose options
Sharing options > Choose options
- Download, yes. Comments, Rating, no.
Click Upload file
Grabbing the embed code
Click Private in lefthand navigation.
- In the bookcase at right, click on the file you just uploaded.
- Click <>Embed in the top navigation. A form overlays the page.
Leave everything default except:
- Size: Click Custom size and type 599 in the first field and 394 in the second field.
- Copy the embed html code that Issuu generates.
Making the connection
Create page containing embed html code:
- Use a text editor, create a new, blank page and add open and closing cfoutput tags:
- Copy the embed html code from issuu.com and paste it between the two cfoutput tags.
- Give the file a meaningful name: 09viewbook.cfm
- Login and upload to Commonspot: http://cms.scu.edu/ugrad/viewbook/2009/upload.cfm
- Click to highlight the customcf directory
The flash player embedded with an issuu script has a conflict with Commonspot's menu for this element - the player is displayed above the menu, so you can't modify or delete the element once added. This is a problem in Firefox and IE on Windows - it works fine using Firefox on a Mac.
To fix the problem, users should add ' class="cpHideForMenus"' to the opening object tag - it should look like this:
<object style="width:599px;height:394px" class="cpHideForMenus">
The cpHideForMenus CSS class is only used in Author mode - it causes the element to be hidden when you mouse over any authoring icon, and that allows you to get to the menu for this element.
Putting it all together
Create page in Commonpsot using your sub-site template.
- Add the Custom Script element: Element Gallery > Miscellaneous Elements > Custom Script
Add the relative path to the in the 'Explicit Module' field of the Properties window
- /ugrad/viewbook/2009/customcf/09viewbook.cfm
Click Finish
Alternative Method
- Click Private in lefthand navigation
- Click on the uploaded file in the bookcase.
- Click <>Embed in the top navigation. A form overlays the page.
- Click the Standalone with styling radio button. (Clicking Issuu will open the PDF in their site chrome)
Select and copy the URL in the Link to field at the top of the form.
http://issuu.com/omcweb/docs/09viewbook-test?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBtn=true
Feel free to use TinyURL to shorten that monster link!
The above URL will open their player in a window without any chrome. Hide the URL behind a label.
If you want to link to a specific page in the PDF, add &pageNumber=n (where n=the page number of the uploaded PDF) at the end of the URL...
http://issuu.com/omcweb/docs/09viewbook-test?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBtn=true&pageNumber=8
