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

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

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

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:

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

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

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

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

<!-- 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