tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds external input for item thumbnail alt text. #177

This commit is contained in:
mateuswetah 2020-10-13 11:24:32 -03:00
parent 35f0c1e655
commit e8fec8f1ff
3 changed files with 45 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/admin/components/edition/item-edition-form.vue
View File

@ -351,6 +351,20 @@
</a>
</div>
</div>
<div
v-if="item.thumbnail_id"
class="thumbnail-alt-input">
<label class="label">{{ $i18n.get('label_thumbnail_alt') }}</label>
<help-button
:title="$i18n.get('label_thumbnail_alt')"
:message="$i18n.get('info_thumbnail_alt')"/>
<b-input
type="textarea"
lazy
:placeholder="$i18n.get('instruction_thumbnail_alt')"
:value="item.thumbnail_alt ? item.thumbnail_alt : ''"
@input="onUpdateThumbnailAlt" />
</div>
</div>
<!-- Hook for extra Form options -->
@ -823,6 +837,7 @@ export default {
comment_status: ''
},
thumbnail: {},
thumbnailAlt: '',
formErrorMessage: '',
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
thumbnailMediaFrame: undefined,
@ -1377,6 +1392,8 @@ export default {
this.updateThumbnail({itemId: this.itemId, thumbnailId: media.id})
.then((res) => {
this.item.thumbnail = res.thumbnail;
this.item.thumbnail_id = res.thumbnail_id;
this.item.thumbnail_alt = res.thumbnail_alt;
})
.catch(error => this.$console.error(error));
}
@ -1402,27 +1419,17 @@ export default {
);
},
// openNewAttachmentsMediaFrame() {
// const newAttachmentMediaFrame = new wpMediaFrames.customAttachmentsControl({
// existingAttachments: this.getAttachments().map((attachment) => attachment.id),
// button_labels: {
// frame_title: this.$i18n.get('instruction_select_files_to_attach_to_item'),
// frame_button_new: this.$i18n.get('label_attach_to_item'),
// frame_button_update: this.$i18n.get('finish')
// },
// relatedPostId: this.itemId,
// onSelect: (selected) => {
// console.log(selected);
// // Fetch current existing attachments
// this.isLoadingAttachments = true;
// this.fetchAttachments({ page: 1, attachmentsPerPage: 24, itemId: this.itemId, documentId: this.item.document })
// .then(() => this.isLoadingAttachments = false)
// .catch(() => this.isLoadingAttachments = false);
// }
// });
// setTimeout(() => newAttachmentMediaFrame.openModal(), 1000);
// },
onUpdateThumbnailAlt(updatedThumbnailAlt) {
this.thumbnailAlt = updatedThumbnailAlt;
this.updateThumbnail({ itemId: this.itemId, thumbnailId: this.item.thumbnail_id, thumbnailAlt: this.thumbnailAlt })
.then((res) => {
this.item.thumbnail = res.thumbnail;
this.item.thumbnail_id = res.thumbnail_id;
this.item.thumbnail_alt = res.thumbnail_alt;
})
.catch(error => this.$console.error(error));
},
toggleCollapseAll() {
this.collapseAll = !this.collapseAll;
@ -1758,6 +1765,16 @@ export default {
left: 90px;
bottom: 1.0em;
}
.thumbnail-alt-input {
.label {
font-size: 0.875em;
font-weight: 500;
margin-left: 15px;
margin-bottom: 0;
margin-top: 0.15em;
}
}
}
.footer {

6
src/views/admin/js/wp-media-frames.js
View File

@ -346,9 +346,9 @@ export default {
title: this.params.button_labels.frame_title,
library: wp.media.query({
type: 'image',
uploadedTo: null
}),
multiple: false,
autoSelect: true,
date: false,
priority: 20,
suggestedWidth: this.params.width,
@ -368,10 +368,10 @@ export default {
},
// Called on both skippedcrop and cropped states
setImageFromAttachment: function( attachment ) {
wp.media.view.settings.post = {
wp.media.view.settings.post.id = {
id: this.params.relatedPostId
}
this.params.attachment = attachment;
this.params.attachments = attachment;
this.params.onSave(attachment);
}

5
src/views/tainacan-admin-i18n.php
View File

@ -169,6 +169,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_slug' => __( 'Slug', 'tainacan' ),
'label_image' => __( 'Image', 'tainacan' ),
'label_thumbnail' => __( 'Thumbnail', 'tainacan' ),
'label_thumbnail_alt' => __( 'Thumbnail alternative text', 'tainacan' ),
'label_empty_thumbnail' => __( 'Empty Thumbnail', 'tainacan' ),
'label_empty_term_image' => __( 'Empty Term Image', 'tainacan' ),
'label_parent_collection' => __( 'Parent collection', 'tainacan' ),
@ -541,6 +542,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'instruction_click_error_to_go_to_metadata' => __( 'Click on the error to go to the metadata:', 'tainacan'),
'instruction_click_to_see_or_search' => __( 'Click to see options or type to search...', 'tainacan'),
'instruction_select_one_or_more_collections' => __( 'Select one or more collections', 'tainacan'),
'instruction_thumbnail_alt' => __( 'Type here a descriptive text for the image thumbnail...', 'tainacan'),
// Info. Other feedback to user.
'info_items_tab_all' => __( 'Every published item, including those visible only to editors.', 'tainacan' ),
@ -749,7 +751,8 @@ return apply_filters( 'tainacan-admin-i18n', [
'info_thumbnail_custom' => __( 'Upload the desired image for the thumbnail', 'tainacan'),
'info_thumbnail_default_from_document' => __( 'A thumbnail will be automatically generated from the submitted document file', 'tainacan'),
'info_submission_processing' => __( 'Please, wait while the submission is being processed', 'tainacan'),
'info_submission_uploading' => __( 'Please, wait while files are uploaded', 'tainacan'),
'info_submission_uploading' => __( 'Please, wait while files are uploaded', 'tainacan'),
'info_thumbnail_alt' => __( 'The alternative text of the thumbnail is visible only by screen readers and should be usefull for users with visual impariments.', 'tainacan'),
// Datepicker months
'datepicker_month_january' => __( 'January', 'tainacan' ),