diff --git a/src/views/admin/components/edition/item-edition-form.vue b/src/views/admin/components/edition/item-edition-form.vue index 47cd8939f..290e5ef9b 100644 --- a/src/views/admin/components/edition/item-edition-form.vue +++ b/src/views/admin/components/edition/item-edition-form.vue @@ -351,6 +351,20 @@ +
+ + + +
@@ -820,7 +834,9 @@ export default { status: '', document: '', document_type: '', - comment_status: '' + comment_status: '', + thumbnail_id: '', + thumbnail_alt: '' }, thumbnail: {}, formErrorMessage: '', @@ -988,6 +1004,7 @@ export default { 'sendItem', 'updateItem', 'updateItemDocument', + 'updateThumbnailAlt', 'fetchItemMetadata', 'fetchItem', 'cleanItemMetadata', @@ -1054,6 +1071,8 @@ export default { this.form.document = this.item.document; this.form.document_type = this.item.document_type; this.form.comment_status = this.item.comment_status; + this.form.thumbnail_id = this.item.thumbnail_id; + this.form.thumbnail_alt = this.item.thumbnail_alt; this.isLoading = false; @@ -1152,6 +1171,8 @@ export default { this.form.document = this.item.document; this.form.document_type = this.item.document_type; this.form.comment_status = this.item.comment_status; + this.form.thumbnail_id = this.item.thumbnail_id; + this.form.thumbnail_alt = this.item.thumbnail_alt; // If a parameter was passed with a suggestion of item title, also send a patch to item metadata if (this.$route.query.newitemtitle) { @@ -1297,9 +1318,10 @@ export default { }); }, deleteThumbnail() { - this.updateThumbnail({itemId: this.itemId, thumbnailId: 0}) + this.updateThumbnail({ itemId: this.itemId, thumbnailId: 0 }) .then(() => { this.item.thumbnail = false; + this.item.thumbnail_id = null; }) .catch((error) => { this.$console.error(error); @@ -1372,13 +1394,19 @@ export default { button_labels: { frame_title: this.$i18n.get('instruction_select_item_thumbnail'), }, + thumbnail: this.form.thumbnail_id, relatedPostId: this.itemId, onSave: (media) => { - this.updateThumbnail({itemId: this.itemId, thumbnailId: media.id}) - .then((res) => { - this.item.thumbnail = res.thumbnail; - }) - .catch(error => this.$console.error(error)); + 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; + this.form.thumbnail = res.thumbnail; + this.form.thumbnail_id = res.thumbnail_id; + this.form.thumbnail_alt = res.thumbnail_alt; + }) + .catch(error => this.$console.error(error)); } } ); @@ -1402,27 +1430,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.updateThumbnailAlt({ thumbnailId: this.item.thumbnail_id, thumbnailAlt: updatedThumbnailAlt }) + .then((res) => { + this.item.thumbnail_id = res.thumbnail_id; + this.item.thumbnail_alt = res.thumbnail_alt; + this.form.thumbnail_id = res.thumbnail_id; + this.form.thumbnail_alt = res.thumbnail_alt; + }) + .catch(error => this.$console.error(error)); + }, toggleCollapseAll() { this.collapseAll = !this.collapseAll; @@ -1495,6 +1513,8 @@ export default { this.form.document = this.item.document; this.form.document_type = this.item.document_type; this.form.comment_status = this.item.comment_status; + this.form.thumbnail_id = this.item.thumbnail_id; + this.form.thumbnail_alt = this.item.thumbnail_alt; if (this.form.document_type != undefined && this.form.document_type == 'url') this.urlLink = this.form.document; @@ -1758,6 +1778,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 { diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue index 0bce3b9ab..1536f5f80 100644 --- a/src/views/admin/components/lists/items-list.vue +++ b/src/views/admin/components/lists/items-list.vue @@ -178,7 +178,7 @@ class="grid-item-thumbnail" :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }"> @@ -291,7 +291,7 @@ class="tainacan-masonry-item-thumbnail" :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }"> @@ -459,7 +459,7 @@ :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }" class="card-thumbnail"> @@ -650,7 +650,7 @@
@@ -823,7 +823,7 @@ @@ -1028,7 +1028,7 @@ class="tainacan-list-thumbnail" v-if="item.thumbnail != undefined">
diff --git a/src/views/admin/js/store/modules/item/actions.js b/src/views/admin/js/store/modules/item/actions.js index 835b04a88..e78d91469 100644 --- a/src/views/admin/js/store/modules/item/actions.js +++ b/src/views/admin/js/store/modules/item/actions.js @@ -279,7 +279,7 @@ export const fetchAttachments = ({ commit }, { page, attachmentsPerPage, itemId, }); }; -export const updateThumbnail = ({ commit }, { itemId, thumbnailId }) => { +export const updateThumbnail = ({ commit }, { itemId, thumbnailId, thumbnailAlt }) => { return new Promise((resolve, reject) => { axios.tainacan.patch('/items/' + itemId, { _thumbnail_id: thumbnailId @@ -295,6 +295,21 @@ export const updateThumbnail = ({ commit }, { itemId, thumbnailId }) => { }); }; +export const updateThumbnailAlt = ({ commit }, { thumbnailId, thumbnailAlt }) => { + return new Promise((resolve, reject) => { + axios.wp.patch('/media/' + thumbnailId + '?force=true', { + alt_text: thumbnailAlt + }).then( res => { + let thumbnail = res.data; + commit('setLastUpdated'); + resolve( thumbnail ); + }).catch( error => { + reject( error ); + }); + + }); +}; + // Item Submission ====================================================== export const clearItemSubmission = ({ commit }) => { commit('clearItemSubmission'); diff --git a/src/views/admin/js/wp-media-frames.js b/src/views/admin/js/wp-media-frames.js index 0e3fb5158..a8aa7c8a7 100644 --- a/src/views/admin/js/wp-media-frames.js +++ b/src/views/admin/js/wp-media-frames.js @@ -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); } diff --git a/src/views/admin/pages/singles/item-page.vue b/src/views/admin/pages/singles/item-page.vue index b3f0e78d1..f5a969422 100644 --- a/src/views/admin/pages/singles/item-page.vue +++ b/src/views/admin/pages/singles/item-page.vue @@ -92,6 +92,16 @@ :src="thumbPlaceholderPath">
+
+
+ + +

{{ item.thumbnail_alt }}

+
diff --git a/src/views/tainacan-admin-i18n.php b/src/views/tainacan-admin-i18n.php index 7aacf10de..91d29ef26 100644 --- a/src/views/tainacan-admin-i18n.php +++ b/src/views/tainacan-admin-i18n.php @@ -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' ), diff --git a/src/views/theme-search/components/view-mode-cards.vue b/src/views/theme-search/components/view-mode-cards.vue index 03cde1488..64ad52e0e 100644 --- a/src/views/theme-search/components/view-mode-cards.vue +++ b/src/views/theme-search/components/view-mode-cards.vue @@ -75,7 +75,7 @@ :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }" class="card-thumbnail"> diff --git a/src/views/theme-search/components/view-mode-list.vue b/src/views/theme-search/components/view-mode-list.vue index ddb3a1e25..cbf528a48 100644 --- a/src/views/theme-search/components/view-mode-list.vue +++ b/src/views/theme-search/components/view-mode-list.vue @@ -78,7 +78,7 @@ class="tainacan-list-thumbnail" v-if="item.thumbnail != undefined">
diff --git a/src/views/theme-search/components/view-mode-masonry.vue b/src/views/theme-search/components/view-mode-masonry.vue index dab9d1317..0742e3495 100644 --- a/src/views/theme-search/components/view-mode-masonry.vue +++ b/src/views/theme-search/components/view-mode-masonry.vue @@ -70,7 +70,7 @@ class="tainacan-masonry-item-thumbnail" :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }">
diff --git a/src/views/theme-search/components/view-mode-records.vue b/src/views/theme-search/components/view-mode-records.vue index a8b48cb3a..76f9d9e1c 100644 --- a/src/views/theme-search/components/view-mode-records.vue +++ b/src/views/theme-search/components/view-mode-records.vue @@ -85,7 +85,7 @@ class="tainacan-record-thumbnail" v-if="item.thumbnail != undefined">
` + self.$i18n.get('label_thumbnail') + ': ' + slideItem.title + `
`; diff --git a/src/views/theme-search/components/view-mode-table.vue b/src/views/theme-search/components/view-mode-table.vue index 20d408560..c6f6cbd62 100644 --- a/src/views/theme-search/components/view-mode-table.vue +++ b/src/views/theme-search/components/view-mode-table.vue @@ -169,7 +169,7 @@