> 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/component/hooks.js/available-functions/rw.resizeresource.md).

# rw\.resizeResource

The `rw.resizeResource()` function resizes an image resource to a specified width, returning the path to the resized image. This is essential for creating responsive images and thumbnails.

## Syntax

```javascript
const resizedPath = rw.resizeResource(resource, width);
```

## Parameters

| Parameter  | Type   | Description                              |
| ---------- | ------ | ---------------------------------------- |
| `resource` | Object | An image resource object from `rw.props` |
| `width`    | Number | Target width in pixels                   |

## Returns

A string path to the resized image.

## Basic Example

```javascript
const transformHook = (rw) => {
    const { image } = rw.props;
    
    // Create a thumbnail at 400px wide
    const thumbnail = rw.resizeResource(image, 400);
    
    rw.setProps({
        thumbnail
    });
};

exports.transformHook = transformHook;
```

## Common Patterns

### Multiple Sizes

```javascript
const transformHook = (rw) => {
    const { image } = rw.props;
    
    rw.setProps({
        thumbnail: rw.resizeResource(image, 200),
        medium: rw.resizeResource(image, 600),
        large: rw.resizeResource(image, 1200),
        original: image.image
    });
};

exports.transformHook = transformHook;
```

### Retina/HiDPI Support

Double the width for retina displays:

```javascript
const transformHook = (rw) => {
    const { image } = rw.props;
    const displayWidth = 400;
    
    rw.setProps({
        // 2x for retina displays
        imageSrc: rw.resizeResource(image, displayWidth * 2),
        imageWidth: displayWidth
    });
};

exports.transformHook = transformHook;
```

### Responsive Images with Breakpoints

```javascript
const transformHook = (rw) => {
    const { image } = rw.props;
    const { breakpoints } = rw.theme;
    const { names, screens } = breakpoints;
    
    // Generate sources for each breakpoint
    const sources = names
        .filter(name => screens[name])
        .sort((a, b) => screens[b] - screens[a])
        .map(name => ({
            media: `(min-width: ${screens[name]}px)`,
            srcset: rw.resizeResource(image, screens[name] * 2),
            breakpoint: name
        }));
    
    rw.setProps({
        sources,
        fallbackSrc: rw.resizeResource(image, 800)
    });
};

exports.transformHook = transformHook;
```

### Gallery Thumbnails

```javascript
const transformHook = (rw) => {
    const { resources } = rw.props;
    
    // Process each image in a gallery
    if (resources?.resources) {
        resources.resources.forEach(resource => {
            resource.thumbnail = rw.resizeResource(resource, 400);
            resource.fullsize = resource.image;
        });
    }
    
    rw.setProps({
        images: resources?.resources || []
    });
};

exports.transformHook = transformHook;
```

### Responsive Image with Custom Sizes

```javascript
const transformHook = (rw) => {
    const { image } = rw.props;
    const { imageFileSize } = rw.responsiveProps;
    const { breakpoints } = rw.theme;
    const { names, screens } = breakpoints;
    
    // Use responsive prop values for sizes
    const sources = names
        .filter(name => imageFileSize[name] && screens[name])
        .sort((a, b) => screens[b] - screens[a])
        .map(name => ({
            media: `(min-width: ${screens[name]}px)`,
            srcset: rw.resizeResource(image, imageFileSize[name] * 2)
        }));
    
    // Base/fallback size
    const fallbackSrc = rw.resizeResource(image, imageFileSize.base * 2);
    
    rw.setProps({
        sources,
        fallbackSrc
    });
};

exports.transformHook = transformHook;
```

## Template Usage

```html
<!-- Simple resized image -->
<img src="{{thumbnail}}" alt="{{alt}}">

<!-- Responsive picture element -->
<picture>
    @each(source in sources)
        <source media="{{source.media}}" srcset="{{source.srcset}}">
    @endeach
    <img src="{{fallbackSrc}}" alt="{{alt}}">
</picture>
```

## Notes

* Always multiply width by 2 for retina display support
* The function returns a path string, not the full image object
* Works with any image resource from properties or collections
* Efficiently caches resized images


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.realmacsoftware.com/elements-docs/elements-language/component/hooks.js/available-functions/rw.resizeresource.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.