Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x | export const ACCESSIBILITY_TRANSFORMATIONS = { 'darkmode': {effect: 'tint:75:black'}, 'brightmode': {effect: 'tint:50:white'}, 'monochrome': {effect: 'grayscale'}, 'colorblind': {effect: 'assist_colorblind'} }; export const predominantColorTransformPxl = [ {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'}, {crop: 'crop', width: 1, height: 1, gravity: 'north_east'}, {fetch_format: 'auto', quality: 'auto'}]; export const predominantColorTransform = [ {variables: [['$currWidth', 'w'], ['$currHeight', 'h']]}, {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'}, {crop: 'crop', width: 10, height: 10, gravity: 'north_east'}, {width: '$currWidth', height: '$currHeight', crop: 'fill'}, {fetch_format: 'auto', quality: 'auto'}]; export const PLACEHOLDER_TRANSFORMATIONS = { vectorize: [{effect: 'vectorize:3:0.1', fetch_format: 'svg'}], pixelate: [{effect: 'pixelate', quality: 1, fetch_format: 'auto'}], blur: [{effect: 'blur:2000', quality: 1, fetch_format: 'auto'}], 'predominant-color': predominantColorTransform, lqip: [ { variables: [["$nh", "ih"], ["$nw", "iw"]], crop: "scale", width: "20", quality: "auto" }, { crop: "scale", width: "$nw", height: "$nh" } ], color: [ { variables: [["$nh", "ih"], ["$nw", "iw"]], crop: "scale", width: "1", quality: "1" }, { crop: "scale", width: "$nw", height: "$nh" } ] }; export const progressive = { flags: ["progressive"] } export const COMPONENTS = { CldImage: 'CldImage', CldPlaceholder: 'CldPlaceholder', CldVideo: 'CldVideo', CldPoster: 'CldPoster', CldTransformation: 'CldTransformation', CldContext: 'CldContext' } export const RESPONSIVE_CSS_DEFAULT = Object.freeze({ display: "block", width: "100%" }) export const RESPONSIVE_CSS = { height: { display: "block", height: "100%", width: "auto" }, true: RESPONSIVE_CSS_DEFAULT, auto: RESPONSIVE_CSS_DEFAULT, width: RESPONSIVE_CSS_DEFAULT, fill: { ...RESPONSIVE_CSS_DEFAULT, height: "100%" }, } export const LAZY_LOADING = 'lazy' export const IMAGE_CLASSES = { LOADING: 'cld-image-loading', LOADED: 'cld-image-loaded', DEFAULT: 'cld-image' } export const PLACEHOLDER_CLASS = 'cld-placeholder' export const IMAGE_WITH_PLACEHOLDER_CSS = { [IMAGE_CLASSES.LOADING]: { opacity: 0, position: 'absolute', }, [PLACEHOLDER_CLASS]: { display: 'inline-block' } } export const CLD_IMAGE_WRAPPER_CLASS = "cld-image-wrapper" |