diff options
author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2017-06-27 13:46:37 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-06-27 13:46:37 +0200 |
commit | be92babd008a7356738dec1aa7f36500638d00e5 (patch) | |
tree | ecab90f8c20da07534300c96407d418967deb3b1 /app/javascript/mastodon/components/media_gallery.js | |
parent | e2dd576a1b20c324c88afadaaa4f23e554b73ec7 (diff) |
Responsive images in media gallery (#3963)
* feat(components/media_gallery): Responsive images * fix(components/media_gallery): Link to image URL
Diffstat (limited to 'app/javascript/mastodon/components/media_gallery.js')
-rw-r--r-- | app/javascript/mastodon/components/media_gallery.js | 18 |
1 files changed, 14 insertions, 4 deletions
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 78ff35130..2cb1ce51c 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -85,14 +85,24 @@ class Item extends React.PureComponent { let thumbnail = ''; if (attachment.get('type') === 'image') { + const previewUrl = attachment.get('preview_url'); + const previewWidth = attachment.getIn(['meta', 'small', 'width']); + + const originalUrl = attachment.get('url'); + const originalWidth = attachment.getIn(['meta', 'original', 'width']); + + const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`; + const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`; + thumbnail = ( - <a // eslint-disable-line jsx-a11y/anchor-has-content + <a className='media-gallery__item-thumbnail' - href={attachment.get('remote_url') || attachment.get('url')} + href={attachment.get('remote_url') || originalUrl} onClick={this.handleClick} target='_blank' - style={{ backgroundImage: `url(${attachment.get('preview_url')})` }} - /> + > + <img src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' /> + </a> ); } else if (attachment.get('type') === 'gifv') { const autoPlay = !isIOS() && this.props.autoPlayGif; |