How to use photon - 8 common examples

tumblr: 'tumblr-alt',
			'jetpack-whatsapp': 'whatsapp',
			'press-this': 'wordpress',
			twitter: 'twitter-alt',
			more: 'share',
		};
		if ( ! this.props.button.custom ) {
			const icon = shortnameToSocialLogo[ this.props.button.ID ] || this.props.button.shortname;

			return ;
		} else if ( 'string' === typeof this.props.button.icon ) {
			return (
				<span style="{">
			);
		}
	}
	/* eslint-enable wpcalypso/jsx-classname-namespace */</span>

renderScreenshot() {
		const { isWpcomTheme, name: themeName } = this.props;
		const screenshotFull = isWpcomTheme ? this.getFullLengthScreenshot() : this.props.screenshot;
		const width = 735;
		// Photon may return null, allow fallbacks
		const photonSrc = screenshotFull && photon( screenshotFull, { width } );
		const img = screenshotFull && (
			<img srcset="{" src="{" alt="{">
		);

		if ( this.isThemeAvailable() ) {
			return (

<button href="{">
							{ translate( 'Upgrade Now' ) }
						</button>
					
				
			
		);

		const fit = '479,360';
		const themeImgSrc = photon( screenshot, { fit } );
		const themeImgSrcDoubleDpi = photon( screenshot, { fit, zoom: 2 } );
		const e2eThemeName = name.toLowerCase().replace( /\s+/g, '-' );

		return (
			
				{ this.isBeginnerTheme() &amp;&amp; (
					
						{ translate( 'Beginner' ) }
					
				) }
				<div>
					</div>

const onLoad = ( event: React.SyntheticEvent< HTMLImageElement > ) => {
		setWrapperHeight( event.currentTarget.height );
		setIsLoading( false );
	};

	return (
		<div>
			{ isLoading &amp;&amp; (
				
			) }
			{ /* The onClick is being used for analytics purposes, there's no user interaction implemented with this click handler */ }
			{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */ }
			<img srcset="{" width="" src="{" style="{"> onPreviewClick( defaultViewportDevice ) }
				onLoad={ onLoad }
				alt={
					isPhone
						? translate( 'Preview of site with phone layout', {
								comment: 'alt text of site preview',
						  } )
						: translate( 'Preview of site with desktop layout', {
								comment: 'alt text of site preview',
						  } )
				}
			/&gt;
		</div>
	);
}

renderScreenshot() {
		const { isWpcomTheme, name: themeName } = this.props;
		const screenshotFull = isWpcomTheme ? this.getFullLengthScreenshot() : this.props.screenshot;
		const width = 735;
		// Photon may return null, allow fallbacks
		const photonSrc = screenshotFull && photon( screenshotFull, { width } );
		const img = screenshotFull && (
			<img srcset="{" src="{" alt="{">
		);

		if ( this.isThemeAvailable() ) {
			return (
				<a rel="noopener noreferrer" href="{">
					{ this.shouldRenderPreviewButton() &amp;&amp; this.renderPreviewButton() }
					{ img }
				</a>
			);
		}

render() {
		const thumbnail = this.getHighestQualityThumbnail();

		if ( thumbnail ) {
			// Non MEDIA_IMAGE_THUMBNAIL video media is accessible via Photon
			const url =
				this.props.thumbnailType === MEDIA_IMAGE_THUMBNAIL
					? thumbnail
					: photon( thumbnail, { width: this.props.maxImageWidth } );

			return (
				<div style="{">
					<span>
						
					</span>
				</div>
			);
		}
		return ;
	}
}

const onLoad = ( event: React.SyntheticEvent< HTMLImageElement > ) => {
		setWrapperHeight( event.currentTarget.height );
		setIsLoading( false );
	};

	return (
		<div>
			{ isLoading &amp;&amp; (
				
			) }
			{ /* The onClick is being used for analytics purposes, there's no user interaction implemented with this click handler */ }
			{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */ }
			<img srcset="{" width="" src="{" style="{"> onPreviewClick( defaultViewportDevice ) }
				onLoad={ onLoad }
				alt={
					isPhone
						? translate( 'Preview of site with phone layout', {
								comment: 'alt text of site preview',
						  } )
						: translate( 'Preview of site with desktop layout', {
								comment: 'alt text of site preview',
						  } )
				}
			/&gt;
		</div>
	);
}

export default async function (req, res) {
  const img = gravatar('nathan@tootallnate.net');
  const url = photon(img, { filter: 'grayscale' });

  debug('redirecting %o -> %o', req.url, url);
  res.statusCode = 302;
  res.setHeader('Location', url);
  res.end();
}