Work with Wix Media

The SDK Media API contains functionality for working with Wix Media resources.

Overview

The SDK Media API enables you to get absolute URLs for Wix Media resources, including scaled and cropped images.

With the SDK Media API, you can:

• Get an absolute URL for a Wix Media resource.
• Scale a Wix Media image to fit specified dimensions.
• Scale a Wix Media image to fill specified dimensions.
• Crop a Wix Media image.

Wix APIs identify Wix Media resources using internal identifiers with the following structure:

1
wix:image://v1/<uri>/<filename>#originWidth=<width>&originHeight=<height>[&watermark=<watermark_manifest_string>]

For example, a product or cart item object may refer to its associated image with an identifier such as "wix:image://v1/3c76e2_c5331f937348492a97df87b...".

You can use the SDK Media API to obtain an absolute URL for such an image, so you can access and manipulate it in your own code. You can obtain a URL for the original image, or for a scaled or cropped version of the image.

Usage

The SDK Media API module is included in the @wix/sdk package. To use it, install the package and then import { media } from the @wix/sdk package in your code.

1
import { media } from '@wix/sdk';

You can then call one of the media functions with a wix:image:// identifier to obtain a URL for the image.

1
const { url } = media.getImageUrl(wixImageId);

Methods

The SDK Media API includes the following methods:

• getImageUrl(): Gets an absolute URL for a specified Wix Media image, along with the image's height and width in pixels, and its ID.
• getScaledToFitImageUrl(): Gets an absolute URL for a scaled version of a specified Wix Media image to fit within the provided width and height while retaining the image's original proportions.
• getScaledToFillImageUrl(): Gets an absolute URL for a scaled version of a specified Wix Media image to fill the provided width and height while retaining the image's original proportions.
• getCroppedImageUrl(): Gets an absolute URL for a cropped version of a specified Wix Media image based on the coordinates provided.

Example

This example shows how to use getImageUrl() to obtain an absolute URL from the Wix Media identifier for an image provided by the getCurrentCart() function.

1
import { createClient, media } from '@wix/sdk';
2

3
// ...
4

5
const { cart } = await wixClient.currentCart.getCurrentCart();
6

7
const { url } = media.getImageUrl(cart.lineItems[0].image);