Responsive images in media gallery (#3963)
* feat(components/media_gallery): Responsive images * fix(components/media_gallery): Link to image URL
This commit is contained in:
parent
e2dd576a1b
commit
be92babd00
@ -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;
|
||||
|
@ -3453,11 +3453,16 @@ button.icon-button.active i.fa-retweet {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
cursor: zoom-in;
|
||||
display: block;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
height: 100%;
|
||||
|
||||
&,
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery__gifv {
|
||||
height: 100%;
|
||||
|
Loading…
Reference in New Issue
Block a user