File Picker

File Picker Usage

Applying the File Picker

The File Picker allows you to create a custom list of files in the order you want by selecting them from Concrete's Asset Manager. This is convenient for creating a list of downloads, like a file library.

It's wide range of configurable options allows you to customize it's appearance. This together with a few lines of CSS makes it possible to easily create all kinds of layouts.

File Picker Options explained

The following options are available in the File Picker form:

General Options

  1. Title : Provide your own title for the list (example : 'Downloads')
  2. Title format : select the format of the title from a list of html tags : h1 - h6, span, strong, div and p.
  3. Optional CSS classes : add one or more CSS classes to the file - picker allowing you to apply custom CSS without having to create a new template. Seperate each css class with a space like this : 'download-list simple-list'.
  4. Pagination (checkbox) : use pagination to limit the number of results per page.
  5. Files per page : provide the maximum number of files to display per page (only when the pagination-option is enabled).

File Options

  1. Title format : select the format of the title of each file from a list of html tags : h2 - h6, span, strong, div and p.
  2. Link text : provide a text to be used for the 'open file' link, example : 'download this file'.
  3. File descriptions (checkbox) : show the file descriptions for each file (You can manage file descriptions from Concrete's Asset Manager).
  4. File descriptions length : truncate file descriptions to a certain length. Leave this box empty or enter a zero to have the full description displayed. This option only works of File Descriptions are enabled(option 3).
  5.  Publishing date (checkbox) : Show the publishing date of each file.
  6. Display a thumbnail for each file (checkbox) : show a thumbnail for each file (Concrete's defaults thumbnails are used as seen in the Asset Manager).
  7. File size (checkbox) : Show the file size of each file.
  8. Times downloaded (checkbox) : shows the number of times a file has been downloaded.
  9. Show tags (checkbox) : show the tags associated with each file (managable through Concrete's Asset Manager).
  10. Force download (checkbox) : Force the browser to download files rather than having them open in the browser (also works for images).
  11. Files: use the 'Add a File' button to select pages from the Asset Manager. You can re-order them by dragging them up or down in the list : place your cursor on the drag-icon of a file in this list to do so. Delete a file from your list by clicking the '×' icon. This will not delete the file from your website, so don't worry.
  12. Optional title for each file : provide an optional title for each file, this will be used instead of the default title.

Creating custom templates

The File Picker has a default template and a table layout. As with each block in Concrete5 you can create your own custom templates by copying and modifying an existing one. One thing to consider when creating a new template is that the current templates use some Javascript for password enabled files, prompting a user for his or her password if they try to download a password protected file. If you want enable this feature in your new template please use the CSS class 'file-link' on each anchor-element in your template that points to file file-download. jQuery will be using this selector : $('.prompt-password a.file-link') to look for those anchors. the CSS class 'prompt-password' is added to each html element wrapping a password protected file by PHP when the force-downloads option is enabled. Make sure to copy that part of the template too when you are creating a new template. The best way to create a new template is just to copy the existing one and modify it.

Demo Website

I put up a simple demo website with an example of a File Picker on the homepage at : filepicker.code-examples.com.