paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 23:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

thumbnails: Add height and width attributes to images.

Browse Source
This commit is contained in:
Karl Stolley
2025-03-28 10:37:50 -04:00
committed by Tim Abbott
parent 4e19e82f64
commit d22c6318db
2 changed files with 54 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/postprocess_content.ts
View File

@@ -92,6 +92,39 @@ export function postprocess_content(html: string): string {
elt.setAttribute("aria-label", title);
elt.removeAttribute("title");
}
// To prevent layout shifts and flexibly size image previews,
// we read the image's original dimensions, when present, and
// set those values as `height` and `width` attributes on the
// image source.
const inline_image = elt.querySelector("img");
if (inline_image?.hasAttribute("data-original-dimensions")) {
// TODO: Modify eslint config, if we wish to avoid dataset
//
/* eslint unicorn/prefer-dom-node-dataset: "off" */
const original_dimensions_attribute = inline_image.getAttribute(
"data-original-dimensions",
);
assert(original_dimensions_attribute);
const original_dimensions: string[] = original_dimensions_attribute.split("x");
assert(
original_dimensions.length === 2 &&
typeof original_dimensions[0] === "string" &&
typeof original_dimensions[1] === "string",
);
const original_width = Number(original_dimensions[0]);
const original_height = Number(original_dimensions[1]);
const is_portrait_image = original_width <= original_height;
inline_image.setAttribute("width", `${original_width}`);
inline_image.setAttribute("height", `${original_height}`);
if (is_portrait_image) {
inline_image.classList.add("portrait-thumbnail");
} else {
inline_image.classList.add("landscape-thumbnail");
}
}
} else {
// For non-image user uploads, the following block ensures that the title
// attribute always displays the filename as a security measure.