images: addImagePositions()

in dotcom-rendering/src/model/enhance-images.ts [329:432]


				images: addImagePositions(element.images, imagesForLightbox),
			};
		}

		if (!isImage(element) && !isCartoon(element)) {
			return element;
		}

		const allImages = isImage(element)
			? element.media.allImages
			: getCartoonImageForLightbox(element);

		const image = getMaster(allImages) ?? getLargest(allImages);

		const position = imagesForLightbox.find(
			({ masterUrl }) => image?.url === masterUrl,
		)?.position;

		return isUndefined(position) ? element : { ...element, position };
	});

class Enhancer {
	elements: FEElement[];

	constructor(elements: FEElement[]) {
		this.elements = elements;
	}

	/**
	 * Photo essays by convention have all image captions removed and rely completely on
	 * special captions set using the `ul`/`li` trick
	 */
	stripCaptions() {
		this.elements = stripCaptions(this.elements);
		return this;
	}

	/**
	 * Replace pairs of halfWidth images with MultiImageBlockElements
	 */
	addMultiImageElements() {
		this.elements = addMultiImageElements(this.elements);
		return this;
	}

	/**
	 * Photo essay have a convention of adding titles to images if the subsequent block is a h2
	 */
	addTitles() {
		this.elements = addTitles(this.elements);
		return this;
	}

	/**
	 * If any MultiImageBlockElement is followed by a ul/l caption, delete the special caption
	 * element and use the value for the multi image `caption` prop
	 */
	addCaptionsToMultis() {
		this.elements = addCaptionsToMultis(this.elements);
		return this;
	}

	/**
	 * In photo essays, we also use ul captions for normal images as well
	 */
	addCaptionsToImages() {
		this.elements = addCaptionsToImages(this.elements);
		return this;
	}

	/**
	 * By convention, photo essays don't include credit for images in the caption
	 */
	removeCredit() {
		this.elements = removeCredit(this.elements);
		return this;
	}

	/**
	 * This function adds the position property to each image
	 * element.
	 *
	 * This value is used to add an id which means we can add a hash to
	 * the url, such as #img-2, letting us navigate to that image.
	 *
	 * We also use this id to open lightbox when the page is loaded
	 * with an image hash present on the url
	 *
	 */
	addImagePositions(imagesForLightbox: ImageForLightbox[]) {
		this.elements = addImagePositions(this.elements, imagesForLightbox);
		return this;
	}
}

const enhance =
	(
		isPhotoEssay: boolean,
		imagesForLightbox: ImageForLightbox[],
		isPhotoEssayMainMedia = false,
	) =>
	(elements: FEElement[]): FEElement[] => {
		if (isPhotoEssay) {
			if (isPhotoEssayMainMedia) {