Latest Blog Post
Now Open For Business

Filepicker Demo Site

Hi folks, this is a demo site for the Filepicker block for the Concrete5 CMS. The Filepicker block is available in the Concrete5 Marketplace. This website is intended as support and demo site for the Filepicker so you can see what it does before deciding to buy it.

You are looking at a fresh installation of the Concrete5 CMS, version 5.7.4.2. in which I installed the Filepicker package.

What is a Filepicker ?

A Filepicker is a content block for your Concrete5 website which allows you to create a list of files by selecting them from Concrete's asset manager. This is particularly convenient if you want to create a custom list of downloads; you decide what files go in the list and in which order. Concrete5 ships with a file block by default which is convenient for adding single file downloads. The Filepicker however, makes you add lists of files. In addition to this, it comes with a range of configurable options:

  • Provide an optional title for the File Picker
  • Select the format of the title (h1, h2, h3, h4, h5, h6, p, span, strong, div)
  • Provide optional css-classes
  • Use pagination
  • Provide an alternative title for each file (Great if you are running a multilingual website)
  • Select the format of the file title (h2, h3, h4, h5, h6, p, span, strong, div)
  • Provide an alternative text for the download link
  • Show file descriptions (optional)
  • Truncate file descriptions
  • Show the publishing date of each file (optional).
  • Show file thumbnail for each file (optional)
  • Show file size for each file (optional)
  • Show number of times downloaded for each file (optional)
  • Show the tags for each file (optional)
  • Choose whether files should be downloaded or opened in the browser

Using these options, it is possible to create a simple or detailed list of downloads, which is nice if you are hosting a large library of downloads on your website. The Filepicker ships with one template at the moment of which you can easily customize it's appearance using the configurable options and a few lines of CSS. The file extensions are added as css classes to each file-element making it possible to add file-specific CSS like, for example, a pdf-icon as bullet or background image for each pdf file.

Demo

The demo below shows the Filepicker in action.The first one uses the table template and the second one the default template.

File Picker with the Table template

  Thumbnail Title Description Mime type Date Size Dowloaded Tags  
1 houses.jpg Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus scelerisque purus. Vestibulum fermentum, turpis vitae tincidunt dictum, felis sem suscipit leo, sit amet ultricies orci leo a nisi. Nunc tristique vulputate arcu eu euismod. Quisque a nunc… image/jpeg June 29, 2015 286.28 KB (293,154 bytes) 1 time- Download this file
2 slider2.png - image/png June 29, 2015 397.30 KB (406,839 bytes) 2 times- Download this file
3 Lorem Ipsum.txt A text document filled with some Lorem Ipsum lines, just for demo purposes. I noticed they now actually have Arabic Lorem Ipsum too but I didn't bother to put in in a text document. text/plain June 29, 2015 1.32 KB (1,354 bytes) 3 times- Download this file
4 HTML5_Canvas_Cheat_Sheet.pdf A convenient cheat sheets for HTML5 syntax. No need to Google each time you need to know something, this keep this handy. application/pdf June 29, 2015 147.37 KB (150,904 bytes) 3 times- Download this file

File Picker with the default template

  • houses.jpg
    June 29, 2015
    286.28 KB (293,154 bytes)
    downloaded : 1 time

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus scelerisque purus. Vestibulum fermentum, turpis vitae tincidunt dictum, felis sem suscipit leo, sit amet ultricies orci leo a nisi. Nunc tristique vulputate arcu eu euismod. Quisque a nunc…

    Download this file
  • slider2.png
    June 29, 2015
    397.30 KB (406,839 bytes)
    downloaded : 2 times

    Download this file
  • Lorem Ipsum.txt
    June 29, 2015
    1.32 KB (1,354 bytes)
    downloaded : 3 times

    A text document filled with some Lorem Ipsum lines, just for demo purposes. I noticed they now actually have Arabic Lorem Ipsum too but I didn't bother to put in in a text document.

    Download this file
  • HTML5_Canvas_Cheat_Sheet.pdf
    June 29, 2015
    147.37 KB (150,904 bytes)
    downloaded : 3 times

    A convenient cheat sheets for HTML5 syntax. No need to Google each time you need to know something, this keep this handy.

    Download this file
  • subway.jpg
    June 29, 2015
    298.43 KB (305,595 bytes)
    downloaded : 0 times

    Download this file