Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@sanity/image-url

Package Overview
Dependencies
Maintainers
0
Versions
208
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sanity/image-url - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

301

lib/browser/image-url.umd.js

@@ -10,3 +10,2 @@ (function (global, factory) {

var source = arguments[i];
for (var key in source) {

@@ -18,9 +17,6 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {

}
return target;
};
return _extends.apply(this, arguments);
}
function _unsupportedIterableToArray(o, minLen) {

@@ -34,15 +30,10 @@ if (!o) return;

}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _createForOfIteratorHelperLoose(o, allowArrayLike) {
var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
if (it) return (it = it.call(o)).next.bind(it);
if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {

@@ -61,3 +52,2 @@ if (it) o = it;

}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");

@@ -69,22 +59,17 @@ }

var _ref$split = ref.split('-'),
id = _ref$split[1],
dimensionString = _ref$split[2],
format = _ref$split[3];
id = _ref$split[1],
dimensionString = _ref$split[2],
format = _ref$split[3];
if (!id || !dimensionString || !format) {
throw new Error("Malformed asset _ref '" + ref + "'. Expected an id like \"" + example + "\".");
}
var _dimensionString$spli = dimensionString.split('x'),
imgWidthStr = _dimensionString$spli[0],
imgHeightStr = _dimensionString$spli[1];
imgWidthStr = _dimensionString$spli[0],
imgHeightStr = _dimensionString$spli[1];
var width = +imgWidthStr;
var height = +imgHeightStr;
var isValidAssetId = isFinite(width) && isFinite(height);
if (!isValidAssetId) {
throw new Error("Malformed asset _ref '" + ref + "'. Expected an id like \"" + example + "\".");
}
return {

@@ -102,3 +87,2 @@ id: id,

};
var isAsset = function isAsset(src) {

@@ -108,10 +92,8 @@ var source = src;

};
var isAssetStub = function isAssetStub(src) {
var source = src;
return source && source.asset ? typeof source.asset.url === 'string' : false;
}; // Convert an asset-id, asset or image to an image record suitable for processing
};
// Convert an asset-id, asset or image to an image record suitable for processing
// eslint-disable-next-line complexity
function parseSource(source) {

@@ -121,5 +103,3 @@ if (!source) {

}
var image;
if (typeof source === 'string' && isUrl(source)) {

@@ -166,34 +146,25 @@ // Someone passed an existing image url?

}
var img = source;
if (img.crop) {
image.crop = img.crop;
}
if (img.hotspot) {
image.hotspot = img.hotspot;
}
return applyDefaults(image);
}
function isUrl(url) {
return /^https?:\/\//.test("" + url);
}
function urlToId(url) {
var parts = url.split('/').slice(-1);
return ("image-" + parts[0]).replace(/\.([a-z]+)$/, '-$1');
} // Mock crop and hotspot if image lacks it
}
// Mock crop and hotspot if image lacks it
function applyDefaults(image) {
if (image.crop && image.hotspot) {
return image;
} // We need to pad in default values for crop or hotspot
}
// We need to pad in default values for crop or hotspot
var result = _extends({}, image);
if (!result.crop) {

@@ -207,3 +178,2 @@ result.crop = {

}
if (!result.hotspot) {

@@ -217,21 +187,17 @@ result.hotspot = {

}
return result;
}
var SPEC_NAME_TO_URL_NAME_MAPPINGS = [['width', 'w'], ['height', 'h'], ['format', 'fm'], ['download', 'dl'], ['blur', 'blur'], ['sharpen', 'sharp'], ['invert', 'invert'], ['orientation', 'or'], ['minHeight', 'min-h'], ['maxHeight', 'max-h'], ['minWidth', 'min-w'], ['maxWidth', 'max-w'], ['quality', 'q'], ['fit', 'fit'], ['crop', 'crop'], ['saturation', 'sat'], ['auto', 'auto'], ['dpr', 'dpr'], ['pad', 'pad']];
var SPEC_NAME_TO_URL_NAME_MAPPINGS = [['width', 'w'], ['height', 'h'], ['format', 'fm'], ['download', 'dl'], ['blur', 'blur'], ['sharpen', 'sharp'], ['invert', 'invert'], ['orientation', 'or'], ['minHeight', 'min-h'], ['maxHeight', 'max-h'], ['minWidth', 'min-w'], ['maxWidth', 'max-w'], ['quality', 'q'], ['fit', 'fit'], ['crop', 'crop'], ['saturation', 'sat'], ['auto', 'auto'], ['dpr', 'dpr'], ['pad', 'pad'], ['frame', 'frame']];
function urlForImage(options) {
var spec = _extends({}, options || {});
var source = spec.source;
delete spec.source;
var image = parseSource(source);
if (!image) {
throw new Error("Unable to resolve image URL from source (" + JSON.stringify(source) + ")");
}
var id = image.asset._ref || image.asset._id || '';
var asset = parseAssetId(id); // Compute crop rect in terms of pixel coordinates in the raw source image
var asset = parseAssetId(id);
// Compute crop rect in terms of pixel coordinates in the raw source image
var cropLeft = Math.round(image.crop.left * asset.width);

@@ -244,4 +210,4 @@ var cropTop = Math.round(image.crop.top * asset.height);

height: Math.round(asset.height - image.crop.bottom * asset.height - cropTop)
}; // Compute hot spot rect in terms of pixel coordinates
};
// Compute hot spot rect in terms of pixel coordinates
var hotSpotVerticalRadius = image.hotspot.height * asset.height / 2;

@@ -256,5 +222,5 @@ var hotSpotHorizontalRadius = image.hotspot.width * asset.width / 2;

bottom: hotSpotCenterY + hotSpotVerticalRadius
}; // If irrelevant, or if we are requested to: don't perform crop/fit based on
};
// If irrelevant, or if we are requested to: don't perform crop/fit based on
// the crop/hotspot.
if (!(spec.rect || spec.focalPoint || spec.ignoreImageParams || spec.crop)) {

@@ -266,23 +232,21 @@ spec = _extends({}, spec, fit({

}
return specToImageUrl(_extends({}, spec, {
asset: asset
}));
} // eslint-disable-next-line complexity
}
// eslint-disable-next-line complexity
function specToImageUrl(spec) {
var cdnUrl = (spec.baseUrl || 'https://cdn.sanity.io').replace(/\/+$/, '');
var filename = spec.asset.id + "-" + spec.asset.width + "x" + spec.asset.height + "." + spec.asset.format;
var vanityStub = spec.vanityName ? "/" + spec.vanityName : '';
var filename = spec.asset.id + "-" + spec.asset.width + "x" + spec.asset.height + "." + spec.asset.format + vanityStub;
var baseUrl = cdnUrl + "/images/" + spec.projectId + "/" + spec.dataset + "/" + filename;
var params = [];
if (spec.rect) {
// Only bother url with a crop if it actually crops anything
var _spec$rect = spec.rect,
left = _spec$rect.left,
top = _spec$rect.top,
width = _spec$rect.width,
height = _spec$rect.height;
left = _spec$rect.left,
top = _spec$rect.top,
width = _spec$rect.width,
height = _spec$rect.height;
var isEffectiveCrop = left !== 0 || top !== 0 || height !== spec.asset.height || width !== spec.asset.width;
if (isEffectiveCrop) {

@@ -292,7 +256,5 @@ params.push("rect=" + left + "," + top + "," + width + "," + height);

}
if (spec.bg) {
params.push("bg=" + spec.bg);
}
if (spec.focalPoint) {

@@ -302,14 +264,10 @@ params.push("fp-x=" + spec.focalPoint.x);

}
var flip = [spec.flipHorizontal && 'h', spec.flipVertical && 'v'].filter(Boolean).join('');
if (flip) {
params.push("flip=" + flip);
} // Map from spec name to url param name, and allow using the actual param name as an alternative
}
// Map from spec name to url param name, and allow using the actual param name as an alternative
SPEC_NAME_TO_URL_NAME_MAPPINGS.forEach(function (mapping) {
var specName = mapping[0],
param = mapping[1];
param = mapping[1];
if (typeof spec[specName] !== 'undefined') {

@@ -321,15 +279,12 @@ params.push(param + "=" + encodeURIComponent(spec[specName]));

});
if (params.length === 0) {
return baseUrl;
}
return baseUrl + "?" + params.join('&');
}
function fit(source, spec) {
var cropRect;
var imgWidth = spec.width;
var imgHeight = spec.height; // If we are not constraining the aspect ratio, we'll just use the whole crop
var imgHeight = spec.height;
// If we are not constraining the aspect ratio, we'll just use the whole crop
if (!(imgWidth && imgHeight)) {

@@ -342,9 +297,7 @@ return {

}
var crop = source.crop;
var hotspot = source.hotspot; // If we are here, that means aspect ratio is locked and fitting will be a bit harder
var hotspot = source.hotspot;
// If we are here, that means aspect ratio is locked and fitting will be a bit harder
var desiredAspectRatio = imgWidth / imgHeight;
var cropAspectRatio = crop.width / crop.height;
if (cropAspectRatio > desiredAspectRatio) {

@@ -354,7 +307,7 @@ // The crop is wider than the desired aspect ratio. That means we are cutting from the sides

var width = Math.round(height * desiredAspectRatio);
var top = Math.max(0, Math.round(crop.top)); // Center output horizontally over hotspot
var top = Math.max(0, Math.round(crop.top));
// Center output horizontally over hotspot
var hotspotXCenter = Math.round((hotspot.right - hotspot.left) / 2 + hotspot.left);
var left = Math.max(0, Math.round(hotspotXCenter - width / 2)); // Keep output within crop
var left = Math.max(0, Math.round(hotspotXCenter - width / 2));
// Keep output within crop
if (left < crop.left) {

@@ -365,3 +318,2 @@ left = crop.left;

}
cropRect = {

@@ -376,13 +328,8 @@ left: left,

var _width = crop.width;
var _height = Math.round(_width / desiredAspectRatio);
var _left = Math.max(0, Math.round(crop.left)); // Center output vertically over hotspot
var _left = Math.max(0, Math.round(crop.left));
// Center output vertically over hotspot
var hotspotYCenter = Math.round((hotspot.bottom - hotspot.top) / 2 + hotspot.top);
var _top = Math.max(0, Math.round(hotspotYCenter - _height / 2)); // Keep output rect within crop
var _top = Math.max(0, Math.round(hotspotYCenter - _height / 2));
// Keep output rect within crop
if (_top < crop.top) {

@@ -393,3 +340,2 @@ _top = crop.top;

}
cropRect = {

@@ -402,3 +348,2 @@ left: _left,

}
return {

@@ -409,3 +354,3 @@ width: imgWidth,

};
} // For backwards-compatibility
}

@@ -415,19 +360,14 @@ var validFits = ['clip', 'crop', 'fill', 'fillmax', 'max', 'scale', 'min'];

var validAutoModes = ['format'];
function isSanityModernClientLike(client) {
return client && 'config' in client ? typeof client.config === 'function' : false;
}
function isSanityClientLike(client) {
return client && 'clientConfig' in client ? typeof client.clientConfig === 'object' : false;
}
function rewriteSpecName(key) {
var specs = SPEC_NAME_TO_URL_NAME_MAPPINGS;
for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
var entry = _step.value;
var specName = entry[0],
param = entry[1];
param = entry[1];
if (key === specName || key === param) {

@@ -437,6 +377,4 @@ return specName;

}
return key;
}
function urlBuilder(options) {

@@ -447,6 +385,5 @@ // Did we get a modernish client?

var _options$config = options.config(),
apiUrl = _options$config.apiHost,
projectId = _options$config.projectId,
dataset = _options$config.dataset;
apiUrl = _options$config.apiHost,
projectId = _options$config.projectId,
dataset = _options$config.dataset;
var apiHost = apiUrl || 'https://api.sanity.io';

@@ -458,16 +395,11 @@ return new ImageUrlBuilder(null, {

});
} // Did we get a SanityClient?
var client = options;
if (isSanityClientLike(client)) {
}
// Did we get a SanityClient?
if (isSanityClientLike(options)) {
// Inherit config from client
var _client$clientConfig = client.clientConfig,
_apiUrl = _client$clientConfig.apiHost,
_projectId = _client$clientConfig.projectId,
_dataset = _client$clientConfig.dataset;
var _options$clientConfig = options.clientConfig,
_apiUrl = _options$clientConfig.apiHost,
_projectId = _options$clientConfig.projectId,
_dataset = _options$clientConfig.dataset;
var _apiHost = _apiUrl || 'https://api.sanity.io';
return new ImageUrlBuilder(null, {

@@ -478,6 +410,5 @@ baseUrl: _apiHost.replace(/^https:\/\/api\./, 'https://cdn.'),

});
} // Or just accept the options as given
return new ImageUrlBuilder(null, options);
}
// Or just accept the options as given
return new ImageUrlBuilder(null, options || {});
}

@@ -490,5 +421,3 @@ var ImageUrlBuilder = /*#__PURE__*/function () {

}
var _proto = ImageUrlBuilder.prototype;
_proto.withOptions = function withOptions(options) {

@@ -499,3 +428,2 @@ var baseUrl = options.baseUrl || this.options.baseUrl;

};
for (var key in options) {

@@ -507,11 +435,10 @@ if (options.hasOwnProperty(key)) {

}
return new ImageUrlBuilder(this, _extends({
baseUrl: baseUrl
}, newOptions));
} // The image to be represented. Accepts a Sanity 'image'-document, 'asset'-document or
}
// The image to be represented. Accepts a Sanity 'image'-document, 'asset'-document or
// _id of asset. To get the benefit of automatic hot-spot/crop integration with the content
// studio, the 'image'-document must be provided.
;
_proto.image = function image(source) {

@@ -521,5 +448,5 @@ return this.withOptions({

});
} // Specify the dataset
}
// Specify the dataset
;
_proto.dataset = function dataset(_dataset2) {

@@ -529,5 +456,5 @@ return this.withOptions({

});
} // Specify the projectId
}
// Specify the projectId
;
_proto.projectId = function projectId(_projectId2) {

@@ -537,5 +464,5 @@ return this.withOptions({

});
} // Specify background color
}
// Specify background color
;
_proto.bg = function bg(_bg) {

@@ -545,5 +472,5 @@ return this.withOptions({

});
} // Set DPR scaling factor
}
// Set DPR scaling factor
;
_proto.dpr = function dpr(_dpr) {

@@ -554,5 +481,5 @@ // A DPR of 1 is the default - so only include it if we have a different value

} : {});
} // Specify the width of the image in pixels
}
// Specify the width of the image in pixels
;
_proto.width = function width(_width) {

@@ -562,5 +489,5 @@ return this.withOptions({

});
} // Specify the height of the image in pixels
}
// Specify the height of the image in pixels
;
_proto.height = function height(_height) {

@@ -570,5 +497,5 @@ return this.withOptions({

});
} // Specify focal point in fraction of image dimensions. Each component 0.0-1.0
}
// Specify focal point in fraction of image dimensions. Each component 0.0-1.0
;
_proto.focalPoint = function focalPoint(x, y) {

@@ -582,3 +509,2 @@ return this.withOptions({

};
_proto.maxWidth = function maxWidth(_maxWidth) {

@@ -589,3 +515,2 @@ return this.withOptions({

};
_proto.minWidth = function minWidth(_minWidth) {

@@ -596,3 +521,2 @@ return this.withOptions({

};
_proto.maxHeight = function maxHeight(_maxHeight) {

@@ -603,3 +527,2 @@ return this.withOptions({

};
_proto.minHeight = function minHeight(_minHeight) {

@@ -609,5 +532,5 @@ return this.withOptions({

});
} // Specify width and height in pixels
}
// Specify width and height in pixels
;
_proto.size = function size(width, height) {

@@ -618,5 +541,5 @@ return this.withOptions({

});
} // Specify blur between 0 and 100
}
// Specify blur between 0 and 100
;
_proto.blur = function blur(_blur) {

@@ -627,3 +550,2 @@ return this.withOptions({

};
_proto.sharpen = function sharpen(_sharpen) {

@@ -633,5 +555,5 @@ return this.withOptions({

});
} // Specify the desired rectangle of the image
}
// Specify the desired rectangle of the image
;
_proto.rect = function rect(left, top, width, height) {

@@ -646,5 +568,5 @@ return this.withOptions({

});
} // Specify the image format of the image. 'jpg', 'pjpg', 'png', 'webp'
}
// Specify the image format of the image. 'jpg', 'pjpg', 'png', 'webp'
;
_proto.format = function format(_format) {

@@ -655,3 +577,2 @@ return this.withOptions({

};
_proto.invert = function invert(_invert) {

@@ -661,5 +582,5 @@ return this.withOptions({

});
} // Rotation in degrees 0, 90, 180, 270
}
// Rotation in degrees 0, 90, 180, 270
;
_proto.orientation = function orientation(_orientation) {

@@ -669,5 +590,5 @@ return this.withOptions({

});
} // Compression quality 0-100
}
// Compression quality 0-100
;
_proto.quality = function quality(_quality) {

@@ -677,5 +598,5 @@ return this.withOptions({

});
} // Make it a download link. Parameter is default filename.
}
// Make it a download link. Parameter is default filename.
;
_proto.forceDownload = function forceDownload(download) {

@@ -685,5 +606,5 @@ return this.withOptions({

});
} // Flip image horizontally
}
// Flip image horizontally
;
_proto.flipHorizontal = function flipHorizontal() {

@@ -693,5 +614,5 @@ return this.withOptions({

});
} // Flip image vertically
}
// Flip image vertically
;
_proto.flipVertical = function flipVertical() {

@@ -701,5 +622,5 @@ return this.withOptions({

});
} // Ignore crop/hotspot from image record, even when present
}
// Ignore crop/hotspot from image record, even when present
;
_proto.ignoreImageParams = function ignoreImageParams() {

@@ -710,3 +631,2 @@ return this.withOptions({

};
_proto.fit = function fit(value) {

@@ -716,3 +636,2 @@ if (validFits.indexOf(value) === -1) {

}
return this.withOptions({

@@ -722,3 +641,2 @@ fit: value

};
_proto.crop = function crop(value) {

@@ -728,9 +646,8 @@ if (validCrops.indexOf(value) === -1) {

}
return this.withOptions({
crop: value
});
} // Saturation
}
// Saturation
;
_proto.saturation = function saturation(_saturation) {

@@ -741,3 +658,2 @@ return this.withOptions({

};
_proto.auto = function auto(value) {

@@ -747,9 +663,8 @@ if (validAutoModes.indexOf(value) === -1) {

}
return this.withOptions({
auto: value
});
} // Specify the number of pixels to pad the image
}
// Specify the number of pixels to pad the image
;
_proto.pad = function pad(_pad) {

@@ -759,14 +674,28 @@ return this.withOptions({

});
} // Gets the url based on the submitted parameters
}
// Vanity URL for more SEO friendly URLs
;
_proto.vanityName = function vanityName(value) {
return this.withOptions({
vanityName: value
});
};
_proto.frame = function frame(_frame) {
if (_frame !== 1) {
throw new Error("Invalid frame value \"" + _frame + "\"");
}
return this.withOptions({
frame: _frame
});
}
// Gets the url based on the submitted parameters
;
_proto.url = function url() {
return urlForImage(this.options);
} // Alias for url()
}
// Alias for url()
;
_proto.toString = function toString() {
return this.url();
};
return ImageUrlBuilder;

@@ -773,0 +702,0 @@ }();

17

lib/node/builder.js

@@ -68,6 +68,5 @@ "use strict";

// Did we get a SanityClient?
var client = options;
if (isSanityClientLike(client)) {
if (isSanityClientLike(options)) {
// Inherit config from client
var _b = client.clientConfig, apiUrl = _b.apiHost, projectId = _b.projectId, dataset = _b.dataset;
var _b = options.clientConfig, apiUrl = _b.apiHost, projectId = _b.projectId, dataset = _b.dataset;
var apiHost = apiUrl || 'https://api.sanity.io';

@@ -81,3 +80,3 @@ return new ImageUrlBuilder(null, {

// Or just accept the options as given
return new ImageUrlBuilder(null, options);
return new ImageUrlBuilder(null, options || {});
}

@@ -220,2 +219,12 @@ exports.default = urlBuilder;

};
// Vanity URL for more SEO friendly URLs
ImageUrlBuilder.prototype.vanityName = function (value) {
return this.withOptions({ vanityName: value });
};
ImageUrlBuilder.prototype.frame = function (frame) {
if (frame !== 1) {
throw new Error("Invalid frame value \"".concat(frame, "\""));
}
return this.withOptions({ frame: frame });
};
// Gets the url based on the submitted parameters

@@ -222,0 +231,0 @@ ImageUrlBuilder.prototype.url = function () {

4

lib/node/urlForImage.js

@@ -41,2 +41,3 @@ "use strict";

['pad', 'pad'],
['frame', 'frame']
];

@@ -84,3 +85,4 @@ function urlForImage(options) {

var cdnUrl = (spec.baseUrl || 'https://cdn.sanity.io').replace(/\/+$/, '');
var filename = "".concat(spec.asset.id, "-").concat(spec.asset.width, "x").concat(spec.asset.height, ".").concat(spec.asset.format);
var vanityStub = spec.vanityName ? "/".concat(spec.vanityName) : '';
var filename = "".concat(spec.asset.id, "-").concat(spec.asset.width, "x").concat(spec.asset.height, ".").concat(spec.asset.format).concat(vanityStub);
var baseUrl = "".concat(cdnUrl, "/images/").concat(spec.projectId, "/").concat(spec.dataset, "/").concat(filename);

@@ -87,0 +89,0 @@ var params = [];

6

lib/types/builder.d.ts

@@ -1,2 +0,2 @@

import { AutoMode, CropMode, FitMode, ImageFormat, ImageUrlBuilderOptions, ImageUrlBuilderOptionsWithAliases, SanityModernClientLike, Orientation, SanityClientLike, SanityImageSource, SanityProjectDetails } from './types';
import type { AutoMode, CropMode, FitMode, ImageFormat, ImageUrlBuilderOptions, ImageUrlBuilderOptionsWithAliases, SanityModernClientLike, Orientation, SanityClientLike, SanityImageSource, SanityProjectDetails } from './types';
export default function urlBuilder(options?: SanityClientLike | SanityProjectDetails | SanityModernClientLike): ImageUrlBuilder;

@@ -23,3 +23,3 @@ export declare class ImageUrlBuilder {

rect(left: number, top: number, width: number, height: number): ImageUrlBuilder;
format(format: ImageFormat): ImageUrlBuilder;
format(format?: ImageFormat | undefined): ImageUrlBuilder;
invert(invert: boolean): ImageUrlBuilder;

@@ -37,4 +37,6 @@ orientation(orientation: Orientation): ImageUrlBuilder;

pad(pad: number): ImageUrlBuilder;
vanityName(value: string): ImageUrlBuilder;
frame(frame: number): ImageUrlBuilder;
url(): string;
toString(): string;
}

3

lib/types/types.d.ts

@@ -37,2 +37,4 @@ export declare type ImageUrlBuilderOptions = Partial<SanityProjectDetails> & {

pad?: number;
vanityName?: string;
frame?: number;
};

@@ -84,2 +86,3 @@ export declare type ImageUrlBuilderOptionsWithAliases = ImageUrlBuilderOptions & {

export interface SanityProjectDetails {
baseUrl?: string;
projectId: string;

@@ -86,0 +89,0 @@ dataset: string;

3

package.json
{
"name": "@sanity/image-url",
"version": "1.0.2",
"version": "1.1.0",
"description": "Tools to generate image urls from Sanity content",

@@ -64,2 +64,3 @@ "source": "src/builder.ts",

"devDependencies": {
"@sanity/client": "^6.22.2",
"@types/jest": "^27.4.0",

@@ -66,0 +67,0 @@ "@types/node": "^17.0.18",

23

README.md

@@ -35,3 +35,3 @@ # @sanity/image-url

This will ensure that the author image is alway 200 pixels wide, automatically applying any crop specified by the editor and cropping towards the hot-spot she drew. You can specify both width and height like this:
This will ensure that the author image is always 200 pixels wide, automatically applying any crop specified by the editor and cropping towards the hot-spot she drew. You can specify both width and height like this:

@@ -112,7 +112,7 @@ ```jsx

Specifies how to crop the image. When specified, overrides any crop or hotspot in the image record. See the [documentation](https://www.sanity.io/docs/reference/image-urls#crop-object-object) for details.
Specifies how to crop the image. When specified, overrides any crop or hotspot in the image record. See the [documentation](https://www.sanity.io/docs/image-urls#crop-749d37d946b6) for details.
### `fit(value)`
Configures the fit mode. See the [documentation](https://www.sanity.io/docs/reference/image-urls#fit-object-object) for details.
Configures the fit mode. See the [documentation](https://www.sanity.io/docs/image-urls#fit-45b29dc6f09f) for details.

@@ -139,2 +139,17 @@ ### `dpr(value)`

### `vanityName(fileName)`
Specify a "vanity name" for the image. This is useful for SEO purposes and is added to the end of the URL. For example:
```ts
urlFor('image-928ac96d53b0c9049836c86ff25fd3c009039a16-200x200-png').vanityName('myImage.png')
// https://cdn.sanity.io/…/928ac96d53b0c9049836c86ff25fd3c009039a16-200x200.png/myImage.png
```
### `frame(value)`
Specify the frame of an animated image to transform. Acceptable values:
- `1` - Returns the first frame of the animated image as a static preview of the image.
### Deprecated: `minWidth(pixels)`, `maxWidth(pixels)`, `minHeight(pixels)`, `maxHeight(pixels)`

@@ -148,2 +163,4 @@

> ℹ️ This feature is available to select Enterprise accounts. Get in touch with your sales executive to learn more.
You can specify a custom `baseUrl` in the builder options in order to override the default (`https://cdn.sanity.io`):

@@ -150,0 +167,0 @@ 

lib/browser/image-url.esm.mjs

Sorry, the diff of this file is not supported yet

lib/browser/image-url.esm.mjs.map

Sorry, the diff of this file is not supported yet

lib/browser/image-url.umd.js.map

Sorry, the diff of this file is not supported yet

lib/node/builder.js.map

Sorry, the diff of this file is not supported yet

lib/node/urlForImage.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc