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.

1. Update your 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. 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:

{
  "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 ANS based image data 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.

   ...,
     "{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

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

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 for more details.
   1. (key, { cachedCall })

Changes at the function return

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:

  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

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.

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