1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
/**
* External dependencies
*/
import photon from 'photon';
import { __, sprintf } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { format as formatUrl, parse as parseUrl } from 'url';
import { isBlobURL } from '@wordpress/blob';
/**
* Internal dependencies
*/
import Image from '../image';
import Mosaic from './mosaic';
import Square from './square';
import { PHOTON_MAX_RESIZE } from '../constants';
export default class Layout extends Component {
photonize( { height, width, url } ) {
if ( ! url ) {
return;
}
// Do not Photonize images that are still uploading or from localhost
if ( isBlobURL( url ) || /^https?:\/\/localhost/.test( url ) ) {
return url;
}
// Drop query args, photon URLs can't handle them
// This should be the "raw" url, we'll add dimensions later
const cleanUrl = url.split( '?', 1 )[ 0 ];
const photonImplementation = isWpcomFilesUrl( url ) ? photonWpcomImage : photon;
const { layoutStyle } = this.props;
if ( isSquareishLayout( layoutStyle ) && width && height ) {
const size = Math.min( PHOTON_MAX_RESIZE, width, height );
return photonImplementation( cleanUrl, { resize: `${ size },${ size }` } );
}
return photonImplementation( cleanUrl );
}
// This is tricky:
// - We need to "photonize" to resize the images at appropriate dimensions
// - The resize will depend on the image size and the layout in some cases
// - Handlers need to be created by index so that the image changes can be applied correctly.
// This is because the images are stored in an array in the block attributes.
renderImage( img, i ) {
const { images, linkTo, selectedImage } = this.props;
/* translators: %1$d is the order number of the image, %2$d is the total number of images. */
const ariaLabel = sprintf(
__( 'image %1$d of %2$d in gallery', 'jetpack' ),
i + 1,
images.length
);
return (
<Image
alt={ img.alt }
aria-label={ ariaLabel }
height={ img.height }
id={ img.id }
origUrl={ img.url }
isSelected={ selectedImage === i }
key={ i }
link={ img.link }
linkTo={ linkTo }
url={ this.photonize( img ) }
width={ img.width }
/>
);
}
render() {
const { align, children, className, columns, images, layoutStyle } = this.props;
const LayoutRenderer = isSquareishLayout( layoutStyle ) ? Square : Mosaic;
const renderedImages = this.props.images.map( this.renderImage, this );
return (
<div className={ className }>
<LayoutRenderer
align={ align }
columns={ columns }
images={ images }
layoutStyle={ layoutStyle }
renderedImages={ renderedImages }
/>
{ children }
</div>
);
}
}
function isSquareishLayout( layout ) {
return [ 'circle', 'square' ].includes( layout );
}
function isWpcomFilesUrl( url ) {
const { host } = parseUrl( url );
return /\.files\.wordpress\.com$/.test( host );
}
/**
* Apply photon arguments to *.files.wordpress.com images
*
* This function largely duplicates the functionlity of the photon.js lib.
* This is necessary because we want to serve images from *.files.wordpress.com so that private
* WordPress.com sites can use this block which depends on a Photon-like image service.
*
* If we pass all images through Photon servers, some images are unreachable. *.files.wordpress.com
* is already photon-like so we can pass it the same parameters for image resizing.
*
* @param {string} url Image url
* @param {Object} opts Options to pass to photon
*
* @return {string} Url string with options applied
*/
function photonWpcomImage( url, opts = {} ) {
// Adhere to the same options API as the photon.js lib
const photonLibMappings = {
width: 'w',
height: 'h',
letterboxing: 'lb',
removeLetterboxing: 'ulb',
};
// Discard some param parts
const { auth, hash, port, query, search, ...urlParts } = parseUrl( url );
// Build query
// This reduction intentionally mutates the query as it is built internally.
urlParts.query = Object.keys( opts ).reduce(
( q, key ) =>
Object.assign( q, {
[ photonLibMappings.hasOwnProperty( key ) ? photonLibMappings[ key ] : key ]: opts[ key ],
} ),
{}
);
return formatUrl( urlParts );
}
|
GitWeb