1. Home
  2. Actions & Qualifiers
  3. Gravity

Gravity

Description

A qualifier that determines which part of an asset to focus on, and thus which part of the asset to keep,
when any part of the asset is cropped. For overlays, this setting determines where to place the overlay.

Examples

			import {Cloudinary} from "@cloudinary/url-gen";
			import {compass} from "@cloudinary/url-gen/qualifiers/gravity";
			import {north} from "@cloudinary/url-gen/qualifiers/compass";
			import {crop} from "@cloudinary/url-gen/actions/resize";
			
			const yourCldInstance = new Cloudinary({cloud: {cloudName: 'demo'}});
			const image = yourCldInstance.image('woman');
			image.resize(crop().width(300).gravity(compass(north())))
			
			// Expand every function separately to see its own example
Details

qualifiers/gravity.ts, line 82

Classes

new AutoGravity()

new CompassGravity()

new FocusOnGravity()

new XYCenterGravity()

Methods

<static> compass( direction ) → {CompassGravity}

Description

Defines the gravity based on directional values from a compass. Learn more: Control gravity for images Learn more: Control gravity for videos

Parameters
Name Type Description
direction Qualifiers.Compass | string

A compass Values
Returns
Examples

			import {Cloudinary} from "@cloudinary/url-gen";
			import {compass} from "@cloudinary/url-gen/qualifiers/gravity";
			import {north} from "@cloudinary/url-gen/qualifiers/compass";
			import {crop} from "@cloudinary/url-gen/actions/resize";
			
			const yourCldInstance = new Cloudinary({cloud: {cloudName: 'demo'}});
			const image = yourCldInstance.image('woman');
			image.resize(crop().width(300).gravity(compass(north())))
Details

qualifiers/gravity.ts, line 23

<static> focusOn( ...args ) → {FocusOnGravity}

qualifier

Description

Specifies what to focus on, for example: faces, objects, eyes, etc.

Parameters
Name Type Attributes Description
args Qualifier.FocusOn <repeatable>

One or more objects to focus on
Returns
Examples

			import {Cloudinary} from "@cloudinary/url-gen";
			import {focusOn} from "@cloudinary/url-gen/qualifiers/gravity";
			import {crop} from "@cloudinary/url-gen/actions/resize";
			import {cat} from "@cloudinary/url-gen/qualifiers/focusOn";
			
			const yourCldInstance = new Cloudinary({cloud: {cloudName: 'demo'}});
			const image = yourCldInstance.image('woman');
			image.resize(crop().width(300).gravity(focusOn(cat())))
Details

qualifiers/gravity.ts, line 42

<static> autoGravity() → {Qualifiers.Gravity.AutoGravity}

qualifier

Description

Automatically identifies the most interesting regions in the asset, can be qualified further by including what to focus on.

Returns
Examples

			import {Cloudinary} from "@cloudinary/url-gen";
			import {autoGravity} from "@cloudinary/url-gen/qualifiers/gravity";
			import {crop} from "@cloudinary/url-gen/actions/resize";
			
			const yourCldInstance = new Cloudinary({cloud: {cloudName: 'demo'}});
			const image = yourCldInstance.image('woman');
			image.resize(crop().width(300).gravity(autoGravity()))

			import {Cloudinary} from "@cloudinary/url-gen";
			import {autoGravity} from "@cloudinary/url-gen/qualifiers/gravity";
			import {crop} from "@cloudinary/url-gen/actions/resize";
			import {cat} from "@cloudinary/url-gen/qualifiers/focusOn";
			import {AutoFocus} from "@cloudinary/url-gen/qualifiers/autoFocus";
			
			const yourCldInstance = new Cloudinary({cloud: {cloudName: 'demo'}});
			const image = yourCldInstance.image('woman');
			image.resize(crop().width(300).gravity(autoGravity().autoFocus(AutoFocus.focusOn(cat()))))
Details

qualifiers/gravity.ts, line 70

<static> xyCenter() → {XYCenterGravity}

qualifier

Description

Set the center of gravity to the given x & y coordinates.

Returns
Details

qualifiers/gravity.ts, line 79