# Using resizerURLs for images in Arc XP Themes

Source: https://dev.arcxp.com/themes/core-concepts/using-resizer-urls/

Learn how to configure and use multi-environment resizerURLs in Arc XP Themes. Set up sandbox and production URLs with fallback support.

Starting with [Themes 3.2.0](https://docs.arcxp.com/en/what-s-new-in-arc-xp.html#UUID-a37d6841-fa70-e579-7d31-3db44e048e39%5Fsection-idm235105286946077), developers can configure multiple resizer URLs across multiple environments. This eliminates the need for separate bundles per environment and aligns with the way [Outbound Feeds](https://dev.arcxp.com/arc-io/developer-docs/outbound-feeds-image-resizer-v2-upgrade-and-configuration-guide/) handles resizer URLs.

This guide explains how to configure `resizerURLs`, how fallback logic works, and how to update custom image blocks if needed.

## Configuration in `blocks.json`

In `blocks.json`, define both the legacy `resizerURL` (for fallback) and the new `resizerURLs` object:

```json
{
  ...
  "values": {
    "default": {
      "siteProperties": {
        "resizerURL": "https://{org}-{siteId}-fakefallback.web.arc-cdn.net/resizer/v2/",
        "resizerURLs": {
          "{org}-sandbox": "https://{org}-{siteId}-sandbox.web.arc-cdn.net/resizer/v2/",
          "{org}": "https://{org}-{siteId}-prod.web.arc-cdn.net/resizer/v2/"
        },
      },
    },
  },
}
```

- **`resizerURLs`** holds multiple environment-specific URLs.
- **`resizerURL`** is still required and remains as a fallback if no match is found.

## How It Works

1. When rendering an image, Themes checks for a matching entry in `resizerURLs` based on the current environment.
2. If a match is found, that URL is used.
3. If no match is found, Themes falls back to the single `resizerURL`.
![resizerURL flowchart](https://dev.arcxp.com/images/themes/resizerurls-flowchart.png) 

## Default Blocks

The following blocks have been updated to support `resizerURLs`:

- gallery-block
- Image component
- MetaData component
- article body chain

If you are only using default blocks, simply upgrade to Themes 3.2.0 by changing `"themesReleaseVersion": "arc-themes-release-version-3.2.0"` in `blocks.json`

## Custom Blocks

If you maintain custom image blocks, you can add support for `resizerURLs`. This step is optional but recommended if you want a single bundle to work across environments.

> **Note:**
> 
> The `resizerURL` fallback is still required. You may implement logic in your custom block that matches what’s in the Arc XP Blocks to ensure your custom block is using the correct `resizerURL`.

You can use the pared down example below to structure your `resizerURLs` logic:

```js
import getProperties from "fusion:properties";
import { ENVIRONMENT } from "fusion:environment";
import {
  Image,
} from "@wpmedia/arc-themes-components";

const { resizerURL, resizerURLs } = getProperties(arcSite);

const resizerURLtoUse = resizerURLs ? resizerURLs[ENVIRONMENT] : resizerURL;

return (
    <Image
        resizerURL={resizerURLtoUse}
        {...otherProps}
    />
);
```

## Migration Checklist

- Upgrade to Themes > 3.2.0 to get updated default blocks.
- Add a `resizerURLs` object to your `blocks.json`.
- Keep the existing `resizerURL` for fallback compatibility.
- (Optional) Update custom image blocks to use the `getResizerUrl` helper.
- Verify images in sandbox and production environments.

## FAQ

**Do I need to update my theme immediately?**  
No. If you don’t use `resizerURLs`, your theme will continue working with `resizerURL`.

**Do I still need separate bundles for sandbox and prod?**  
No. With `resizerURLs`, one bundle can handle multiple environments.

**What if both `resizerURLs` and `resizerURL` are defined?**  
The environment-specific URL from `resizerURLs` will be used first. If no match is found, it falls back to `resizerURL`.

**Which blocks are updated by default?**  

- gallery-block
- Image component
- MetaData component
- article body chain

**What about custom blocks?**  
Updating them is optional. If you want them to support multiple environments, add `resizerURLs` to `blocks.json` and implement the helper function.