# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.