mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-14 03:24:06 +00:00
Fix fullsize post image (#2797)
* 0.19.6-beta.8 * 0.19.6-beta.9 * 0.19.6-beta.14 * Using full-size image column, not thumbnail. - Fixes #2796
This commit is contained in:
parent
624938fc29
commit
b01a3cfaa3
|
@ -273,18 +273,22 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
}
|
||||
|
||||
get img() {
|
||||
const { post } = this.postView;
|
||||
|
||||
if (this.isoData.showAdultConsentModal) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
if (this.imageSrc) {
|
||||
// Use the full-size image for expands
|
||||
const post = this.postView.post;
|
||||
const url = post.url;
|
||||
const thumbnail = post.thumbnail_url;
|
||||
const imageSrc = url && isImage(url) ? url : thumbnail;
|
||||
|
||||
if (imageSrc) {
|
||||
return (
|
||||
<>
|
||||
<div className="offset-sm-3 my-2 d-none d-sm-block">
|
||||
<a href={this.imageSrc} className="d-inline-block">
|
||||
<PictrsImage src={this.imageSrc} alt={post.alt_text} />
|
||||
<a href={imageSrc} className="d-inline-block">
|
||||
<PictrsImage src={imageSrc} alt={post.alt_text} />
|
||||
</a>
|
||||
</div>
|
||||
<div className="my-2 d-block d-sm-none">
|
||||
|
@ -293,7 +297,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
className="p-0 border-0 bg-transparent d-inline-block"
|
||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
>
|
||||
<PictrsImage src={this.imageSrc} alt={post.alt_text} />
|
||||
<PictrsImage src={imageSrc} alt={post.alt_text} />
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
|
@ -315,26 +319,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
);
|
||||
}
|
||||
|
||||
get imageSrc(): string | undefined {
|
||||
const post = this.postView.post;
|
||||
const url = post.url;
|
||||
const thumbnail = post.thumbnail_url;
|
||||
|
||||
if (thumbnail) {
|
||||
return thumbnail;
|
||||
} else if (url && isImage(url)) {
|
||||
return url;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
thumbnail() {
|
||||
const post = this.postView.post;
|
||||
const url = post.url;
|
||||
const thumbnail = post.thumbnail_url;
|
||||
|
||||
if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
|
||||
if (!this.props.hideImage && url && isImage(url) && thumbnail) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
|
@ -343,20 +333,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
aria-label={I18NextService.i18n.t("expand_here")}
|
||||
>
|
||||
{this.imgThumb(this.imageSrc)}
|
||||
{this.imgThumb(thumbnail)}
|
||||
<Icon
|
||||
icon="image"
|
||||
classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
} else if (
|
||||
!this.props.hideImage &&
|
||||
url &&
|
||||
thumbnail &&
|
||||
this.imageSrc &&
|
||||
!isVideo(url)
|
||||
) {
|
||||
} else if (!this.props.hideImage && url && thumbnail && !isVideo(url)) {
|
||||
return (
|
||||
<a
|
||||
className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0"
|
||||
|
@ -365,7 +349,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
title={url}
|
||||
target={this.linkTarget}
|
||||
>
|
||||
{this.imgThumb(this.imageSrc)}
|
||||
{this.imgThumb(thumbnail)}
|
||||
<Icon
|
||||
icon="external-link"
|
||||
classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
|
||||
|
|
Loading…
Reference in a new issue