Here at CNP Integrations we’re always tackling interesting challenges, or slving unique problems for our customers. A few weeks ago we ran into yet another one. Here’s what we were up against.
A client was using the popular ZOO content construction kit to easily create a variety of content types for their site. One of the requirements was to be able to upload a pdf, and have it available both as a link to download, AND as a pdf embed. The link part was easy - ZOO provides an excellent field element to allow you to select files to allow a user to download. The tricky part was with embed - Identifying a method to allow the client to embed files on the site, without having to add steps to their content creating workflow.
What we did was actually pretty interesting, and simple. By using the power of Google’s Document Viewer engine, we can allow a site owner to have a single field, with a single file, that can be available to link to, as well as embed. And since we’re using Google’s engine, it supports all kinds of file types - PDF, DOC, PPT, XLS, most image formats, and even some fun ones like PSD, TIFF, AI, and DXF (CAD Drawings).
Now for the details. One of the goals of this was to allow the owner to upload one file, one time - keeping his content creation workflow simple, while adding these new features. So instead of creating an entirely new ZOO element which would require two uploads, we piggy-backed off the existing file download element - making some easy, quick modifications, to add some great new features. Here’s what we did:
In /media/zoo/elements/download/tmpl/download.php you find the list of options for displaying the file for a file download. By default, there are options (cases) for image, link, button, etc. We’re going to add a new one. So around line 44, right before the “default” case, we’re going to add the following:
case 'viewer':
if ($limit_reached) {
echo '< div class="yoo-zoo element-download-type element-download-type-'.$filetype.'" title="'.JText::_('Download limit reached').'"> < /div> ';
} else {
echo '< iframe src="http://docs.google.com/gview?url=http://yourdomain.com/'.JRoute::_($download_link).'&embedded=true" style="width:100%; height:700px;" frameborder="0"> < /iframe> ';
}
break;
Don't forget to change the url value. Change http://yourdomain.com/ to whatever your actual domain and Joomla! root path is.
There - now we’ve added the ability to display the file as a file embed on the frontend to the existing list of options. But we’ve got a couple more steps to go. We still have to add this new capability as an option to select when we are creating our content types from the backend.
So we need to head over to /media/zoo/elements/download/download.xml
Here we find the list of options and parameters that are available when we add an element to a frontend view. Around line 23 you’ll see the display options, controlling how the file is displayed to the user. At the end of that list, we’ll just add a single line:
<option value="viewer">File Viewer</option>
NOTE: You can change the text displayed (File Viewer) to whatever text is most appropriate for your site. You can also change the value (viewer) to whatever you'd like as well. Just remember, if you change the value here, make sure you change the name of your case in the download.php file.
Save that file and we’re done! Now, when you select the “File Viewer” option from the ZOO element parameters when adding elements to a view for your content type, your file will utilize the Google Docs Viewer engine to actually embed the file right in your site! You can still use the link, or image, or button options as well to offer a download if you want.
Follow