Documentation

Modules: app/util/imageSizeUtils

Utilities for calculating the optimal image sizes to request from the backend.

Source:

Members

<static, constant> filterSimilarVariants

Returns a new array of width with the widths that are too close together filtered out. The amount that widths have to differ is defined in VARIANT_MIN_DIFF

Source:

<static, constant> getCloudinaryVariants

Generate a image src url based off a cloudinary id

Source:
Example
const src = getCloudinaryVariants({
   url: cloudinarySrc,
      useWebp: hasWebpSupport,
      width: px,
      ratio,
      cropTye: cloudinaryCropType,
    });

<static, constant> getFallbackVariant

Picks the variant from an array of widths that should be used as fallback when a browser does not support srcset attributes.

Source:

<static, constant> getSrcSetFromVariants

1920/ Get the srcset to use for the given image widths

Source:

<static, constant> getVariantUrl

Gets the cropping url for a given image width

Source:
Example
const src = getVariantUrl('http://some/image.jpg', 800, 16/9);

<static, constant> getViewportRelativeVariants

Get the width variants based on a scale of the full screen size.

Source:
Example
// returns image variants for an image that shows at 50% of screen size
const variants = getViewportRelativeVariants(0.5);

<static, constant> SCREEN_WIDTHS

Array of popular browser sizes. This array will be used as baseline to calculate the image sizes to request. This array should include mobile browser sizes corrected for device pixel ratio. So for this array, a phone with a css width of 320px and a device-pixel-ratio of 2 will be considered size 640.

Source:

<static, constant> VARIANT_MIN_DIFF :number

The minimum width difference between image variants. If variants are closer together than this amount, the filterSimilarVariants() util will remove them

Type:
  • number
Source: