> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/elements-language/resource/what-are-resources.md).

# What are Resources?

Resources are the files a user adds to their Elements project — images, video, audio, entire folders of media, or any other file a site might need. Elements manages them in the project's Resources browser and takes care of storage and publishing. Your component never touches the file system: it declares that it wants a resource, and Elements hands it an object describing the file the user picked.

A resource can be:

* **An image** — the most common case, complete with intrinsic dimensions and alt text
* **Video or audio** — referenced by file path
* **A folder** — a whole set of resources treated as a single value, ideal for galleries and slideshows
* **Any other file** — SVGs, PDFs, documents, whatever your component can make use of

Resources can also be shipped inside an Element Pack itself, so a pack can provide ready-made assets alongside its [components](/elements-docs/elements-language/component/components.md) and [templates](/elements-docs/elements-language/template/what-are-templates.md) — see [What is an Element Pack?](/elements-docs/elements-language/element-pack/what-is-an-element-pack.md)

## How Components Consume Resources

There are four routes a resource can take into your component.

### 1. The Resource UI Control

Declare a [`resource` control](/elements-docs/elements-language/component/properties-json/ui-controls/resource.md) in your `properties.json` and Elements renders a dropwell in the inspector. The control accepts every file type by default; restrict it with the `accepts` and `excludes` options, which use the same token grammar as HTML's `<input accept>` attribute (`".svg"`, `"image/*"`, `"video/mp4"`). Whatever the user assigns becomes available to your templates and hooks under the control's `id`.

### 2. Resource Fields in Collection Items

[Collections](/elements-docs/elements-language/component/collections.md) give users repeatable items — tabs, tracks, team members — and each item can carry its own resources. Add a `resource` control to the collection's `properties.json` and every item gets its own dropwell. The core Audio Playlist does exactly this: each track stores an artwork image and an audio file, which its template reads as `{{ track.coverImage }}` and `{{ track.audioSource.path }}`. See [Accessing Data in Templates](/elements-docs/elements-language/component/collections/accessing-data-in-templates.md) for the template side.

### 3. Drag-and-Drop Targets

Add the `rwResourceDropZone` attribute to any element in your template — or to your root element from hooks — with a value matching a resource control's `id`. Users can then drag a file from Finder or the Resources browser straight onto your component on the canvas, and it lands in that property. The [Resource control reference](/elements-docs/elements-language/component/properties-json/ui-controls/resource.md#resource-dropzones) covers the details, and any `accepts`/`excludes` restrictions filter which drops the target will take.

### 4. Processing Resources in Hooks

Resource objects arrive in `rw.props` like any other property, so your `hooks.js` can inspect and transform them before the template renders. The most common job is generating resized variants with [`rw.resizeResource()`](/elements-docs/elements-language/component/hooks.js/available-functions/rw.resizeresource.md) — thumbnails, retina versions, per-breakpoint sources — and passing the results to the template with `rw.setProps()`. [Working with Resources](/elements-docs/elements-language/component/hooks.js/working-with-resources.md) walks through the patterns.

## Resources in Practice: the Core Gallery

The open-source Gallery component (`com.realmacsoftware.gallery`) uses all of these routes at once. Its inspector declares a single resource control — `{"title": "Resources", "id": "resources", "resource": {}}` — that users fill with a folder of images, its empty state is a `rwResourceDropZone` drop target, and its hooks process every item in the folder before the template loops over them:

```javascript
// com.realmacsoftware.gallery/hooks.source.js
const transformHook = (rw) => {
    const { globalID, resources /* … */ } = rw.props;

    const hasResources = resources?.resources?.length > 0;

    resources?.resources?.forEach((resource) => {
        resource.thumbnail = rw.resizeResource(resource, 400);
        resource.alt = resource.alt || resource.caption || resource.author || "";
        // … video detection trimmed
    });

    // … class generation trimmed

    rw.setProps({
        hasResources,
        resources: resources?.resources,
        // … presentation props trimmed
    });
};

exports.transformHook = transformHook;
```

One folder resource in, a fully processed array out — each image gains a 400px thumbnail and a sensible alt fallback before the template ever sees it.

## Learn More

{% content-ref url="/pages/iLTv2bHx2pieSLgA91G4" %}
[Working with Resources](/elements-docs/elements-language/component/hooks.js/working-with-resources.md)
{% endcontent-ref %}

{% content-ref url="/pages/g8DvnB3TcKxXnNj6AgdY" %}
[Galleries & Resource Collections](/elements-docs/elements-language/guides/galleries-and-resource-collections.md)
{% endcontent-ref %}

## Related Documentation

* [Resource UI Control](/elements-docs/elements-language/component/properties-json/ui-controls/resource.md)
* [rw.resizeResource()](/elements-docs/elements-language/component/hooks.js/available-functions/rw.resizeresource.md)
* [Working with Resources](/elements-docs/elements-language/component/hooks.js/working-with-resources.md)
* [Collections](/elements-docs/elements-language/component/collections.md)
* [What is an Element Pack?](/elements-docs/elements-language/element-pack/what-is-an-element-pack.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements-language/resource/what-are-resources.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.