Differential D625 Diff 2367 components/responsive-image/responsive-image.js

Changeset View

Standalone View

components/responsive-image/responsive-image.js

This file was added.

				const Component = require('../component.class');

				/*
				image_path: string
				resolutions: array of sizes ie. [200, 150 ...]
				quality: number, quality of the resized image
				sizes_attr: string, sizes attribute for responsive img html tag
				alt: string, img's alt attribute
				*/

				class ResponsiveImage extends Component {
				async renderFn(
				s,
				{
				image_path,
				resolutions = [100, 400, 900, 1000, 1300],
				quality = 80,
				arkadiusz-wieczorekUnsubmitted Done Inline Actions Co w przypadku kiedy docelowy obrazek będzie mniejszy niż na przykład `900x900`, czy powinniśmy generować srcset dla 1000 i 1300? Przeglądarka niepotrzebnie będzie ładowała większe rozdzielczości rozpikselizowanego pliku. arkadiusz-wieczorek: Co w przypadku kiedy docelowy obrazek będzie mniejszy niż na przykład `900x900`, czy powinniśmy…
				kuba-orlikAuthorUnsubmitted Done Inline Actions Dodałem domyślną wartość do tego propsa tylko dlatego, że chciałem mieć działający ResponsiveImage w BodyBuilder. Raczej te rozdzielczości powinny być nadpisywane za każdym razem ręcznie lub generowane automatycznie na podstawie rozmiaru oryginalnego pliku - ale na to założę taska w niedalekiej przyszłości kuba-orlik: Dodałem domyślną wartość do tego propsa tylko dlatego, że chciałem mieć działający…
				sizes_attr,
				alt = '',
				}
				) {
				const sharp = s.node_require('sharp');
				const path = s.node_require('path');
				const { promisify } = s.node_require('util');
				const locreq = s.node_require('locreq')(__dirname);
				const fs = s.node_require('fs');
				const hashFile = s.node_require(
				path.resolve(__dirname, '../../lib/hash-file.js')
				);
				if (!image_path) {
				image_path = locreq.resolve('assets/sealpage-logo.png');
				}
				const readFile = promisify(fs.readFile);

				let image_basename = path.basename(image_path); //Extract file's name
				const extension = path.extname(image_basename); //Get the file extension
				image_basename = path.basename(image_path, extension);

				const file_hash = hashFile(locreq.resolve(image_path)).substring(0, 8);

				const output_files = {};

				for (let resolution of resolutions) {
				const path = await s.addOutputFile({
				output_subdir: 'images',
				base_name: `${image_basename}-${resolution}.${extension}`,
				arkadiusz-wieczorekUnsubmitted Done Inline Actions `images` → 'images' arkadiusz-wieczorek: ``` `images` → 'images' ```
				generator: () =>
				sharp(locreq.resolve(image_path))
				.resize(resolution)
				.jpeg({ quality })
				.toBuffer(),
				deps: [file_hash],
				});
				output_files[resolution] = path;
				}

				const median_resolution =
				resolutions[Math.round((resolutions.length - 1) / 2)];

				const srcset = resolutions
				.map(resolution => `${output_files[resolution]} ${resolution}w`)
				.join(',\n');

				return /* HTML */ `
				<img
				src="${output_files[median_resolution]}"
				srcset="${srcset}"
				sizes="${sizes_attr}"
				alt="${alt}"
				/>
				`;
				}
				static propsControls() {
				return { source_image: { control: 'image', label: 'Source image' } };
				}
				}

				module.exports = ResponsiveImage;