# Outbound Feeds Image Resizer v2 Upgrade and Configuration Guide

Source: https://dev.arcxp.com/arc-io/developer-docs/outbound-feeds-image-resizer-v2-upgrade-and-configuration-guide/

## Configuration updates for Outbound Feed blocks

### High-level checklist (see below for full details)

- Update your Engine environment files
- Update `resizerURLs` in your `blocks.json` file
- Update your `package.json` dependencies

> **Important:**
> 
> **Before you get started:** If you are unable to view or edit resolvers locally, you must update your [mocking permissions](https://dev.arcxp.com/pagebuilder-engine/developer-docs/local-mocks/#mocking-permissions).

### 1\. Update your [Engine environment files](https://dev.arcxp.com/pagebuilder-engine/developer-docs/environment-variables/#pagebuilder-engine-environment-files)

In OBF 2.0.0, the feed blocks will automatically utilize Resizer v2 when you make the following environment variable changes in your Outbound Feeds feature pack:

1. `RESIZER_TOKEN_VERSION`: Set variable to match the currently enabled SSM version for your organization’s secret as obtained from the “Get HMAC Keys” section under the Organization tab in the [Arc XP Delivery API documentation](https://dev.arcxp.com/api/web-delivery/delivery-api/). This ensures secure and proper functioning of the outbound feeds with Resizer v2.
2. `SIGNING_SERVICE_DEFAULT_APP`: Set to `resizer` to indicate the default application for signing services.
3. `BLOCK_DIST_TAG`: Set sandbox to `beta` , and production set to `stable`.
4. `resizerKey`: Remove this key, it’s no longer needed.
5. For local development you’ll want to add a `environment/localhost.js` with the variables:

```json
{
  "BLOCK_DIST_TAG": "stable",
  "RESIZER_TOKEN_VERSION": 1,
  "SIGNING_SERVICE_DEFAULT_APP": "resizer"
}
```

After making the updates to your `environment.json` file(s), re-deploy your bundle in order for OBF 2.0.0 blocks to install with the latest published packages under the `BLOCK_DIST_TAG`.

> **Note:**
> 
> **External images:** These images will not pass through the resizer, only image data based on the Arc XP Native Specification (ANS) will be resized. These urls instead return as the raw url.

> **Note:**
> 
> **Image height and width**: The set of key value pairs where you set the height and/or width to resize all images will remain in place from v1\. Zero means no resizing will be performed, so you should review these values to avoid always returning large images when not necessary.

### 2\. Update resizerURLs in your blocks.json file

> **Note:**
> 
> This update must be made for each site and environment.

In OBF 2.0.1, a `resizerURLs` object for each site’s `siteProperties` should be added in the `blocks.json` of your Outbound Feeds bundle to specify resizer v2 URLs for each OBF environment.

1. Add a `resizerURLs` object within each site’s `siteProperties` to your `blocks.json`. Within that object, add keys relating to your environments, such as `org-outboundfeeds-sandbox` and `org-outboundfeeds`. The values will be the resizer v2 URL for each environment.
2. For local development, also add a `localhost` key and the resizer v2 URL for the environment you’ve set your local to fetch content from (below example is using sandbox for localhost).
3. Replace the `org` and `site` values with what is specific to your configuration per site, and your production resizerURL can be the domain you use rather than the raw Arc CDN.
4. Remove the existing `resizerURL` as the `resizerURLs` object will take priority over it.  
```json
...,
  "{siteId}": {
    "siteProperties": {
      ...,
      "resizerURLs": {
        "{org}-outboundfeeds-sandbox": "https://{org}-{siteId}-sandbox.web.arc-cdn.net/resizer/v2",
        "{org}-outboundfeeds": "https://{org}-{siteId}-prod.web.arc-cdn.net/resizer/v2",
        "localhost": "https://{org}-{siteId}-sandbox.web.arc-cdn.net/resizer/v2"
      }
    }
  },
  ...,
```

### 3\. Update package.json dependencies

OBF related `@wpmedia/feeds-*` dependencies defined in your package.json should also have the expected version or npm dist tag.

1. Review your package.json for `@wpmedia/feeds-{packageName}` dependency versions.
2. Update these to `beta` for evaluating the sandbox release, and change to `stable` for the production release.

## Configuration updates for Custom Feed blocks

In addition to the changes above, you will need to use the new signing service pattern and update OBF feed dependency versions in your `package.json`, to use Resizer v2 in your custom outbound feed blocks.

### Example of `feeds-source-content-api.js` Resizer v2 changes

Let’s step through the updates made to `feeds-source-content-api.js`

#### Changes at the import

![Changes at the import](https://dev.arcxp.com/_astro/import-changes.JWIBGs-R_Z1n70HN.webp)

1. Added `axios` (make sure that is in your package.json dependencies).
2. Including three additional environment variables from `fusion:environment`  
```
  ARC_ACCESS_TOKEN,
  RESIZER_TOKEN_VERSION,
  resizerKey,
```
3. `@wpmedia/feeds-resizer` is a new import, destructuring out `signImagesInANSObject` and `resizerFetch`

#### Changes at the function definition

![Changes at the function definition](https://dev.arcxp.com/_astro/function-definition-changes.DO3YGjQ5_Z24BDYR.webp)

1. Changing from a resolve to a `fetch` because we need to use axios and chain a signing service call.
2. `cachedCall` is also now in the signature of the function. See [Partial caching on PageBuilder Engine](https://dev.arcxp.com/pagebuilder-engine/developer-docs/partial-caching-with-pagebuilder-engine) for more details.  
  1. `(key, { cachedCall })`

#### Changes at the function return

![Changes at the function return](https://dev.arcxp.com/_astro/function-return-changes.aPSTJ--O_Z1P4qSl.webp)

1. Shifting from `resolve` to `fetch` means a change to how we’re making the request. The change now uses axios chains promise that uses `signImagesInANSObject` .
2. The previous `resolve` also had a transform which we’ve now moved into another promise `.then`  
> **Note:**  
>  
> Not all content sources have transforms, but if they do you’d may want to retain those depending on their purpose.

Sample code of the axios fetch pattern:

```js
  const ret = axios({
    url: `${requestUri}?body=${encodedBody}&${genParams(paramList)}`,
    headers: {
      'content-type': 'application/json',
      Authorization: `Bearer ${ARC_ACCESS_TOKEN}`,
    },
    method: 'GET',
  })
    .then((result) => {
      if (resizerKey) {
        return result
      }
      return signImagesInANSObject(
        cachedCall,
        resizerFetch,
        RESIZER_TOKEN_VERSION,
      )(result)
    })
    .then(({data, ...rest}) => ({ ...rest, data: transform(data, key), }))
    .then(({ data }) => data)
    .catch((error) => console.log('== error ==', error))

  return ret
}
```

#### Changes at the export

![Changes at the export](https://dev.arcxp.com/_astro/export-changes.GAowBkM5_2tnEIX.webp)

1. resolve is swapped to fetch
2. transform is removed as it shifted into the axios promise chain

### Example of updating a feed that handles resizing

The utility to handle resizing in OBF has been `buildResizerURL` from the `@wpmedia/feeds-resizer` package.

To begin using Resizer v2 you just need to add the ANS image object as the last argument in the `buildResizerURL` function.

![buildResizerURL Argument](https://dev.arcxp.com/_astro/buildResizerURL-argument.BCIjB54W_ZFJr02.webp)

If you come across a usage of `buildResizerURL` in a custom feed where there are no arguments for `resizerWidth` and `resizerHeight` then it likely means this is an external image url. The raw image url passed into the function will be returned back with no resizing as there is no width or height.

An example of this can be seen with the optional channel logos that are not ANS objects, and are external urls defined as a custom field in PageBuilder Editor on the block:

> **Note:**
> 
> As part of the [updating your Engine environment files](https://dev.arcxp.com/arc-io/developer-docs/outbound-feeds-image-resizer-v2-upgrade-and-configuration-guide/#1-update-your-engine-environment-files) above, you should have removed the `resizerKey`. If you have not done this yet, review and complete the necessary file updates. If you have not removed the `resizerKey`, a url with the resizer v1 key may be returned.

![Remove resizerKey Argument](https://dev.arcxp.com/_astro/remove-resizerKey-argument.oOhje5ge_Z1rAJ3C.webp)