diff --git a/client/blocks/reader-post-card/featured-image.jsx b/client/blocks/reader-post-card/featured-image.jsx index 0193e6b692d55..5d197c8375105 100644 --- a/client/blocks/reader-post-card/featured-image.jsx +++ b/client/blocks/reader-post-card/featured-image.jsx @@ -8,6 +8,9 @@ import { noop } from 'lodash'; * Internal Dependencies */ import cssSafeUrl from 'lib/css-safe-url'; +import resizeImageUrl from 'lib/resize-image-url'; + +const FEATURED_IMAGE_WIDTH = 250; // typical width of a featured image in the refresh const FeaturedImage = ( { imageUri, href, children, onClick } ) => { if ( imageUri === undefined ) { @@ -15,7 +18,7 @@ const FeaturedImage = ( { imageUri, href, children, onClick } ) => { } const featuredImageStyle = { - backgroundImage: 'url(' + cssSafeUrl( imageUri ) + ')', + backgroundImage: 'url(' + cssSafeUrl( resizeImageUrl( imageUri, { w: FEATURED_IMAGE_WIDTH } ) ) + ')', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center' diff --git a/client/blocks/reader-post-card/gallery.jsx b/client/blocks/reader-post-card/gallery.jsx index 0a82fd02ddec9..796e4d15c6ae0 100644 --- a/client/blocks/reader-post-card/gallery.jsx +++ b/client/blocks/reader-post-card/gallery.jsx @@ -13,8 +13,7 @@ import resizeImageUrl from 'lib/resize-image-url'; import cssSafeUrl from 'lib/css-safe-url'; import { isFeaturedImageInContent } from 'lib/post-normalizer/utils'; import ReaderPostCardExcerpt from './excerpt'; - -const GALLERY_ITEM_THUMBNAIL_WIDTH = 420; +import { READER_CONTENT_WIDTH } from 'state/reader/posts/normalization-rules'; function getGalleryWorthyImages( post ) { const numberOfImagesToDisplay = 4; @@ -31,7 +30,7 @@ function getGalleryWorthyImages( post ) { const PostGallery = ( { post, children, isDiscover } ) => { const imagesToDisplay = getGalleryWorthyImages( post ); const listItems = map( imagesToDisplay, ( image, index ) => { - const imageUrl = resizeImageUrl( image.src, { w: GALLERY_ITEM_THUMBNAIL_WIDTH } ); + const imageUrl = resizeImageUrl( image.src, { w: READER_CONTENT_WIDTH / imagesToDisplay.length } ); const safeCssUrl = cssSafeUrl( imageUrl ); const imageStyle = { backgroundImage: 'url(' + safeCssUrl + ')', diff --git a/client/blocks/reader-related-card-v2/index.jsx b/client/blocks/reader-related-card-v2/index.jsx index 754e8777215f6..12b6fa92eda8c 100644 --- a/client/blocks/reader-related-card-v2/index.jsx +++ b/client/blocks/reader-related-card-v2/index.jsx @@ -18,11 +18,16 @@ import Gravatar from 'components/gravatar'; import FollowButton from 'reader/follow-button'; import { getPostUrl, getStreamUrl } from 'reader/route'; import { areEqualIgnoringWhitespaceAndCase } from 'lib/string'; +import safeImageUrl from 'lib/safe-image-url'; +import resizeImageUrl from 'lib/resize-image-url'; + +const RELATED_IMAGE_WIDTH = 385; // usual width of featured images in related post card function FeaturedImage( { image, href } ) { + const uri = resizeImageUrl( safeImageUrl( image.uri ), { w: RELATED_IMAGE_WIDTH } ) return (
{ if ( isCandidateForContentImage( image ) ) { - const { width, height } = deduceImageWidthAndHeight( image ); + const { width, height } = deduceImageWidthAndHeight( image ) || { width: 0, height: 0 }; return { src: maxWidthPhotonishURL( image.getAttribute( 'src' ), READER_CONTENT_WIDTH ), width: width, diff --git a/client/lib/post-normalizer/rule-wait-for-images-to-load.js b/client/lib/post-normalizer/rule-wait-for-images-to-load.js index 1d51f9b0cea9c..9c7fbe1c3a49f 100644 --- a/client/lib/post-normalizer/rule-wait-for-images-to-load.js +++ b/client/lib/post-normalizer/rule-wait-for-images-to-load.js @@ -8,12 +8,13 @@ import { forEach, map, pull, + take, } from 'lodash'; /** * Internal Dependencies */ -import { thumbIsLikelyImage } from './utils'; +import { deduceImageWidthAndHeight, thumbIsLikelyImage } from './utils'; import debugFactory from 'debug'; const debug = debugFactory( 'calypso:post-normalizer:wait-for-images-to-load' ); @@ -81,7 +82,17 @@ export default function waitForImagesToLoad( post ) { imagesToCheck.push( post.featured_image ); } + const knownImages = {}; + forEach( post.content_images, function( image ) { + const knownDimensions = deduceImageWidthAndHeight( image ); + if ( knownDimensions ) { + knownImages[ image.src ] = { + src: image.src, + naturalWidth: knownDimensions.width, + naturalHeight: knownDimensions.height + }; + } imagesToCheck.push( image.src ); } ); @@ -90,11 +101,17 @@ export default function waitForImagesToLoad( post ) { return; } - // convert to image objects to start the load process - let promises = map( imagesToCheck, promiseForURL ); - const imagesLoaded = {}; + // convert to image objects to start the load process + // only check the first 5 images + let promises = map( take( imagesToCheck, 5 ), ( imageUrl ) => { + if ( imageUrl in knownImages ) { + return Promise.resolve( knownImages[ imageUrl ] ); + } + return promiseForURL( imageUrl ); + } ); + forEach( promises, promise => { promise.then( image => { // keep track of what loaded successfully. Note these will be out of order. diff --git a/client/lib/post-normalizer/utils.js b/client/lib/post-normalizer/utils.js index ab68be97ff11e..0baef9d2e4406 100644 --- a/client/lib/post-normalizer/utils.js +++ b/client/lib/post-normalizer/utils.js @@ -181,3 +181,26 @@ export function isFeaturedImageInContent( post ) { return false; } + +export function deduceImageWidthAndHeight( image ) { + if ( image.height && image.width ) { + return { + height: image.height, + width: image.width + }; + } + if ( image.naturalHeight && image.natualWidth ) { + return { + height: image.naturalHeight, + width: image.naturalWidth + }; + } + if ( image.dataset && image.dataset.origSize ) { + const [ width, height ] = image.dataset.origSize.split( ',' ).map( Number ); + return { + width, + height + }; + } + return null; +} diff --git a/client/state/reader/posts/normalization-rules.js b/client/state/reader/posts/normalization-rules.js index d24065b6fb313..a99e43d65d900 100644 --- a/client/state/reader/posts/normalization-rules.js +++ b/client/state/reader/posts/normalization-rules.js @@ -36,7 +36,7 @@ import addDiscoverProperties from 'lib/post-normalizer/rule-add-discover-propert * Module vars */ export const - READER_CONTENT_WIDTH = 720, + READER_CONTENT_WIDTH = 800, PHOTO_ONLY_MIN_WIDTH = 440, GALLERY_MIN_IMAGES = 4, GALLERY_MIN_IMAGE_WIDTH = 350;