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 update --recursive --remote
when:
- event: pull_request
- event: [pull_request, tag]
install:
image: node:20-alpine

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

View file

@ -60,7 +60,7 @@
"inferno-router": "^8.2.3",
"inferno-server": "^8.2.3",
"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",
"markdown-it": "^14.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;
community_id?: number;
honeypot?: string;
custom_thumbnail?: string;
alt_text?: string;
};
loading: boolean;
suggestedPostsRes: RequestState<SearchResponse>;
@ -97,12 +99,14 @@ function handlePostSubmit(i: PostForm, event: any) {
if (pv) {
i.props.onEdit?.({
post_id: pv.post.id,
name: pForm.name,
url: pForm.url,
body: pForm.body,
nsfw: pForm.nsfw,
post_id: pv.post.id,
language_id: pForm.language_id,
custom_thumbnail: pForm.custom_thumbnail,
alt_text: pForm.alt_text,
});
} else if (pForm.name && pForm.community_id) {
i.props.onCreate?.({
@ -113,6 +117,8 @@ function handlePostSubmit(i: PostForm, event: any) {
nsfw: pForm.nsfw,
language_id: pForm.language_id,
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));
}
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) {
i.props.onCancel?.();
}
@ -255,6 +269,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
url: post_view.post.url,
nsfw: post_view.post.nsfw,
language_id: post_view.post.language_id,
custom_thumbnail: post_view.post.thumbnail_url,
alt_text: post_view.post.alt_text,
},
};
} else if (selectedCommunityChoice) {
@ -364,6 +380,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div className="col-sm-10">
<input
type="url"
placeholder={I18NextService.i18n.t("optional")}
id="post-url"
className="form-control mb-3"
value={url}
@ -428,6 +445,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</button>
)}
</div>
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small fw-bold">
@ -464,6 +482,27 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
)}
</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">
<label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("body")}
@ -471,6 +510,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div className="col-sm-10">
<MarkdownTextArea
initialContent={this.state.form.body}
placeholder={I18NextService.i18n.t("optional")}
onContentChange={this.handlePostBodyChange}
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
@ -486,6 +526,25 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
multiple={false}
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 && (
<div className="mb-3 row">
<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() {
const { post } = this.postView;
const { url } = post;
if (this.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} />
<PictrsImage src={this.imageSrc} alt={post.alt_text} />
</a>
</div>
<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"
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<PictrsImage src={this.imageSrc} />
<PictrsImage src={this.imageSrc} alt={post.alt_text} />
</button>
</div>
</>
);
}
const { post } = this.postView;
const { url } = post;
// if direct video link
if (url && isVideo(url)) {
return (
@ -253,7 +253,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<PictrsImage
src={src}
thumbnail
alt=""
alt={pv.post.alt_text}
nsfw={pv.post.nsfw || pv.community.nsfw}
/>
);