Stacks4Stacks

Paperless uses server-side PHP code to scan a directory of files and automatically construct a list of available file downloads. By using Paperless, you do not need to manually create the links and republish your website each time. This means it is perfect to use in conjunction with a CMS, the free Droplet or FileMan stacks, or in instances where a client already has the ability to 'FTP' files into a directory on the hosting server. Alternatively, Paperless will happily run from a directory of files you add to the RapidWeaver sidebar as a 'resource'.

Ordinarily, organisation of digital files can quickly become a messy process! Changes in files can often result in broken links on a website; which might go unnoticed for many weeks. Sometimes files are not presented in the desired order (like newest first). Paperless efficiently solves these common problems, through presentation of files in a logical order, within a tidy, table interface. File names are extrapolated from the original file name and converted into a more 'human readable' format; without the ugliness of dashes, underscores, hyphens or extensions. You can control precisely what order files are shown in as the page loads. If you have lots of file download links, then people can toggle how many to show per-page, they can search for files using the live search box or they can click the table headings to re-sort files.

This mobile responsive stack is infinitely more powerful than the 'File Sharing' page type that is shipped with RapidWeaver already. Paperless can work within a passworded section of a website (like the excellent Sitelok system by Vibralogix) and there are many options to translate and restyle the entire table interface. Multiple Paperless stacks can be safely used on the same webpage. Theoretically there's no limit to the number of files you can list with this stack.

Example

This is a working example of Paperless, with the default settings applied, being used to display a selection of images and other files for download. The stack was placed inside a free UsefulStack to constrain its width and apply the grey border.

Setup

Follow these instructions carefully for setting up Paperless

1. Once installed into Stacks and RapidWeaver, open your Stacks Library and search for Paperless
2. Drag and drop a copy of the stack into your webpage
3. Create a folder on your desktop named 'downloads' and place a variety of different file types within
4. Add this new folder as a resource, in the RapidWeaver sidebar
5. Any other style or layout settings can be customised as required in the Paperless settings
6. Preview your webpage in RapidWeaver. You should find your simple folder of resources is displayed in the page

Paperless will change your page file extension to .php in the RapidWeaver Page Inspector. Please do not try to change it to something else, as this may break the stack. RapidWeaver may alert you if a conflicting .html page already exists on the web server. Take-down any .html pages that already exist at the location you are publishing Paperless to.

If you want to have Paperless use another file directory on your server, you need to edit the Relative Path setting. It is very important that you provide a relative path to the directory, and not a link starting 'http:// or https://'. PHP is a server-side programming language and does not understand normal web links that you see in your browser address bar. If you have not used relative links before in web design, then you are missing out on various advantages; including improved speed and security. You can search online for more help on using relative paths. In essence, they are as simple as ../ for each level from the current page back to the website root, and then the breadcrumb trail down to the directory holding the files.

Example webpage hosting Paperless:

https://example.com/brochures/downloads/

Example location of the directory containing the downloadable files:

https://example.com/site-files/brochures/

The relative path to use would be

../../site-files/brochures/

What file types does Paperless support?

Paperless supports all common file types, that you have uploaded with a web safe file name. Web safe means that the file name does not contain spaces or other special characters. Spaces can be replaced with either hyphens (dashes) or underscores. When Paperless converts the file name into a human-readable format, it will automatically replace hyphens and underscores with spaces. Additionally, an attempt is made to strip the file extension (e.g. .jpg) from the end of the file name.

Icons can be displayed for common image formats, PDFs, Word, Powerpoint, Excel, OpenOffice, Pages, rich text, markdown, audio, video, zip, tar, and various code files. Icons are useful, because they help give an instant indication of what file a user is about to download. Sometimes a file might require special software or apps to open it. If a file is found that Paperless does not recognise, the stack will display a simple generic file icon. The download for the unrecognised file will still work.

Added in Paperless version 1.1, you can now specify the file extension and icon for up-to five custom file types. If for example you wanted to display Affinity Designer files with a custom icon, you would enter afdesign as the file extension and provide the desired Font Awesome Icon markup for the file. Assuming you had enabled support for custom icon colours, the colour of your custom icons is customisable. It is worth mentioning too that file extensions greater-than 4 characters in length will continue to display alongside the file names, because they are not assumed to be universally 'web safe' files that everybody would be able to download and open.

Live previews of files are not possible. However you can enable a 'preview' button next to each download. This lets your website users open the file in a new browser tab or window. This works well for images, audio, video and PDF files.

Live filtering with query strings

This feature was added in Paperless 1.1. As the page loads, Paperless will look at the URL, for a parameter and query string. It will check to see if there is a parameter present, that matches the parameter you have supplied in the stack settings. If a matching parameter is found, then the query string of the specified parameter is applied as a live filter.

You can test this by clicking here to open Paperless in a new tab. Only file types with an extension of 'jpg' will be shown as the page loads. Potentially you could build a select menu of preset file filters using a free stack like SelectNav.

To summarise, if the page address (Paperless is on) was set to https://example.com/?year=2009 then the live filter box will be pre-populated with '2009'. From this point, only files with names or dates matching 2009 will be displayed; all others are hidden. This example assumes you set the Query Parameter setting to year. A user can still undo the filter, to display all files or to apply a different filter.

Preview buttons, lightboxing and Google Docs Viewer (improvements made in Paperless 1.2)

When the preview buttons are enabled, a button is shown for the website user to click and view the desired file in the browser window or a new tab. The preview button is only displayed against files that are considered 'websafe' - that is to mean files which ordinarily display in the browser window without requiring any specialist software or extensions. The preview buttons for non-websafe files are removed, to prevent confusion. The preview button will display the file in the web browser, without downloading it.

Optionally you can enable a lightbox in the Paperless stack settings. Again the lightbox only works for websafe files which ordinarily display in the web browser. Supported files include common audio and video files, images and PDF documents. Preview buttons are once again removed for non-websafe file types; to prevent blank lightbox windows displaying.

If the lightbox is disabled, you have the option to preview some additional file formats that are not traditionally considered websafe. These files can be clicked and previewed online using the Google Docs Viewer. Supported file formats include Microsoft Excel (.xls and .xlsx), Microsoft PowerPoint 2007 / 2010 (.pptx), Adobe Illustrator (.ai), Adobe Photoshop (.psd), Autodesk AutoCad (.dxf), Scalable Vector Graphics (.svg), PostScript (.eps, .ps), TrueType (.ttf), XML Paper Specification (.xps). The reason the document viewer cannot be used in the lightbox is because Google have blocked it from working inside iFrames. So regretfully, in order to use this extra document viewer, the lightbox has to be disabled first within the settings (the Google Docs Viewer setting then becomes available for selection, in the lightbox settings). The Google Docs Viewer may not work for passworded files stored behind a firewall. A 25 MB filesize limit is imposed on documents opened with the Google Docs Viewer. Users are granted the option to save the file to their Google Drive account - options to disable this and other Google branding are not available.

Google^® Analytics

If you have got Google Analytics setup in your website already, then normally you can get a basic overview of how many people are visiting each page. But Google Analytics won't easy tell you how many people are downloading your files or which files are most popular. This could be useful information to have access to. Fortunately Paperless has a Google Analytics option, and is able to communicate useful preview and download statistics back to Google Analytics, for display in your reporting data. This data is shown in Real Time > Events.

A list of your download files will be shown by their name. Next to each file name, the number of times that the preview button or download button was clicked is shown. From this information you can determine how many times a file has been downloaded and other information like the most popular times of day for downloads.

In order to use this feature, you need to already have Google Analytics installed in your website (Universal Analytics). Compatibility is not offered backwards with older versions of Google Analytics, like ga.js or urchin.js. It may take up-to 48 hours before Google Analytics begins to display your download data and you may have to get someone else to test your downloads (Google Analytics tends to ignore your own activity). Paperless is using the same codebase as Player stack does, for recording video activity.

Print buttons

Sponsored as a new feature by a user of Paperless in version 1.3.0, print buttons are displayed alongside existing preview and download buttons. Print buttons are intended purely for simple content types (like images and basic text documents). In other words, files that are static (no sound or video) which can normally be viewed within the web browser without needing extra software. When clicked, a print button opens the content inside a new browser tab and will attempt to automatically open the print window. Once the print window is closed, the new tab will also close and return the user back to the page with Paperless displayed. Ultimately the success of this working depends on the web browser being used and any configurations a user may have changed in their browser settings (like blocking new tabs or the print window). Some devices do not support printing and we have no method of detecting these.