alt text on images

This commit is contained in:
rimu 2024-01-26 17:15:43 +13:00
parent d9ebcf97bc
commit 2f947e6d0d
6 changed files with 27 additions and 2 deletions

View file

@ -154,7 +154,9 @@ def post_to_activity(post: Post, community: Community):
if post.type == POST_TYPE_LINK and post.url is not None:
activity_data["object"]["object"]["attachment"] = {"href": post.url, "type": "Link"}
if post.image_id is not None:
activity_data["object"]["object"]["image"] = {"href": post.image.source_url, "type": "Image"}
activity_data["object"]["object"]["image"] = {"href": post.image.view_url(), "type": "Image"}
if post.image.alt_text:
activity_data["object"]["object"]["image"]['altText'] = post.image.alt_text
return activity_data

View file

@ -50,6 +50,7 @@ class CreatePostForm(FlaskForm):
render_kw={'placeholder': 'Text (optional)'})
link_url = StringField(_l('URL'), render_kw={'placeholder': 'https://...'})
image_title = StringField(_l('Title'), validators={Optional(), Length(min=3, max=255)})
image_alt_text = StringField(_l('Alt text'), validators={Optional(), Length(min=3, max=255)})
image_body = TextAreaField(_l('Body'), validators={Optional(), Length(min=3, max=5000)},
render_kw={'placeholder': 'Text (optional)'})
image_file = FileField(_('Image'))

View file

@ -214,6 +214,8 @@ def save_post(form, post: Post):
post.body = form.image_body.data
post.body_html = markdown_to_html(post.body)
post.type = POST_TYPE_IMAGE
alt_text = form.image_alt_text.data if form.image_alt_text.data else form.image_title.data
post.image.alt_text = alt_text
uploaded_file = request.files['image_file']
if uploaded_file and uploaded_file.filename != '':
if post.image_id:
@ -258,7 +260,7 @@ def save_post(form, post: Post):
thumbnail_width = img.width
thumbnail_height = img.height
file = File(file_path=final_place, file_name=new_filename + file_ext, alt_text=form.image_title.data,
file = File(file_path=final_place, file_name=new_filename + file_ext, alt_text=alt_text,
width=img_width, height=img_height, thumbnail_width=thumbnail_width,
thumbnail_height=thumbnail_height, thumbnail_path=final_place_thumbnail,
source_url=final_place.replace('app/static/', f"https://{current_app.config['SERVER_NAME']}/static/"))

View file

@ -655,6 +655,7 @@ def post_edit(post_id: int):
form.post_type.data = 'image'
form.image_title.data = post.title
form.image_body.data = post.body
form.image_alt_text.data = post.image.alt_text
form.notify_author.data = post.notify_author
return render_template('post/post_edit.html', title=_('Edit post'), form=form, post=post,
images_disabled=images_disabled, markdown_editor=True,

View file

@ -57,6 +57,8 @@
<div class="tab-pane fade" id="image-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
{{ render_field(form.image_title) }}
{{ render_field(form.image_file) }}
{{ render_field(form.image_alt_text) }}
<small class="field_hint">{{ _('Describe the image, to help visually impaired people.') }}</small>
{{ render_field(form.image_body) }}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">

View file

@ -56,6 +56,19 @@
<div class="tab-pane fade show active" id="discussion-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
{{ render_field(form.discussion_title) }}
{{ render_field(form.discussion_body) }}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
window.addEventListener("load", function () {
var downarea = new DownArea({
elem: document.querySelector('#discussion_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
value: {{ form.discussion_body.data | tojson | safe }},
});
setupAutoResize('discussion_body');
});
</script>
{% endif %}
</div>
<div class="tab-pane fade" id="link-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
{{ render_field(form.link_title) }}
@ -68,6 +81,7 @@
elem: document.querySelector('#link_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
value: {{ form.link_body.data | tojson | safe }},
});
setupAutoResize('link_body');
});
@ -77,6 +91,8 @@
<div class="tab-pane fade" id="image-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
{{ render_field(form.image_title) }}
{{ render_field(form.image_file) }}
{{ render_field(form.image_alt_text) }}
<small class="field_hint">{{ _('Describe the image, to help visually impaired people.') }}</small>
{{ render_field(form.image_body) }}
{% if markdown_editor %}
<script nonce="{{ session['nonce'] }}">
@ -85,6 +101,7 @@
elem: document.querySelector('#image_body'),
resize: DownArea.RESIZE_VERTICAL,
hide: ['heading', 'bold-italic'],
value: {{ form.image_body.data | tojson | safe }},
});
setupAutoResize('image_body');
});