Utils

Utils

This is where a lot of the tricky logic of this small but dense component takes place. All of these functions are called in both the <Image /> and <AmpImage /> components.

getSrcSet

Takes in all the properties from the <Image /> or <AmpImage /> that called it, expecting some mix of the image, aspectRatio and fallbackSrcSet props in particular.

It figures out what aspect ratio it should use based on what is being asked for and if that aspect ratio exists, then it either generates the correct srcset string based on that information or returns the fallbackSrcSet if it was provided. Returns null if one truly cannot be found or created.

getInstances

Takes in all the properties from the <Image /> or <AmpImage /> that called it, expecting some mix of the image and aspectRatio props.

It figures out what aspect ratio it should use based on what is being asked for and if that aspect ratio exists, then it either returns that array of image instances or returns the instances from the image.preferredAspectRatio. Returns an empty array if one truly cannot be found or created.

getSrc

Takes in all the properties from the <Image /> or <AmpImage /> that called it, expecting some mix of the image and fallbackSrc props. Returns image.fallback property if available and the fallbackSrc if not.

getAlt

Takes in all the properties from the <Image /> or <AmpImage /> that called it, expecting some mix of the image and alt props. Returns in order of preference alt, image.short_caption and an empty string.

Internal Functions

These functions are used by the above functions.

determineAspectRatio

Takes in all the properties from the function that called it and makes use of aspectRatio and image. Figures out which aspect ratio to request in the following order of preference: aspectRatio, image.preferredAspectRatio, image.preferred_aspect_ratio_slug, and uncropped.

generateSrcSet

Takes in an array of image instances for a given aspectRatio and generates a valid srcset string.