Static Resources

Using a static resource is preferable to uploading a file to the Documents tab because:

• You can package a collection of related files into a directory hierarchy and upload that hierarchy as a .zip or .jar archive.
• You can reference a static resource in page markup by name using the $Resource global variable instead of hard-coding document IDs:
  • To reference a standalone file, use $Resource.<resource_name> as a merge field, where <resource_name> is the name you specified when you uploaded the resource. For example:

    <apex:image url="{!$Resource.TestImage}" width="50" height="50"/>

    or

    <apex:includeScript value="{!$Resource.MyJavascriptFile}"/>

  • To reference a file in an archive, use the URLFOR function. Specify the static resource name that you provided when you uploaded the archive with the first parameter, and the path to the desired file within the archive with the second. For example:

    <apex:image url="{!URLFOR($Resource.TestZip, 'images/Bluehills.jpg')}" 
        width="50" height="50"/>

    or

    <apex:includeScript value="{!URLFOR($Resource.LibraryJS, '/base/subdir/file.js')}"/>

• You can use relative paths in files in static resource archives to refer to other content within the archive. For example, in your CSS file, named styles.css, you have the following style:

  table { background-image: url('img/testimage.gif') }

  When you use that CSS in a Visualforce page, you need to make sure the CSS file can find the image. To do that, create an archive (such as a zip file) that includes styles.css and img/testimage.gif. Make sure that the path structure is preserved in the archive. Then upload the archive file as a static resource named “style_resources”. Then, in your page, add the following component:

  <apex:stylesheet value="{!URLFOR($Resource.style_resources, 'styles.css')}"/>

  Since the static resource contains both the style sheet and the image, the relative path in the style sheet resolves and the image is displayed.

A single static resource can be up to 5 MB in size. An organization can have up to 250 MB of static resources. Static resources apply to your organization’s quota of data storage.

• Define Static Resources
  You can use static resources to upload content that you can reference in a Visualforce page, including archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files. You can use static resources only within your org, so you can’t host content here for other apps or websites.
• View and Edit Static Resources
  Edit, delete, and clone static resources.
• Manage Static Resources
  After creating static resources, you can customize, edit, and delete them.