responsiveImageSizes

description

Introduced 3.2.0

Outputs sizes attribute strings based on front end configuration. Entry can be in terms of design columns or any other CSS type entry. It will intelligently create sizes strings which account for column span changes between breakpoints and fluid or fixed with breakpoints.

requires

• nothing

parameters

• object, array, string - sizes - required - size information to convert
• object - feConfig - front end breakpoint, columns
• boolean - relativeUnits - convert PX to REM, defaults to true

returns

• string for image sizes attribute

example usage:

For each example - the variable feConfig is of the format shown in the frontend.config.json in A17 Tailwind Plugins.

responsiveImageSizes({
  "sm": "100vw",
  "md": 4,
  "lg": 7,
  "xl": "80%",
  "xxl": "300px"
}, feConfig);
// '(min-width: 93.75rem) 18.75rem, (min-width: 75rem) 80%, (min-width: 56.25rem) 58.33vw, (min-width: 37.5rem) 50vw, 100vw'

Calcs are passed through, PX values inside calc's aren't updated:

responsiveImageSizes({
  "sm": "100vw",
  "md": 4,
  "lg": "calc(100vw - 20px)",
  "xl": "80%",
  "xxl": "300px"
}, feConfig);
// '(min-width: 93.75rem) 18.75rem, (min-width: 75rem) 80%, (min-width: 56.25rem) calc(100vw - 20px), (min-width: 37.5rem) 50vw, 100vw'

Fills in missing values, 2 column spanning requires different values as the amount of columns changes per breakpoint:

responsiveImageSizes({
  "sm": 2,
}, feConfig);
// '(min-width: 121.5rem) 15.625rem, (min-width: 56.25rem) 16.67vw, (min-width: 37.5rem) 25vw, 50vw'

To maintain pixel value outputs:

responsiveImageSizes({
  "sm": "100vw",
  "md": 4,
  "lg": 7,
  "xl": "80%",
  "xxl": "300px"
}, feConfig, false);
// '(min-width: 1500px) 300px, (min-width: 1200px) 80%, (min-width: 900px) 58.33vw, (min-width: 600px) 50vw, 100vw'

Maintaining pixel value outputs with missing set values:

responsiveImageSizes({
  "sm": 2,
}, feConfig, false);
// '(min-width: 1944px) 250px, (min-width: 900px) 16.67vw, (min-width: 600px) 25vw, 50vw'

If the smallest breakpoints are set, assumes 100vw until it finds a breapoint setting:

responsiveImageSizes({
  "lg": 2,
}, feConfig);
// '(min-width: 121.5rem) 15.625rem, (min-width: 56.25rem) 16.67vw, 100vw'

If nothing passed, assumes 100vw:

responsiveImageSizes({}, feConfig);
// '100vw'

If a string is passed instead of an object or array, its returned:

responsiveImageSizes('100vw', feConfig);
// '100vw'

If a string is passed instead of an object or array, its returned (PX values inside calc's aren't updated):

responsiveImageSizes('calc(100vw - 20rem)', feConfig);
// 'calc(100vw - 20rem)'

If an array of values is passed, its converted to a string (with PX optionally converted to REM):

responsiveImageSizes([
  { sm: '100vw' },
  { md: '50vw' },
  { lg: '58.33vw' },
  { xl: '80%' },
  { xxl: '300px' }
], feConfig);
// '(min-width: 93.75rem) 18.75rem, (min-width: 75rem) 80%, (min-width: 56.25rem) 58.33vw, (min-width: 37.5rem) 50vw, 100vw';