88min

Imgix Image processing

ÔĽŅ

ÔĽŅ

Introduction

This amazing plugin will enable you and your users to process any images with multitude of cool effects using Imgix image processor. For example it can adjust the brightness and contrast, apply multiple color effects like blur, sepia and monochrome, add branding to your images by printing a watermark into any uploaded image, overlay text or detect faces and much more.

How to setup

Plugin element: Imgix Processing

ÔĽŅ

Document image
Document image
Document image
Document image
Document image
Document image
Document image
Document image
Document image
Document image
Document image
Document image
Document image
Document image
Document image

Fields

ÔĽŅ

ÔĽŅ

Adjustment Options

Adjustment parameters do basic retouching operations similar to those in image-editing applications like Adobe¬ģ Photoshop¬ģ. You can use them to fix common issues such as under- or over-exposure, blurriness, and color range, or alter your images artistically.

Title

Description

Value

Type

Brightness

Adjusts the overall brightness of the image.

Valid values are in the range¬†-100¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Contrast

Adjusts the contrast of the image.

Valid values are in the range¬†-100¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Exposure

Adjusts the exposure setting for an image, similar to changing the F-stop on a camera.

Valid values are in the range¬†-100¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Gamma

Adjusts gamma and midtone brightness.

Valid values are in the range¬†-100¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Highlight

Adjusts the highlight tonal mapping of an image while preserving detail in highlighted areas.

Valid values are in the range¬†-100¬†‚Äst0. The default value is¬†0, which leaves the image unchanged.

Number

Hue

Changes the hue, or tint, of each pixel in the image.

The value is an angle along a hue color wheel, with the pixel's starting color at¬†0. Valid values are in the range¬†0¬†‚Äst359. The default value is¬†0, which leaves the image unchanged.

Number

Invert

Inverts all pixel colors and brightness values within the image, producing a negative of the image.

Valid values are false and true.

Yes or No

Saturation

Adjusts the saturation of the image.

Valid values are in the range¬†-100¬†‚Äst100. The default value is¬†0, which leaves the image unchanged. A value of¬†-100¬†will convert the image to grayscale.

Number

Shadow

Adjusts the shadow tonal mapping of an image while preserving detail in shadowed areas.

Valid values are in the range¬†0¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Sharpen

Sharpens the image using luminance (which only affects the black and white values), providing crisp detail with minimal color artifacts.

Valid values are in the range¬†0¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Unsharp Mask

Sharpens the image details using an unsharp mask (a blurred, inverted copy of the image).

Valid values are any floating point number. The default value is 0, which leaves the image unchanged. This parameter should be used in conjunction with Unsharp Mask Radius.

For images with general noise, we suggest using the Sharpen parameter instead. Unsharp mask and radius are better for thumbnails and fine-tuned sharpening.

Number

Unsharp Mask Radius

Determines how many pixels should be included to enhance the contrast when using the Unsharp Mask parameter.

Valid values are positive numbers, and the default is 2.5. This parameter will have no effect on the image if Unsharp Mask is not set.

For images with general noise, we suggest using the Sharpen parameter instead. Unsharp mask and radius are better for thumbnails and fine-tuned sharpening.

Number

Vibrance

Adjusts the color saturation of an image while keeping pleasing skin tones.

Valid values are in the range¬†-100¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Compress

When is set, imgix will apply best-effort techniques to reduce the size of the image. This includes altering our normal processing algorithm to apply more aggressive image compression. If the WebP format is not supported, images that contain transparency will be served in a PNG8 format (if supported) and all others will be served as JPEG. 

Valid values are false and true.

Yes or No

Visual Enhancement

When¬†is set, imgix determines whether the image can be served in a better format by a process called automatic content negotiation. It compiles the various signals available to us‚ÄĒincluding headers, user agents, and image analytics‚ÄĒto select the optimal image format for your user. This format is served back and the image is correctly cached.

Valid values are false and true.

Yes or No

File Format

When¬†is set, imgix determines whether the image can be served in a better format by a process called automatic content negotiation. It compiles the various signals available to us‚ÄĒincluding headers, user agents, and image analytics‚ÄĒto select the optimal image format for your user. This format is served back and the image is correctly cached.

Valid values are false and true.

Yes or No

Remove red eyes

When is set, red-eye removal is applied to any detected faces.

Valid values are false and true.

Yes or No

Background color

The Background color parameter allows you to fill in any transparent areas in your image with a color of your choice.

Hexadecimal color

Color

Blending options

This family of parameters allows you to overlay colors, images, or text on top of your images. You can control the alignment, width, height, cropping, alpha transparency, padding, size, and position of the overlay image separately from the base image. Blending also gives you multiple blend modes that control the color interactions between the overlay and base images, similar to those in Adobe¬ģ Photoshop¬ģ.

Title

Description

Value

Type

Apply Blend

The Blend parameter allows you to composite a color, text, or another image over your base image using various transformations known as blend modes. It must be set to enable the blend modes and other blending controls.

Valid values are false and true.

Yes or No

Blend Image

You can also blend another image over your base image by passing an image URL.

An image.

Image

Blend Color

To blend a solid color over your image, give the color.

Hexadecimal color

Color

Blend align

Adjusts the alignment of the overlay image relative to the base image.

Title

Description

Value

Type

Center

Align to the horizontal center of the base image.

Valid values are false and true.

Yes or No

Middle

Align to the vertical middle of the base image.

Valid values are false and true.

Yes or No

Left

Align to the left side of the base image.

Valid values are false and true.

Yes or No

Top

Align to the top of the base image.

Valid values are false and true.

Yes or No

Right

Align to the right side of the base image.

Valid values are false and true.

Yes or No

Bottom

Align to the bottom of the base image.

Valid values are false and true.

Yes or No

Blend Alpha

Sets the level of transparency for an overlay image or color.

Valid values are from¬†0¬†‚Äst100¬†where¬†0¬†is fully transparent and¬†100¬†is fully opaque.

Number

Blend Crop Faces

 If faces are detected in the overlay layer, attempts to center the crop to them.

Valid values are false and true.

Yes or No

Blend Crop Position

Controls how the overlay layer is cropped

Title

Description

Value

Type

Left

Crop from the left of the overlay layer, right.

Valid values are false and true.

Yes or No

Top

Crop from the top of the overlay layer, down.

Valid values are false and true.

Yes or No

Right

Crop from the right of the overlay layer, left.

Valid values are false and true.

Yes or No

Bottom

Crop from the bottom of the overlay layer, up.

Valid values are false and true.

Yes or No

Blend Fit

Controls how an overlay image is fit to its blend width and blend heightdimensions.

  • clamp¬†- Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The remaining space is filled with extended pixels from the edge of the image.¬†
  • clip¬†- Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image is assured to match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image.
  • crop¬†- Resizes the image to fill the width and height boundaries and crops any excess image data. The resulting image will match the width and height constraints without distorting the image.¬†
  • max¬†- Resizes the image to fit within the width and height boundaries without cropping or distorting the image, but will not increase the size of the image if it is smaller than the output size. The resulting image will maintain the same aspect ratio of the input image.
  • scale¬†- Scales the image to fit the constraining dimensions exactly. The resulting image will fill the dimensions, and will not maintain the aspect ratio of the input image.

Enum

Blend Height

Sets the height of the overlay image.

This operation occurs after your initial image has been resized. Values can range from 0 to the height of the overlay image, and can be larger than the height of the base image if desired.

When the value is a positive integer greater than 1, the value is interpreted as a pixel height. When the value is a float between 0.0 and 1.0, the value is interpreted as a ratio to the resized base image height. 

Number

Blend Width

Sets the width of the overlay image.

This operation occurs after your initial image has been resized. Values can range from 0 to the width of the overlay image, and can be larger than the width of the base image if desired.

When the value is a positive integer greater than 1, the value is interpreted as a pixel width. When the value is a float between 0.0 and 1.0, the value is interpreted as a ratio to the resized base image width. 

Number

Blend Mode

Blend modes determine how the color, image, or text overlay that's set with blend will interact with your base image.

  • normal¬†- Turns off blending, causing the overlay to be superimposed.¬†
  • darken¬†- Compares the color value of each overlapping pixel from the two layers, and keeps the darker value.
  • multiply¬†- Multiplies the color values of each overlapping pixel from the two layers, resulting in a darker composite image. Multiplying with black as the blend color will result in black; multiplying with white will leave the image unchanged.
  • burn¬†- Darkens the image based on the overlay image or color.
  • lighten¬†- Compares the color value of each overlapping pixel from the two layers, and keeps the lighter value.
  • screen¬†- The reverse of¬†multiply‚ÄĒthis parameter multiplies the inverse of the color values of each overlapping pixel from the two layers, lightening the image.
  • dodge¬†- Brightens the image based on the overlay image or color.
  • overlay¬†- Overlays the blend image or color, while preserving the highlights and shadows. It effectively multiplies or screens, depending on the background color.
  • softlight¬†- Lightens each pixel if the overlay is brighter than 50% grey (similar to¬†dodge), and darkens it if the overlay is darker than 50% grey (similar to¬†burn).
  • hardlight¬†- Lightens each pixel if the overlay is brighter than 50% grey (similar to¬†screen), and darkens it if the overlay is darker than 50% grey (similar to¬†multiply).¬†
  • difference¬†- Subtracts the value of the pixel on the overlay layer from the value of the underlying pixel on the base layers or vice versa, depending on which is brighter.
  • exclusion¬†- Similar to¬†difference, but with less contrast.¬†
  • color¬†- Blends the hue and saturation values of the overlay with the luminance of the base layer.
  • hue¬†- Blends the hue value of the overlay with the luminance and saturation of the base layer.
  • saturation¬†- Blends the saturation value of the overlay with the luminance and hue of the base layer.
  • luminosity¬†- Blends the luminance value of the overlay with the hue and saturation of the base layer.

Enum

Blend Padding

Sets the number of pixels of padding around the overlay image when Blend Align is set.

Min value 0 .

Number

Blend Size

Causes the overlay image to inherit the width, height, fit, and crop type of the base image. This parameter makes it easier to automate working with overlay images, resulting in the use of fewer parameters.

none or inherit

Enum

Blend X Position

Positions the overlay layer horizontally, measured from the left edge of the base image in pixels.

The default value is 0.

Number

Blend Y Position

Positions the overlay layer vertically, measured from the top edge of the base image in pixels.

The default value is 0.

Number

Border & Padding Options

Title

Description

Value

Type

Border Size

Draws a border around the image, in the width defined. 

Min value 0 .

Number

Border Color

Draws a border around the image, in the color defined. 

Hexadecimal color

Color

Border Outer Radius

Title

Description

Value

Type

Top Left

Sets the outer radius of the top-left border, in pixels.

Min value 0 .

Number

Top Right

Sets the outer radius of the top-right border, in pixels.

Min value 0 .

Number

Bottom Left

Sets the outer radius of the bottom-left border, in pixels.

Min value 0 .

Number

Bottom Right

Sets the outer radius of the bottom-right border, in pixels.

Min value 0 .

Number

Inner Border Radius

Title

Description

Value

Type

Top Left

Sets the inner radius of the border, in pixels.

Min value 0 .

Number

Top Right

Sets the inner radius of the border, in pixels.

Min value 0 .

Number

Bottom Left

Sets the inner radius of the border, in pixels.

Min value 0 .

Number

Bottom Right

Sets the inner radius of the border, in pixels.

Min value 0 .

Number

Padding

Pads the image by the number of pixels specified. Must be a positive integer.

Min value 0 .

Number

Face Detection Options

Title

Description

Value

Type

Face Index

The Face Index parameter selects a face on which to center an image

The Face Index parameter must be an integer. It can be set to any value from 1 to N, where N is the total number of detected faces in the image.

Number

Face Padding

The Face Padding parameter defines how much padding to allow for each face.

The value of Face Padding must be a positive float. The value defines the padding ratio based on the pixel dimensions of the face, up to the limit of the image's dimensions. A larger value yields more padding. The default value is 1.0.

Number

Focal Point Options

Focal point cropping gives you the ability to choose and fine-tune the point of interest of your image for better art direction.

Title

Description

Value

Type

Focal Point Zoom

The zoom or z-dimension value of a focal point of an image.

Must be a float between 1 and 100, inclusive. The default value is 1, representing the original size of the image.

Number

Focal Point X

The horizontal or x value of the focal point of an image.

Must be a float between 0.0 and 1.0, inclusive. The default value is 0.5, or the center of the image. 

Number

Focal Point Y

The vertical or y value of the focal point of an image.

Must be a float between 0.0 and 1.0, inclusive. The default value is 0.5, or the center of the image. 

Number

Output Format Options

This set of parameters gives you control over the output properties of your image.

Title

Description

Value

Type

Chroma Subsampling

The¬†Chroma Subsampling¬†parameter controls the chroma subsampling rate for JPEG and progressive JPEG output formats.¬†How it's work?ÔĽŅ

Valid values are 444, 422, and 420. The default is 420.

Enum

Color Quantization

Limits the number of colors in a picture using color quantization, which reduces the distinct colors in an image while maintaining a visually-similar image.

Valid values range between¬†2¬†‚Äst256.

Number

Color Space

The Color Space parameter specifies the color space of the output image. Changing or removing the color space metadata can help decrease file size, especially for smaller images such as thumbnails where it's a larger percentage of the total file size.

  • srgb¬†- will set the image to the sRGB color space, which is the Internet standard
  • adobergb1998¬†- refers to the Adobe RGB (1998) color space, which provides accurate color reproduction from screen to print
  • tinysrgb¬†- reduces the color space metadata but may cause a slight shift in color values
  • strip¬†- removes it completely for maximum size reduction

Enum

Output Format

The output format to convert the image to.

Valid options:

 avif - The AVIF file format supports lossy and lossless image formats. It does support transparency.

 gif - GIF is a lossy format. It supports transparency, but only in a very limited capacity (1-bit). It does support animation.

 jp2 - The JPEG 2000 file format is a lossy format. It does support transparency. It does not support animation.

 jpg - JPEG is a lossy format. It does not support transparency or animation.

 json - This is a data representation, in text, of the specified image's master version. It includes keys and values relating to the source image DPI, height, width, color profiles, color models, bit depth, and more. The output data varies depending on the input filetype. 

 jxr - The JPEG XR file format is a lossy format, but also supports lossless compression. It supports transparency. It does not support animation.

 pjpg - The Progressive JPEG file format is a lossy format. It does not support transparency or animation.

 mp4 - MP4 is the more widely supported of the two video formats imgix offers, and generally offers higher quality than WebM. It will give you smaller file sizes than animated GIF or WebP for animated content, but requires a <video> object and controls as noted above.

 png - The PNG file format is a lossless format. It does support transparency. It does not support animation.

 png8 - A variant of the PNG format with 8-bit transparency and palette-based color.

 png32 - The most common PNG variant with 24-bit color and an 8-bit alpha channel.

 webm - WebM has less browser support than MP4, but for Chrome and other supported browsers, it provides the best compression for animated content. It also requires a <video> object and controls.

 webp - The WebP file format is a lossy image format, but supports lossless compression. It does support transparency. It does support animation.

 blurhash - This will return a text string that can be used to render a small, blurred placeholder image.

Enum

Output Quality

Controls the output quality of lossy file formats (jpg, pjpg, webp, or jxr).

Valid values are in the range¬†0¬†‚Äst100¬†and the default is¬†75. Quality can often be set much lower than the default, especially when serving high-DPR images.¬†

Number

Noise Reduction Options

Minimizes noise in your image, helping to clean up small artifacts.

Title

Description

Value

Type

Noise Blur

Sets the threshold for noise reduction.

Valid values are in the range -100 to 100.

Number

Noise Sharpen

Determines the amount of sharpening in pixels above the bound set by Noise Blur, reducing noise in the image.

Valid values are in the range -100 to 100.

Number

PDF Page Number

Outputs individual pages or vector assets from PDF or Adobe¬ģ Illustrator¬ģ files (.ai) as images.

It can be set to any value from 1 to N, where N is the total number of pages.

Number

Rotation Options

The rotation parameters allow you to change the orientation of your image, by either flipping along its axes or rotating around the center.

Title

Description

Value

Type

Exif Orientation

Changes the cardinal orientation of the image by overriding any Exif orientation metadata.

To override the Exif data, you can set the value either to 1 through 8 (following Exif format), or to 90, 180, 270, etc. as degree aliases for the Exif values where 90 = 6, 180 = 3, and 270 = 8. 

Enum

Flip Axis

Flips the image horizontally, vertically, or both.

Valid values are h for horizontal, v for vertical, and hv to flip along both axes.

Enum

Rotation

Rotates the image by degrees according to the value specified.

Valid values are in the range¬†0¬†‚Äst359, and rotation is counter-clockwise with¬†0¬†(the default) at the top of the image.

Number

Size Options

Title

Description

Value

Type

Crop Faces

If faces are detected in the image, attempts to center the crop to them. Otherwise, the cropping alignment will default to centered if no additional values are provided.

Valid values are false and true.

Yes or No

Crop Left

Crop from the left of the image, right.

Valid values are false and true.

Yes or No

Crop Top

Crop from the top of the image, down.

Valid values are false and true.

Yes or No

Crop Right

Crop from the right of the image, left.

Valid values are false and true.

Yes or No

Crop Bottom

Crop from the bottom of the image, up.

Valid values are false and true.

Yes or No

Crop Focal Point

When set in combination with a relative horizontal (Focal Point X), vertical (Focal Point Y), and/or zoom (Focal Point Zoom) value, will center the image on those coordinates and crop from there.

Valid values are false and true.

Yes or No

Crop Edges

The edges crop automatically finds and crops to an area of interest by performing edge detection, looking for objects within the image.

Valid values are false and true.

Yes or No

Crop Entropy

The entropy crop automatically finds and crops to an area of interest by looking for busy sections of the image. 

Valid values are false and true.

Yes or No

Image Height

The height of the output image. 

  • Primary mode¬†is a positive integer, interpreted as pixel height. The resulting image will be¬†h¬†pixels tall.
  • A¬†secondary mode¬†is a float between¬†0.0¬†and¬†1.0, interpreted as a ratio in relation to the source image size. For example, an¬†h¬†value of¬†0.5¬†will result in an output image half the height of the source image.

Number

Image Width

The width of the output image. 

  • Primary mode¬†is a positive integer, interpreted as pixel height. The resulting image will be¬†w¬†pixels wide.
  • A¬†secondary mode¬†is a float between¬†0.0¬†and¬†1.0, interpreted as a ratio in relation to the source image size. For example, a¬†w¬†value of¬†0.5¬†will result in an output image half the width of the source image.

Number

Maximum Height

The maximum allowed height of the output image.

Must be an integer greater than 0. 

This parameter will only work if Resize Fit Mode is crop.

Number

Minimum Height

The minimum allowed height of the output image.

Must be an integer greater than 0. 

This parameter will only work if Resize Fit Mode is crop.

Number

Maximum Width

The maximum allowed width of the output image.

Must be an integer greater than 0. 

This parameter will only work if Resize Fit Mode is crop.

Number

Minimum Width

The minimum allowed width of the output image.

Must be an integer greater than 0. 

This parameter will only work if Resize Fit Mode is crop.

Number

Resize Fit Mode

The Resize Fit Mode parameter controls how the output image is fit to its target dimensions after resizing, and how any background areas will be filled.

Valid values are:

 clamp - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, and the remaining space is filled with extended pixels from the edge of the image.

 clip - Resizes the image to fit within the width and height boundaries without cropping or distorting the image. 

 crop - Resizes the image to fill the width and height dimensions and crops any excess image data. 

 facearea - Finds the area containing all faces, or a specific face in an image, and scales it to specified width and height dimensions. Can be used in conjunction with Face Index to identify a specific face, as well as Face Padding to include additional padded area around the face to zoom out from the immediate area around the faces.

 fill - Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. Excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions.

ÔĽŅfillmax¬†- Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. If the requested width or height exceeds that of the original, the original image remains the same size. The excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions.

 max - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, but will not increase the size of the image if it is smaller than the output size. The resulting image will maintain the same aspect ratio of the input image.

 min - Resizes and crops the image to match the aspect ratio of the requested width and height. Will not exceed the original width and height of the image.

 scale - Scales the image to fit the constraining dimensions exactly. The resulting image will fill the dimensions, and will not maintain the aspect ratio of the input image.

Enum

Stylize Options

Title

Description

Value

Type

Gaussian Blur

Applies a Gaussian style blur to your image, smoothing out image noise.

Valid values are in the range from¬†0¬†‚Äst2000. The default value is¬†0, which leaves the image unchanged.

Number

Halftone

Applies a half-toning effect to the image.

Valid values are in the range¬†0¬†‚Äst100. The default value is¬†0, which leaves the image unchanged. The value represents the width of the halftone dots.

Number

Monochrome

Applies an overall monochromatic hue change.

Hexadecimal color

Color

Pixellate

Applies a square pixellation effect to the image.

Valid values are in the range¬†0¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Sepia Tone

Applies a sepia-toning effect to the image.

Valid values are in the range from¬†0¬†‚Äst100. The default value is¬†0, which leaves the image unchanged.

Number

Trim Options

This set of parameters enables you to remove uniform border colors from your image, effectively cropping it.

Title

Description

Value

Type

Trim

Trims the image to remove a uniform border around the image. 

  • When the¬†trim¬†parameter is set to¬†auto, the image is trimmed automatically based on the border color.¬†
  • When the¬†trim¬†parameter is set to¬†color, the image will trim away the color specified by¬†Trim Color

ÔĽŅ

Enum

Trim Color

The trim-color parameter defines which color to trim when Trim is color.

6-digit hex color

Color

Text Options

Title

Description

Value

Type

Text

The text string to overlay on the image. This value must be supplied for text to be rendered‚ÄĒall other text parameters are ignored if it isn't set. Using the¬†txt¬†parameter is best for single-line text.¬†

imgix has full support for UTF-8 characters, and will appropriately render non-Latin character sets and emoji. This means that you can easily pipe in localized text to a base image instead of creating a different Origin Image for each language you want to support.

Text

Text Align

Title

Description

Value

Type

Left

Align to the left side of the base image.

Valid values are false and true.

Yes or No

Center

Align to the horizontal center of the base image.

Valid values are false and true.

Yes or No

Right

Align to the right side of the base image.

Valid values are false and true.

Yes or No

Top

Align to the top of the base image.

Valid values are false and true.

Yes or No

Middle

Align to the vertical middle of the base image.

Valid values are false and true.

Yes or No

Bottom

Align to the bottom of the base image.

Valid values are false and true.

Yes or No

Text Clipping Options

Title

Description

Value

Type

Start

Sets the region of the string that will be clipped if the string extends beyond the defined width of the text.

Valid values are false and true.

Yes or No

Middle

Sets the region of the string that will be clipped if the string extends beyond the defined width of the text.

Valid values are false and true.

Yes or No

End

Sets the region of the string that will be clipped if the string extends beyond the defined width of the text.

Valid values are false and true.

Yes or No

Add Ellipsis

The ellipsis input adds an ellipsis on the region where the text is clipped, and can be combined with one of the other values 

Valid values are false and true.

Yes or No

Text Color

Sets the color of the text.

Hexadecimal color

Color

Text Fit Mode

Enables a fit mode for the text.

  • none¬†- With no fit mode, the text will be clipped if it exceeds the contraints of the text bounds.¬†
  • max¬†- With¬†max, the text will be scaled down to fit within the bounds rather than clipping the text contents.

Enum

Text Font Family

Defines the typeface and style to set the text in.

The value may be either a CSS-style category, or an explicit font name. The possible CSS names are serif, sans-serif, monospace, cursive, fantasy. For an explicit typeface, use the name instead.

Text

Text Font Size

Sets the font size of the text, in pixels.

The value must be a number greater than 0. 

Number

Text Ligatures

Enables support for ligatures in the text, if the selected font supports them.

ÔĽŅ

  • A value of¬†0¬†enables typographically-required ligatures present in non-English languages.
  • A value of¬†1¬†enables common ligatures in the selected typeface.
  • A value of¬†2¬†enables all of the ligatures that are available in the selected typeface.

Number

Text Outline

Sets the width of the outline to draw around the text.

By default, this value is 0, which draws no outline. If defined, the outline is drawn inside the edges of the text.

Number

Text Outline Color

Sets the color of the outline to draw around the text.

Hexadecimal color

Color

Text Padding

The amount of spacing (in pixels) to add around the text.

The default is 10.

Number

Text Shadow

A number indicating the strength of a shadow to place on the text.

The default is no shadow, and the range is from¬†0¬†‚Äst10.

Number

Text Width

The width (in pixels) to restrict the width of the text to.

The default value is calculated by the width of the output image, minus any padding on the left and right. Positive integer

Number

Typesetting Endpoint Options

Title

Description

Value

Type

Multiline Text

Enable Multiline Text 

Valid values are false and true.

Yes or No

Text Leading

Controls the leading (or line spacing) in a multi-line text image output.

The default is 0, which corresponds to approximately 120% line height. Negative values are not allowed.

Number

Text Tracking

Controls the tracking (or letter spacing) in a text image output

Default is 0, and negative values are allowed.

Number

Watermark Options

Title

Description

Value

Type

Mark Image URL

Adds a watermark to the bottom right-hand corner of the image.

Image

Image

Mark Alignment Options

Title

Description

Value

Type

Top

Align to the top of the base image.

Valid values are false and true.

Yes or No

Middle

Align to the vertical middle of the base image.

Valid values are false and true.

Yes or No

Bottom

Align to the bottom of the base image.

Valid values are false and true.

Yes or No

Left

Align to the left side of the base image.

Valid values are false and true.

Yes or No

Center

Align to the horizontal center of the base image.

Valid values are false and true.

Yes or No

Right

Align to the right side of the base image.

Valid values are false and true.

Yes or No

Mark Alpha

Adjusts the alpha transparency of the watermark image.

Valid values are integers between 0 and 100, inclusive. 100 is fully opaque, and 0 is fully transparent. The default value is 100.

Number

Mark Base URL

Sets the base URL for mark when creating your Source in the Dashboard.

Whatever you enter as the value for mark-base will be prepended to the URL value of mark. To simplify URLs across your entire image catalog or obscure your full mark URL from users, use mark-base as a default parameter.

Text

Mark Fit Mode

Controls how the watermark image is fitted to its target dimensions.

  • clip¬†- Resizes the image to fit within the width and height boundaries without cropping or scaling the image. The resulting image is assured to match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image.
  • crop¬†- Resizes the image to fill the width and height boundaries and crops any excess image data. The resulting image will match the width and height constraints without scaling the image. Both the¬†Mark Width¬†and¬†Mark Height¬†parameters are required for this parameter.
  • max¬†- Resizes the image to fit within the width and height boundaries without cropping or scaling the image, but will not increase the size of the image if it is smaller than the output size. The resulting image will maintain the same aspect ratio of the input image.
  • scale¬†- Scales the image to fit the constraining dimensions exactly.

ÔĽŅ

Mark Height

Specifies the watermark height. 

This number can either be a positive integer or a float between 0.0 and 1.0, inclusive.

Number

Mark Width

Specifies the watermark width. 

 This number can either be a positive integer or a float between 0.0 and 1.0, inclusive.

Number

Mark Padding

Sets the number of pixels of padding between the watermark and the edge of the image. 

Value must be an integer. 

Number

Mark Scale

Scales the watermark to a percentage of the base image's width dimension

Valid values are between¬†0¬†‚Äst100.

Number

Mark X Position

Defines the x-position of the watermark in relation to the left-most edge of the base image.

The value can be a positive or negative integer. If the value is negative, the image will be partially outside the base image boundary.

Number

Mark Y Position

Defines the y-position of the watermark in relation to the top-most edge of the base image.

The value can be a positive or negative integer. If the value is negative, the image will be partially outside the base image boundary.

Number

Actions

process_image

The fields are completely identical to the fields of the element. 

ÔĽŅ

ÔĽŅ

reset _image

Resets all settings to those specified in the plugin element. Can be used to revert all changes after actions.

ÔĽŅ

Exposed states

processed_image

Returns URL of the modified image 

Plugin element: New Imgix Processing

ÔĽŅ

Fields

All fields are identical to the fields in the old element.

ÔĽŅ

Actions

Create multi-line text blocks

Document image
Document image
Document image

Title

Description

Text

The text that will be on the final image

Align Top

Align to the top of the base image.

Align middle

Align to the vertical middle of the base image.

Align bottom

Align to the bottom of the base image.

Align left

Align to the left side of the base image.

Align center

Align to the horizontal center of the base image.

Align right

Align to the right side of the base image.

Text color

Sets the color of the text.

"Max" Fit Mode

If is "No" the text will be clipped if it exceeds the contraints of the text bounds. If is "Yes" the text will be scaled down to fit within the bounds rather than clipping the text contents. 

Text font

Defines the typeface and style to set the text in.

Text ligatures

Enables support for ligatures in the text, if the selected font supports them. A value of 0 enables typographically-required ligatures present in non-English languages. A value of 1 enables common ligatures in the selected typeface. A value of 2 enables all of the ligatures that are available in the selected typeface.

Text outline

Sets the width of the outline to draw around the text.

Text outline color

Sets the color of the outline to draw around the text, if txt-line is set.

Text padding

The amount of spacing (in pixels) to add around the text.

Text shadow

A number indicating the strength of a shadow to place on the text. The default is no shadow, and the range is from 0 ‚Äď 10.

Text tracking

Controls the tracking (or letter spacing). Default is 0, and negative values are allowed.

Text leading

Controls the leading (or line spacing). The default is 0, which corresponds to approximately 120% line height. Negative values are not allowed.

Width

The width of the output image.

Height

The height of the output image. 

Background color

Allows you to fill in any transparent areas in your image with a color of your choice.

Output format

The output format to convert the image to.

Return Bubble URL

If "Yes" image will be saved to bubble storage and will be returned URL to S3, else if is "No" will be returned url to imgix 

ÔĽŅ

ÔĽŅ

ÔĽŅ

Exposed states

Title

Description

Processed Image

Return url to processed by imgix image

Multi-line text image

Return url to image from text

ÔĽŅ

Updated 26 Apr 2022
Did this page help?
Yes
No