LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-28 07:11:14 +00:00
Code Issues Projects Releases Wiki Activity

Fix fullsize post image (#2797)

Browse source 
* 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:
Dessalines 2024-11-07 12:03:07 -05:00 committed by Dessalines
parent 624938fc29
commit b01a3cfaa3
1 changed files with 14 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/shared/components/post/post-listing.tsx
View file

@ -273,18 +273,22 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
get img() { get img() {
const { post } = this.postView;
if (this.isoData.showAdultConsentModal) { if (this.isoData.showAdultConsentModal) {
return <></>; 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 ( return (
<> <>
<div className="offset-sm-3 my-2 d-none d-sm-block"> <div className="offset-sm-3 my-2 d-none d-sm-block">
<a href={this.imageSrc} className="d-inline-block"> <a href={imageSrc} className="d-inline-block">
<PictrsImage src={this.imageSrc} alt={post.alt_text} /> <PictrsImage src={imageSrc} alt={post.alt_text} />
</a> </a>
</div> </div>
<div className="my-2 d-block d-sm-none"> <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" className="p-0 border-0 bg-transparent d-inline-block"
onClick={linkEvent(this, this.handleImageExpandClick)} onClick={linkEvent(this, this.handleImageExpandClick)}
> >
<PictrsImage src={this.imageSrc} alt={post.alt_text} /> <PictrsImage src={imageSrc} alt={post.alt_text} />
</button> </button>
</div> </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() { thumbnail() {
const post = this.postView.post; const post = this.postView.post;
const url = post.url; const url = post.url;
const thumbnail = post.thumbnail_url; const thumbnail = post.thumbnail_url;
if (!this.props.hideImage && url && isImage(url) && this.imageSrc) { if (!this.props.hideImage && url && isImage(url) && thumbnail) {
return ( return (
<button <button
type="button" type="button"
@ -343,20 +333,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
onClick={linkEvent(this, this.handleImageExpandClick)} onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")} aria-label={I18NextService.i18n.t("expand_here")}
> >
{this.imgThumb(this.imageSrc)} {this.imgThumb(thumbnail)}
<Icon <Icon
icon="image" icon="image"
classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover" classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
/> />
</button> </button>
); );
} else if ( } else if (!this.props.hideImage && url && thumbnail && !isVideo(url)) {
!this.props.hideImage &&
url &&
thumbnail &&
this.imageSrc &&
!isVideo(url)
) {
return ( return (
<a <a
className="thumbnail rounded overflow-hidden d-inline-block position-relative p-0 border-0" 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} title={url}
target={this.linkTarget} target={this.linkTarget}
> >
{this.imgThumb(this.imageSrc)} {this.imgThumb(thumbnail)}
<Icon <Icon
icon="external-link" icon="external-link"
classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover" classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"