Using Files On Your Web Site

There are several different ways the files can be used on your web site once you have imported them into your web site.

Linking to Files On Your Web Site

When viewing a file's details in the Control Panel, there is a button labelled Get URL. Clicking this button opens a dialog which shows you the path on your web site where this file is accessible. It shows the URL both with and without the web site domain at the start of it.

You can use this URL in your pages or templates, using HTML code similar to the following:

Example 3.1. Linking to a File Manager File

<a href="/assets/myfile.pdf">My File</a>
<img src="/assets/myimage.png" alt="My Image" />

To help with linking to files, you can also use the file browser in the WYSIWYG editor. This is covered in File Browser.

Listing Files On Your Web Site

If you want to list a series of files on a single page in your web site (such as in an image gallery), you can use the File Listing container rule.

You can find more details about managing container rules in the Administration Mode chapter.

When listing out files with this rule, you can then either link directly to the file (so the user downloads it), or you can create a File Details page, which is used to show the details of a single file.

For more information about creating a new page, refer to the Managing Pages chapter.

Uploading Files Via Your Web Site

If you want to give users the ability to upload files from your web site, you can do so using the File Upload form.

This form allows you to customize many aspects, including specifying the upload folder, allowed types of files and maximum file size. Additionally, if the upload folder has custom fields, users can specify the values of these fields.

When you create this form, you can also create a form recipient who will be emailed files when they are uploaded.

For more details about creating forms, refer to the Managing Forms

Compressing Files

Recite CMS provides built-in functionality to minify JavaScript and CSS files. Minifying a file means redundant characters are removed from the file, thereby making the file download much more quickly without affecting its functionality.

You can make all CSS and JavaScript files minify automatically by enabling the settings (click on Site Settings at the top of the Control Panel) in the Files settings bundle.

Alternatively, you can enable minification on a file-by-file basis by linking to /__/assets/compress/path/to/file.js instead of /assets/path/to/file.js

Thumbnails

Recite CMS provides built-in thumbnailing functionality, allowing you to show smaller versions of files very easily.

To create a thumbnail, use the special {thumbnail} template tag.

Tip

For more information about writing templates, refer to the Template Writing Guide appendix.

There are several arguments use with the {thumbnail} tag.

  • path. This is the path of the file. If you want to thumbnail the image with the path /assets/myImage.png, then use this value.

  • w. The maximum width of the thumbnail.

  • h. The maximum height of the thumbnail.

  • crop. If you set this to true and the image is larger than your specified width and height, the image will be cropped (from the center) to the specified dimensions. You cannot use both crop and pad at the same time.

  • pad. If you set this to true, the resultant image will be the size you specify, with whitespace padding around the image where necessary.

For instance, if you want to output a thumbnail exactly 200 pixels wide and 150 pixels wide which links to the full size image, use the following code.

Example 3.2. Creating an Image Thumbnail

<a href="/assets/myImage.png">
    <img src="{thumbnail path='/assets/myImage.png' w=200 h=150 pad=true}" />
</a>