Adding alt_text and custom_thumbnail to post form. (#2404)

* Adding alt_text and custom_thumbnail to post form.

* Adding htmlFor, and only show alt_text if its an image post.

* Only show custom thumbnail url field when its not an image post.
This commit is contained in:
Dessalines 2024-04-04 19:59:13 -04:00 committed by GitHub
parent 3769a76618
commit 9aa1e06ae3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 2509 additions and 5671 deletions

View file

@ -9,7 +9,7 @@ steps:
- git submodule init - git submodule init
- git submodule update --recursive --remote - git submodule update --recursive --remote
when: when:
- event: pull_request - event: [pull_request, tag]
install: install:
image: node:20-alpine image: node:20-alpine

@ -1 +1 @@
Subproject commit b3131d6881adb639dc0e298cc7c213c5245091f6 Subproject commit 9a8a86ea2edbd0ebed98f649805e69431b692dab

View file

@ -60,7 +60,7 @@
"inferno-router": "^8.2.3", "inferno-router": "^8.2.3",
"inferno-server": "^8.2.3", "inferno-server": "^8.2.3",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"lemmy-js-client": "0.19.4-alpha.14", "lemmy-js-client": "0.19.4-alpha.16",
"lodash.isequal": "^4.5.0", "lodash.isequal": "^4.5.0",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"markdown-it-bidi": "^0.1.0", "markdown-it-bidi": "^0.1.0",

File diff suppressed because it is too large Load diff

View file

@ -72,6 +72,8 @@ interface PostFormState {
language_id?: number; language_id?: number;
community_id?: number; community_id?: number;
honeypot?: string; honeypot?: string;
custom_thumbnail?: string;
alt_text?: string;
}; };
loading: boolean; loading: boolean;
suggestedPostsRes: RequestState<SearchResponse>; suggestedPostsRes: RequestState<SearchResponse>;
@ -97,12 +99,14 @@ function handlePostSubmit(i: PostForm, event: any) {
if (pv) { if (pv) {
i.props.onEdit?.({ i.props.onEdit?.({
post_id: pv.post.id,
name: pForm.name, name: pForm.name,
url: pForm.url, url: pForm.url,
body: pForm.body, body: pForm.body,
nsfw: pForm.nsfw, nsfw: pForm.nsfw,
post_id: pv.post.id,
language_id: pForm.language_id, language_id: pForm.language_id,
custom_thumbnail: pForm.custom_thumbnail,
alt_text: pForm.alt_text,
}); });
} else if (pForm.name && pForm.community_id) { } else if (pForm.name && pForm.community_id) {
i.props.onCreate?.({ i.props.onCreate?.({
@ -113,6 +117,8 @@ function handlePostSubmit(i: PostForm, event: any) {
nsfw: pForm.nsfw, nsfw: pForm.nsfw,
language_id: pForm.language_id, language_id: pForm.language_id,
honeypot: pForm.honeypot, honeypot: pForm.honeypot,
custom_thumbnail: pForm.custom_thumbnail,
alt_text: pForm.alt_text,
}); });
} }
} }
@ -154,6 +160,14 @@ function handleHoneyPotChange(i: PostForm, event: any) {
i.setState(s => ((s.form.honeypot = event.target.value), s)); i.setState(s => ((s.form.honeypot = event.target.value), s));
} }
function handleAltTextChange(i: PostForm, event: any) {
i.setState(s => ((s.form.alt_text = event.target.value), s));
}
function handleCustomThumbnailChange(i: PostForm, event: any) {
i.setState(s => ((s.form.custom_thumbnail = event.target.value), s));
}
function handleCancel(i: PostForm) { function handleCancel(i: PostForm) {
i.props.onCancel?.(); i.props.onCancel?.();
} }
@ -255,6 +269,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
url: post_view.post.url, url: post_view.post.url,
nsfw: post_view.post.nsfw, nsfw: post_view.post.nsfw,
language_id: post_view.post.language_id, language_id: post_view.post.language_id,
custom_thumbnail: post_view.post.thumbnail_url,
alt_text: post_view.post.alt_text,
}, },
}; };
} else if (selectedCommunityChoice) { } else if (selectedCommunityChoice) {
@ -364,6 +380,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div className="col-sm-10"> <div className="col-sm-10">
<input <input
type="url" type="url"
placeholder={I18NextService.i18n.t("optional")}
id="post-url" id="post-url"
className="form-control mb-3" className="form-control mb-3"
value={url} value={url}
@ -428,6 +445,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</button> </button>
)} )}
</div> </div>
{this.props.crossPosts && this.props.crossPosts.length > 0 && ( {this.props.crossPosts && this.props.crossPosts.length > 0 && (
<> <>
<div className="my-1 text-muted small fw-bold"> <div className="my-1 text-muted small fw-bold">
@ -464,6 +482,27 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
)} )}
</div> </div>
{!isImage(url || "") && (
<div className="mb-3 row">
<label
className="col-sm-2 col-form-label"
htmlFor="post-custom-thumbnail"
>
{I18NextService.i18n.t("custom_thumbnail_url")}
</label>
<div className="col-sm-10">
<input
type="url"
id="post-custom-thumbnail"
placeholder={I18NextService.i18n.t("optional")}
className="form-control mb-3"
value={this.state.form.custom_thumbnail}
onInput={linkEvent(this, handleCustomThumbnailChange)}
/>
</div>
</div>
)}
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-sm-2 col-form-label"> <label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("body")} {I18NextService.i18n.t("body")}
@ -471,6 +510,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div className="col-sm-10"> <div className="col-sm-10">
<MarkdownTextArea <MarkdownTextArea
initialContent={this.state.form.body} initialContent={this.state.form.body}
placeholder={I18NextService.i18n.t("optional")}
onContentChange={this.handlePostBodyChange} onContentChange={this.handlePostBodyChange}
allLanguages={this.props.allLanguages} allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages} siteLanguages={this.props.siteLanguages}
@ -486,6 +526,25 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
multiple={false} multiple={false}
onChange={this.handleLanguageChange} onChange={this.handleLanguageChange}
/> />
{url && isImage(url) && (
<div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="post-alt-text">
{I18NextService.i18n.t("column_alttext")}
</label>
<div className="col-sm-10">
<input
autoComplete="false"
name="alt_text"
placeholder={I18NextService.i18n.t("optional")}
type="text"
className="form-control"
id="post-alt-text"
value={this.state.form.alt_text}
onInput={linkEvent(this, handleAltTextChange)}
/>
</div>
</div>
)}
{!this.props.post_view && ( {!this.props.post_view && (
<div className="mb-3 row"> <div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="post-community"> <label className="col-sm-2 col-form-label" htmlFor="post-community">

View file

@ -189,12 +189,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
get img() { get img() {
const { post } = this.postView;
const { url } = post;
if (this.imageSrc) { if (this.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={this.imageSrc} className="d-inline-block">
<PictrsImage src={this.imageSrc} /> <PictrsImage src={this.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">
@ -203,16 +206,13 @@ 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} /> <PictrsImage src={this.imageSrc} alt={post.alt_text} />
</button> </button>
</div> </div>
</> </>
); );
} }
const { post } = this.postView;
const { url } = post;
// if direct video link // if direct video link
if (url && isVideo(url)) { if (url && isVideo(url)) {
return ( return (
@ -253,7 +253,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<PictrsImage <PictrsImage
src={src} src={src}
thumbnail thumbnail
alt="" alt={pv.post.alt_text}
nsfw={pv.post.nsfw || pv.community.nsfw} nsfw={pv.post.nsfw || pv.community.nsfw}
/> />
); );