From f1257907999111409fdfcc6fb42357ed909c4bda Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 10 Jul 2023 10:34:38 -0300
Subject: [PATCH] Removes instances of v-for and v-if in the same tag. First
 step towards #794.

---
 .eslintrc.js                                  |   2 -
 .../modals/available-exporters-modal.vue      |  21 +-
 .../modals/available-importers-modal.vue      |  25 +-
 .../components/modals/bulk-edition-modal.vue  |  30 +-
 .../modals/capability-edition-modal.vue       |  40 +-
 .../modals/collection-creation-modal.vue      |  21 +-
 .../components/modals/collections-modal.vue   |  19 +-
 .../components/other/items-status-tabs.vue    |  61 +--
 .../components/search/filters-items-list.vue  | 380 +++++++++---------
 .../admin/components/search/pagination.vue    |  15 +-
 .../admin/pages/lists/collections-page.vue    |  14 +-
 src/views/admin/pages/lists/items-page.vue    |  30 +-
 .../admin/pages/lists/taxonomies-page.vue     |  13 +-
 .../components/view-mode-list.vue             |  45 ++-
 .../theme-search/components/view-mode-map.vue |  73 ++--
 .../components/view-mode-records.vue          |  43 +-
 .../components/view-mode-slideshow.vue        |  80 ++--
 .../components/view-mode-table.vue            | 260 ++++++------
 .../theme-search/js/view-modes-mixin.js       |  18 +-
 .../theme-search/theme-items-page.vue         | 109 ++---
 src/views/reports/components/number-block.vue |  47 +--
 src/views/roles/pages/roles-list.vue          |  17 +-
 22 files changed, 721 insertions(+), 642 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 436951c26..a069f1636 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,8 +22,6 @@ module.exports = {
         'vue/singleline-html-element-content-newline': 'off',
         'vue/multiline-html-element-content-newline': 'off',
         'vue/prop-name-casing': 'off',
-        'vue/no-confusing-v-for-v-if': 'off',
-        'vue/no-use-v-if-with-v-for': 'warn',
         'vue/multi-word-component-names': 'off',
         'vue/require-default-prop': 'off',
         'vue/no-v-text-v-html-on-component': 'off'
diff --git a/src/views/admin/components/modals/available-exporters-modal.vue b/src/views/admin/components/modals/available-exporters-modal.vue
index 6c889d350..387224389 100644
--- a/src/views/admin/components/modals/available-exporters-modal.vue
+++ b/src/views/admin/components/modals/available-exporters-modal.vue
@@ -18,16 +18,17 @@
                 <div 
                         role="list"
                         class="exporter-types-container">
-                    <div
-                            role="listitem"
-                            class="exporter-type"
-                            v-for="exporterType in availableExporters"
-                            :key="exporterType.slug"
-                            v-if="!(hideWhenManualCollection && !exporterType.manual_collection)"
-                            @click="onSelectExporter(exporterType)">
-                        <h4>{{ exporterType.name }}</h4>
-                        <p>{{ exporterType.description }}</p>
-                    </div>
+                    <template v-for="exporterType in availableExporters">
+                        <div
+                                role="listitem"
+                                class="exporter-type"
+                                :key="exporterType.slug"
+                                v-if="!(hideWhenManualCollection && !exporterType.manual_collection)"
+                                @click="onSelectExporter(exporterType)">
+                            <h4>{{ exporterType.name }}</h4>
+                            <p>{{ exporterType.description }}</p>
+                        </div>
+                    </template>
                 </div>
                 <footer class="field is-grouped form-submit">
                     <div class="control">
diff --git a/src/views/admin/components/modals/available-importers-modal.vue b/src/views/admin/components/modals/available-importers-modal.vue
index cb2925afb..d55f19ad5 100644
--- a/src/views/admin/components/modals/available-importers-modal.vue
+++ b/src/views/admin/components/modals/available-importers-modal.vue
@@ -7,9 +7,7 @@
             tabindex="-1"
             aria-modal
             ref="availableImportersModal">
-        <div 
-                class="tainacan-modal-content" 
-                style="width: auto">
+        <div style="width: auto">
             <header class="tainacan-modal-title">
                 <h2>{{ $i18n.get('importers') }}</h2>
                 <hr>
@@ -19,16 +17,17 @@
                 <div 
                         role="list"
                         class="importer-types-container">
-                    <div
-                            role="listitem"
-                            class="importer-type"
-                            v-for="importerType in availableImporters"
-                            :key="importerType.slug"
-                            v-if="!(hideWhenManualCollection && !importerType.manual_collection)"
-                            @click="onSelectImporter(importerType)">
-                        <h4>{{ importerType.name }}</h4>
-                        <p>{{ importerType.description }}</p>            
-                    </div>
+                    <template v-for="importerType in availableImporters">
+                        <div
+                                role="listitem"
+                                class="importer-type"
+                                :key="importerType.slug"
+                                v-if="!(hideWhenManualCollection && !importerType.manual_collection)"
+                                @click="onSelectImporter(importerType)">
+                            <h4>{{ importerType.name }}</h4>
+                            <p>{{ importerType.description }}</p>            
+                        </div>
+                    </template>
 
                     <b-loading 
                         :is-full-page="false"
diff --git a/src/views/admin/components/modals/bulk-edition-modal.vue b/src/views/admin/components/modals/bulk-edition-modal.vue
index ec22f8aaf..45a7fcd56 100644
--- a/src/views/admin/components/modals/bulk-edition-modal.vue
+++ b/src/views/admin/components/modals/bulk-edition-modal.vue
@@ -42,13 +42,14 @@
                                         v-if="metadatum.id && metadatum.metadata_type_object.component === 'tainacan-compound' && metadatum.multiple !== 'yes'"
                                         :key="index"
                                         :label="metadatum.name">
-                                    <option 
-                                            v-for="(childMetadatum, childIndex) of metadatum.metadata_type_options.children_objects"
-                                            :key="childIndex"
-                                            v-if="childMetadatum.id"
-                                            :value="childMetadatum">
-                                        {{ childMetadatum.name }}
-                                    </option>
+                                    <template v-for="(childMetadatum, childIndex) of metadatum.metadata_type_options.children_objects">
+                                        <option 
+                                                :key="childIndex"
+                                                v-if="childMetadatum.id"
+                                                :value="childMetadatum">
+                                            {{ childMetadatum.name }}
+                                        </option>
+                                    </template>
                                 </optgroup>
                             </template>
                             <option :value="{ id: 'status' }">
@@ -172,13 +173,14 @@
                                                     v-if="metadatumForCopy.id && metadatumForCopy.metadata_type_object.component === 'tainacan-compound'"
                                                     :key="index"
                                                     :label="metadatumForCopy.name">
-                                                <option 
-                                                        v-for="(childmetadatumForCopy, childIndex) of metadatumForCopy.metadata_type_options.children_objects"
-                                                        :key="childIndex"
-                                                        v-if="childMetadatumForCopy.id"
-                                                        :value="childMetadatumForCopy.id">
-                                                    {{ childMetadatumForCopy.name }}
-                                                </option>
+                                                <template v-for="(childmetadatumForCopy, childIndex) of metadatumForCopy.metadata_type_options.children_objects">
+                                                    <option 
+                                                            :key="childIndex"
+                                                            v-if="childMetadatumForCopy.id"
+                                                            :value="childMetadatumForCopy.id">
+                                                        {{ childMetadatumForCopy.name }}
+                                                    </option>
+                                                </template>
                                             </optgroup>
                                         </template>
                                         <option 
diff --git a/src/views/admin/components/modals/capability-edition-modal.vue b/src/views/admin/components/modals/capability-edition-modal.vue
index c8660003b..24cabd4b4 100644
--- a/src/views/admin/components/modals/capability-edition-modal.vue
+++ b/src/views/admin/components/modals/capability-edition-modal.vue
@@ -16,15 +16,16 @@
                     <p>{{ $i18n.get('info_associated_roles') }}</p>
                     <br>
                     <div class="roles-list">
-                        <b-checkbox
-                                v-if="!capability.roles_inherited[role.slug]"
-                                v-for="(role, roleIndex) of existingRoles"
-                                :key="roleIndex"
-                                :value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
-                                @input="($event) => updateRole(role.slug, $event)"
-                                name="roles">
-                            {{ role.name }}
-                        </b-checkbox>
+                        <template v-for="(role, roleIndex) of existingRoles">
+                            <b-checkbox
+                                    v-if="!capability.roles_inherited[role.slug]"
+                                    :key="roleIndex"
+                                    :value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
+                                    @input="($event) => updateRole(role.slug, $event)"
+                                    name="roles">
+                                {{ role.name }}
+                            </b-checkbox>
+                        </template>
                     </div>
                 </b-field>
             </template>
@@ -48,16 +49,17 @@
                     </label>
                     <br>
                     <div class="roles-list">
-                        <b-checkbox
-                                v-if="capability.roles_inherited[role.slug]"
-                                v-for="(role, roleIndex) of existingRoles"
-                                :key="roleIndex"
-                                class="has-text-yellow2"
-                                :value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
-                                name="roles_inherited"
-                                disabled>
-                            {{ role.name }}
-                        </b-checkbox>
+                        <template v-for="(role, roleIndex) of existingRoles">
+                            <b-checkbox
+                                    v-if="capability.roles_inherited[role.slug]"
+                                    :key="roleIndex"
+                                    class="has-text-yellow2"
+                                    :value="capability.roles[role.slug] || capability.roles_inherited[role.slug] ? true : false"
+                                    name="roles_inherited"
+                                    disabled>
+                                {{ role.name }}
+                            </b-checkbox>
+                        </template>
                     </div>
                 </b-field>
             </template>
diff --git a/src/views/admin/components/modals/collection-creation-modal.vue b/src/views/admin/components/modals/collection-creation-modal.vue
index c8d5fd56c..f720f01b4 100644
--- a/src/views/admin/components/modals/collection-creation-modal.vue
+++ b/src/views/admin/components/modals/collection-creation-modal.vue
@@ -59,16 +59,17 @@
                     v-if="selectedEstrategy == 'mappers'"
                     class="collection-creation-options-container"
                     role="list">
-                <button
-                         class="collection-creation-option"
-                        @click="$router.push($routerHelper.getNewMappedCollectionPath(metadatumMapper.slug)); $parent.close();"
-                        :key="metadatumMapper.slug"
-                        v-for="metadatumMapper in metadatumMappers"
-                        v-if="metadatumMapper.metadata != false"
-                        aria-role="listitem">
-                    <h3>{{ metadatumMapper.name }}</h3>
-                    <p>{{ metadatumMapper.description }}</p>
-                </button>
+                <template v-for="metadatumMapper in metadatumMappers">
+                    <button
+                            class="collection-creation-option"
+                            @click="$router.push($routerHelper.getNewMappedCollectionPath(metadatumMapper.slug)); $parent.close();"
+                            :key="metadatumMapper.slug"
+                            v-if="metadatumMapper.metadata != false"
+                            aria-role="listitem">
+                        <h3>{{ metadatumMapper.name }}</h3>
+                        <p>{{ metadatumMapper.description }}</p>
+                    </button>
+                </template>
             </div>
 
             <div 
diff --git a/src/views/admin/components/modals/collections-modal.vue b/src/views/admin/components/modals/collections-modal.vue
index ca787b5cb..119c89b3a 100644
--- a/src/views/admin/components/modals/collections-modal.vue
+++ b/src/views/admin/components/modals/collections-modal.vue
@@ -19,15 +19,16 @@
                 <div 
                         v-if="!isLoading" 
                         class="collection-types-container">
-                    <div
-                            class="collection-type"
-                            v-for="(collection, index) in collections"
-                            :key="index"
-                            v-if="collection && collection.current_user_can_edit_items"
-                            @click="onSelectCollection(collection)">
-                        <h4>{{ collection.name }}</h4>
-                        <p>{{ collection.description.length > 200 ? (collection.description.substring(0,197) + '...') : collection.description }}</p>            
-                    </div>
+                    <template v-for="(collection, index) in collections">
+                        <div
+                                class="collection-type"
+                                :key="index"
+                                v-if="collection && collection.current_user_can_edit_items"
+                                @click="onSelectCollection(collection)">
+                            <h4>{{ collection.name }}</h4>
+                            <p>{{ collection.description.length > 200 ? (collection.description.substring(0,197) + '...') : collection.description }}</p>            
+                        </div>
+                    </template>
                     <div 
                             v-if="collections.length <= 0"
                             class="block">
diff --git a/src/views/admin/components/other/items-status-tabs.vue b/src/views/admin/components/other/items-status-tabs.vue
index 2426fe02e..e7eaae3ac 100644
--- a/src/views/admin/components/other/items-status-tabs.vue
+++ b/src/views/admin/components/other/items-status-tabs.vue
@@ -18,36 +18,37 @@
                     </span>
                 </a>
             </li>
-            <li 
-                    v-for="(statusOption, index) of $statusHelper.getStatuses()"
-                    v-if="(isRepositoryLevel || statusOption.slug != 'private') || (statusOption.slug == 'private' && collection && collection.current_user_can_read_private_items)"
-                    :key="index"
-                    @click="onChangeTab(statusOption.slug)"
-                    :class="{ 'is-active': status == statusOption.slug}"
-                    :style="{ marginRight: statusOption.slug == 'draft' ? 'auto' : '', marginLeft: statusOption.slug == 'trash' ? 'auto' : '' }"
-                    v-tooltip="{
-                        content: $i18n.getWithVariables('info_%s_tab_' + statusOption.slug,[$i18n.get('items')]),
-                        autoHide: true,
-                        placement: 'auto',
-                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
-                    }">
-                <a>
-                    <span 
-                            v-if="$statusHelper.hasIcon(statusOption.slug)"
-                            class="icon has-text-gray">
-                        <i 
-                                class="tainacan-icon tainacan-icon-1-125em"
-                                :class="$statusHelper.getIcon(statusOption.slug)"
-                                />
-                    </span>
-                    {{ statusOption.name }}
-                    <span 
-                            v-if="!$adminOptions.hideItemsListStatusTabsTotalItems"
-                            class="has-text-gray">
-                        &nbsp;{{ (isRepositoryLevel && repositoryTotalItems) ? ` (${ repositoryTotalItems[statusOption.slug] })` : (collection && collection.total_items ? ` (${collection.total_items[statusOption.slug]})` : '') }}
-                    </span>
-                </a>
-            </li>
+            <template v-for="(statusOption, index) of $statusHelper.getStatuses()">
+                <li 
+                        v-if="(isRepositoryLevel || statusOption.slug != 'private') || (statusOption.slug == 'private' && collection && collection.current_user_can_read_private_items)"
+                        :key="index"
+                        @click="onChangeTab(statusOption.slug)"
+                        :class="{ 'is-active': status == statusOption.slug}"
+                        :style="{ marginRight: statusOption.slug == 'draft' ? 'auto' : '', marginLeft: statusOption.slug == 'trash' ? 'auto' : '' }"
+                        v-tooltip="{
+                            content: $i18n.getWithVariables('info_%s_tab_' + statusOption.slug,[$i18n.get('items')]),
+                            autoHide: true,
+                            placement: 'auto',
+                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
+                        }">
+                    <a>
+                        <span 
+                                v-if="$statusHelper.hasIcon(statusOption.slug)"
+                                class="icon has-text-gray">
+                            <i 
+                                    class="tainacan-icon tainacan-icon-1-125em"
+                                    :class="$statusHelper.getIcon(statusOption.slug)"
+                                    />
+                        </span>
+                        {{ statusOption.name }}
+                        <span 
+                                v-if="!$adminOptions.hideItemsListStatusTabsTotalItems"
+                                class="has-text-gray">
+                            &nbsp;{{ (isRepositoryLevel && repositoryTotalItems) ? ` (${ repositoryTotalItems[statusOption.slug] })` : (collection && collection.total_items ? ` (${collection.total_items[statusOption.slug]})` : '') }}
+                        </span>
+                    </a>
+                </li>
+            </template>
         </ul>
     </div>
 </template>
diff --git a/src/views/admin/components/search/filters-items-list.vue b/src/views/admin/components/search/filters-items-list.vue
index a42c84f92..d1c77c9bd 100644
--- a/src/views/admin/components/search/filters-items-list.vue
+++ b/src/views/admin/components/search/filters-items-list.vue
@@ -49,206 +49,210 @@
 
             <!--  TAXONOMY TERM ITEMS FILTERS -->
             <template v-if="taxonomy && taxonomyFilters">
-                <div 
-                        v-if="key == 'repository-filters'"
-                        :key="index"
-                        v-for="(taxonomyFilter, key, index) of taxonomyFilters">
+                <template v-for="(taxonomyFilter, key, index) of taxonomyFilters">
                     <div 
-                            v-tooltip="{
-                                delay: {
-                                    shown: 500,
-                                    hide: 300,
-                                },
-                                content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
-                                autoHide: false,
-                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }" 
-                            v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
-                            class="collection-name">
-                        {{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
+                            v-if="key == 'repository-filters'"
+                            :key="index">
+                        <div 
+                                v-tooltip="{
+                                    delay: {
+                                        shown: 500,
+                                        hide: 300,
+                                    },
+                                    content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
+                                    autoHide: false,
+                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }" 
+                                v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
+                                class="collection-name">
+                            {{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
+                        </div>
+                        <div    
+                                v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined)"
+                                class="collection-name">
+                            <span 
+                                    style="width: 100%; height: 54px;"
+                                    class="icon has-text-centered loading-icon">
+                                <div class="control has-icons-right is-loading is-clearfix" />
+                            </span>
+                        </div>
+                        <template v-if="taxonomyFilter.length > 0">
+                            <tainacan-filter-item
+                                    :is-loading-items="isLoadingItems"
+                                    v-show="!isMenuCompressed"        
+                                    :query="getQuery"
+                                    v-for="(filter, filterIndex) in taxonomyFilter"
+                                    :key="filterIndex"
+                                    :filter="filter"
+                                    :expand-all="!collapseAll"
+                                    :is-repository-level="key == 'repository-filters'"
+                                    :filters-as-modal="filtersAsModal"
+                                    :is-mobile-screen="isMobileScreen"/>
+                        </template>
+                        <!-- <p   
+                                class="has-text-gray"
+                                style="font-size: 0.75em;"
+                                v-if="taxonomyFilter.length <= 0">
+                            {{ $i18n.get('info_there_is_no_filter') }}    
+                        </p> -->
+                        <hr v-if="taxonomyFilter.length > 1">
                     </div>
-                    <div    
-                            v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined)"
-                            class="collection-name">
-                        <span 
-                                style="width: 100%; height: 54px;"
-                                class="icon has-text-centered loading-icon">
-                            <div class="control has-icons-right is-loading is-clearfix" />
-                        </span>
-                    </div>
-                    <template v-if="taxonomyFilter.length > 0">
-                        <tainacan-filter-item
-                                :is-loading-items="isLoadingItems"
-                                v-show="!isMenuCompressed"        
-                                :query="getQuery"
-                                v-for="(filter, filterIndex) in taxonomyFilter"
-                                :key="filterIndex"
-                                :filter="filter"
-                                :expand-all="!collapseAll"
-                                :is-repository-level="key == 'repository-filters'"
-                                :filters-as-modal="filtersAsModal"
-                                :is-mobile-screen="isMobileScreen"/>
-                    </template>
-                    <!-- <p   
-                            class="has-text-gray"
-                            style="font-size: 0.75em;"
-                            v-if="taxonomyFilter.length <= 0">
-                        {{ $i18n.get('info_there_is_no_filter') }}    
-                    </p> -->
-                    <hr v-if="taxonomyFilter.length > 1">
-                </div>
-                <div 
-                        v-if="key != 'repository-filters'"
-                        :key="index"
-                        v-for="(taxonomyFilter, key, index) of taxonomyFilters">
+                </template>
+                <template v-for="(taxonomyFilter, key, index) of taxonomyFilters">
                     <div 
-                            v-tooltip="{
-                                delay: {
-                                    shown: 500,
-                                    hide: 300,
-                                },
-                                content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
-                                autoHide: false,
-                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }" 
-                            v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
-                            class="collection-name">
-                        {{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
+                            v-if="key != 'repository-filters'"
+                            :key="index">
+                        <div 
+                                v-tooltip="{
+                                    delay: {
+                                        shown: 500,
+                                        hide: 300,
+                                    },
+                                    content: $i18n.get('label_filters_from') + ' ' + taxonomyFiltersCollectionNames[key] + ': ',
+                                    autoHide: false,
+                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }" 
+                                v-if="taxonomyFilter.length > 0 && taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined"
+                                class="collection-name">
+                            {{ $i18n.get('label_filters_from') + " " + taxonomyFiltersCollectionNames[key] + ": " }}
+                        </div>
+                        <div    
+                                v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined)"
+                                class="collection-name">
+                            <span 
+                                    style="width: 100%; height: 54px;"
+                                    class="icon has-text-centered loading-icon">
+                                <div class="control has-icons-right is-loading is-clearfix" />
+                            </span>
+                        </div>
+                        <template v-if="taxonomyFilter.length > 0">
+                            <tainacan-filter-item
+                                    :is-loading-items="isLoadingItems"
+                                    v-show="!isMenuCompressed"        
+                                    :query="getQuery"
+                                    v-for="(filter, filterIndex) in taxonomyFilter"
+                                    :key="filterIndex"
+                                    :filter="filter"
+                                    :expand-all="!collapseAll"
+                                    :is-repository-level="key == 'repository-filters'"
+                                    :filters-as-modal="filtersAsModal"
+                                    :is-mobile-screen="isMobileScreen" />
+                        </template>
+                        <!-- <p   
+                                class="has-text-gray"
+                                style="font-size: 0.75em;"
+                                v-if="taxonomyFilter.length <= 0">
+                            {{ $i18n.get('info_there_is_no_filter') }}    
+                        </p> -->
+                        <hr v-if="taxonomyFilter.length > 1">
                     </div>
-                    <div    
-                            v-if="taxonomyFilter.length > 0 && !(taxonomyFiltersCollectionNames != undefined && taxonomyFiltersCollectionNames[key] != undefined)"
-                            class="collection-name">
-                        <span 
-                                style="width: 100%; height: 54px;"
-                                class="icon has-text-centered loading-icon">
-                            <div class="control has-icons-right is-loading is-clearfix" />
-                        </span>
-                    </div>
-                    <template v-if="taxonomyFilter.length > 0">
-                        <tainacan-filter-item
-                                :is-loading-items="isLoadingItems"
-                                v-show="!isMenuCompressed"        
-                                :query="getQuery"
-                                v-for="(filter, filterIndex) in taxonomyFilter"
-                                :key="filterIndex"
-                                :filter="filter"
-                                :expand-all="!collapseAll"
-                                :is-repository-level="key == 'repository-filters'"
-                                :filters-as-modal="filtersAsModal"
-                                :is-mobile-screen="isMobileScreen" />
-                    </template>
-                    <!-- <p   
-                            class="has-text-gray"
-                            style="font-size: 0.75em;"
-                            v-if="taxonomyFilter.length <= 0">
-                        {{ $i18n.get('info_there_is_no_filter') }}    
-                    </p> -->
-                    <hr v-if="taxonomyFilter.length > 1">
-                </div>
+                </template>
             </template>
 
             <!-- REPOSITORY ITEMS FILTERS -->
             <template v-else-if="isRepositoryLevel && !taxonomy">
-                <div 
-                        v-if="key == 'repository-filters'"
-                        :key="index"
-                        v-for="(repositoryCollectionFilter, key, index) of repositoryCollectionFilters">
+                <template v-for="(repositoryCollectionFilter, key, index) of repositoryCollectionFilters">
                     <div 
-                            v-tooltip="{
-                                delay: {
-                                    shown: 500,
-                                    hide: 300,
-                                },
-                                content: $i18n.get('label_filters_from') + ' ' + repositoryCollectionNames[key] + ': ',
-                                autoHide: false,
-                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }" 
-                            v-if="repositoryCollectionFilter.length > 0 && repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined"
-                            class="collection-name">
-                        {{ $i18n.get('label_filters_from') + " " + repositoryCollectionNames[key] + ": " }}
+                            v-if="key == 'repository-filters'"
+                            :key="index">
+                        <div 
+                                v-tooltip="{
+                                    delay: {
+                                        shown: 500,
+                                        hide: 300,
+                                    },
+                                    content: $i18n.get('label_filters_from') + ' ' + repositoryCollectionNames[key] + ': ',
+                                    autoHide: false,
+                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }" 
+                                v-if="repositoryCollectionFilter.length > 0 && repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined"
+                                class="collection-name">
+                            {{ $i18n.get('label_filters_from') + " " + repositoryCollectionNames[key] + ": " }}
+                        </div>
+                        <div    
+                                v-if="repositoryCollectionFilter.length > 0 && !(repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined)"
+                                class="collection-name">
+                            <span 
+                                    style="width: 100%; height: 54px;"
+                                    class="icon has-text-centered loading-icon">
+                                <div class="control has-icons-right is-loading is-clearfix" />
+                            </span>
+                        </div>
+                        <template v-if="repositoryCollectionFilter.length > 0">
+                            <tainacan-filter-item
+                                    :is-loading-items="isLoadingItems"
+                                    v-show="!isMenuCompressed"        
+                                    :query="getQuery"
+                                    v-for="(filter, filterIndex) in repositoryCollectionFilter"
+                                    :key="filterIndex"
+                                    :filter="filter"
+                                    :expand-all="!collapseAll"
+                                    :is-repository-level="key == 'repository-filters'"
+                                    :filters-as-modal="filtersAsModal"
+                                    :is-mobile-screen="isMobileScreen" />
+                        </template>
+                        <!-- <p   
+                                class="has-text-gray"
+                                style="font-size: 0.75em;"
+                                v-if="taxonomyFilter.length <= 0">
+                            {{ $i18n.get('info_there_is_no_filter') }}    
+                        </p> -->
+                        <hr v-if="repositoryCollectionFilters.length > 1">
                     </div>
-                    <div    
-                            v-if="repositoryCollectionFilter.length > 0 && !(repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined)"
-                            class="collection-name">
-                        <span 
-                                style="width: 100%; height: 54px;"
-                                class="icon has-text-centered loading-icon">
-                            <div class="control has-icons-right is-loading is-clearfix" />
-                        </span>
-                    </div>
-                    <template v-if="repositoryCollectionFilter.length > 0">
-                        <tainacan-filter-item
-                                :is-loading-items="isLoadingItems"
-                                v-show="!isMenuCompressed"        
-                                :query="getQuery"
-                                v-for="(filter, filterIndex) in repositoryCollectionFilter"
-                                :key="filterIndex"
-                                :filter="filter"
-                                :expand-all="!collapseAll"
-                                :is-repository-level="key == 'repository-filters'"
-                                :filters-as-modal="filtersAsModal"
-                                :is-mobile-screen="isMobileScreen" />
-                    </template>
-                    <!-- <p   
-                            class="has-text-gray"
-                            style="font-size: 0.75em;"
-                            v-if="taxonomyFilter.length <= 0">
-                        {{ $i18n.get('info_there_is_no_filter') }}    
-                    </p> -->
-                    <hr v-if="repositoryCollectionFilters.length > 1">
-                </div>
-                <div 
-                        v-if="key != 'repository-filters'"
-                        :key="index"
-                        v-for="(repositoryCollectionFilter, key, index) of repositoryCollectionFilters">
+                </template>
+                <template v-for="(repositoryCollectionFilter, key, index) of repositoryCollectionFilters">
                     <div 
-                            v-tooltip="{
-                                delay: {
-                                    shown: 500,
-                                    hide: 300,
-                                },
-                                content: $i18n.get('label_filters_from') + ' ' + repositoryCollectionNames[key] + ': ',
-                                autoHide: false,
-                                popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
-                                placement: 'auto-start'
-                            }" 
-                            v-if="repositoryCollectionFilter.length > 0 && repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined"
-                            class="collection-name">
-                        {{ $i18n.get('label_filters_from') + " " + repositoryCollectionNames[key] + ": " }}
+                            v-if="key != 'repository-filters'"
+                            :key="index">
+                        <div 
+                                v-tooltip="{
+                                    delay: {
+                                        shown: 500,
+                                        hide: 300,
+                                    },
+                                    content: $i18n.get('label_filters_from') + ' ' + repositoryCollectionNames[key] + ': ',
+                                    autoHide: false,
+                                    popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
+                                    placement: 'auto-start'
+                                }" 
+                                v-if="repositoryCollectionFilter.length > 0 && repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined"
+                                class="collection-name">
+                            {{ $i18n.get('label_filters_from') + " " + repositoryCollectionNames[key] + ": " }}
+                        </div>
+                        <div    
+                                v-if="repositoryCollectionFilter.length > 0 && !(repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined)"
+                                class="collection-name">
+                            <span 
+                                    style="width: 100%; height: 54px;"
+                                    class="icon has-text-centered loading-icon">
+                                <div class="control has-icons-right is-loading is-clearfix" />
+                            </span>
+                        </div>
+                        <template v-if="repositoryCollectionFilter.length > 0">
+                            <tainacan-filter-item
+                                    :is-loading-items="isLoadingItems"
+                                    v-show="!isMenuCompressed"        
+                                    :query="getQuery"
+                                    v-for="(filter, filterIndex) in repositoryCollectionFilter"
+                                    :key="filterIndex"
+                                    :filter="filter"
+                                    :expand-all="!collapseAll"
+                                    :is-repository-level="key == 'repository-filters'"
+                                    :filters-as-modal="filtersAsModal"
+                                    :is-mobile-screen="isMobileScreen" />
+                        </template>
+                        <!-- <p   
+                                class="has-text-gray"
+                                style="font-size: 0.75em;"
+                                v-if="taxonomyFilter.length <= 0">
+                            {{ $i18n.get('info_there_is_no_filter') }}    
+                        </p> -->
+                        <hr v-if="repositoryCollectionFilters.length > 1">
                     </div>
-                    <div    
-                            v-if="repositoryCollectionFilter.length > 0 && !(repositoryCollectionNames != undefined && repositoryCollectionNames[key] != undefined)"
-                            class="collection-name">
-                        <span 
-                                style="width: 100%; height: 54px;"
-                                class="icon has-text-centered loading-icon">
-                            <div class="control has-icons-right is-loading is-clearfix" />
-                        </span>
-                    </div>
-                    <template v-if="repositoryCollectionFilter.length > 0">
-                        <tainacan-filter-item
-                                :is-loading-items="isLoadingItems"
-                                v-show="!isMenuCompressed"        
-                                :query="getQuery"
-                                v-for="(filter, filterIndex) in repositoryCollectionFilter"
-                                :key="filterIndex"
-                                :filter="filter"
-                                :expand-all="!collapseAll"
-                                :is-repository-level="key == 'repository-filters'"
-                                :filters-as-modal="filtersAsModal"
-                                :is-mobile-screen="isMobileScreen" />
-                    </template>
-                    <!-- <p   
-                            class="has-text-gray"
-                            style="font-size: 0.75em;"
-                            v-if="taxonomyFilter.length <= 0">
-                        {{ $i18n.get('info_there_is_no_filter') }}    
-                    </p> -->
-                    <hr v-if="repositoryCollectionFilters.length > 1">
-                </div>
+                </template>
             </template>
 
             <!-- COLLECTION ITEMS FILTERS -->
diff --git a/src/views/admin/components/search/pagination.vue b/src/views/admin/components/search/pagination.vue
index 89f63a7a4..f0ad5f6ef 100644
--- a/src/views/admin/components/search/pagination.vue
+++ b/src/views/admin/components/search/pagination.vue
@@ -42,13 +42,14 @@
                         aria-controls="items-list-results"
                         aria-labelledby="items-per-page-select"
                         @input="onChangeItemsPerPage">
-                    <option
-                            v-for="(itemsPerPageOption, index) of itemsPerPageOptions"
-                            :key="index"
-                            v-if="maxItemsPerPage >= 12"
-                            :value="itemsPerPageOption">
-                       {{ itemsPerPageOption }} &nbsp;
-                    </option>
+                    <template v-for="(itemsPerPageOption, index) of itemsPerPageOptions">
+                        <option
+                                :key="index"
+                                v-if="maxItemsPerPage >= 12"
+                                :value="itemsPerPageOption">
+                        {{ itemsPerPageOption }} &nbsp;
+                        </option>
+                    </template>
                 </b-select>
             </b-field>
         </div>
diff --git a/src/views/admin/pages/lists/collections-page.vue b/src/views/admin/pages/lists/collections-page.vue
index 20d9c9033..92a21ea1e 100644
--- a/src/views/admin/pages/lists/collections-page.vue
+++ b/src/views/admin/pages/lists/collections-page.vue
@@ -205,9 +205,8 @@
                         </a>
                     </li>
                     <li 
-                            v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'draft')"
+                            v-for="(statusOption, index) of statusOptionsForCollections"
                             :key="index"
-                            v-if="statusOption.slug != 'private' || (statusOption.slug == 'private' && $userCaps.hasCapability('tnc_rep_read_private_collections'))"
                             @click="onChangeTab(statusOption.slug)"
                             :class="{ 'is-active': status == statusOption.slug}"
                             :style="{ marginRight: statusOption.slug == 'private' ? 'auto' : '', marginLeft: statusOption.slug == 'trash' ? 'auto' : '' }"
@@ -252,13 +251,7 @@
                                 </span>
                             </p>
                             <p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_collection_created') }}</p>
-                            <p
-                                    v-for="(statusOption, index) of $statusHelper.getStatuses()"
-                                    :key="index"
-                                    v-if="status == statusOption.slug">
-                                {{ $i18n.get('info_no_collections_' + statusOption.slug) }}
-                            </p>
-
+                            <p v-else>{{ $i18n.get('info_no_collections_' + status) }}</p>
                             <div v-if="!$adminOptions.hideCollectionsListCreationDropdown && $userCaps.hasCapability('tnc_rep_edit_collections') && status == undefined || status == ''">
                                 <b-dropdown 
                                         id="collection-creation-options-dropdown"
@@ -406,6 +399,9 @@ export default {
             }
 
             return {};
+        },
+        statusOptionsForCollections() {
+            return this.$statusHelper.getStatuses().filter((status) => status.slug != 'draft' && (status.slug != 'private' || (status.slug == 'private' && this.$userCaps.hasCapability('tnc_rep_read_private_collections'))));
         }
     },
     created() {
diff --git a/src/views/admin/pages/lists/items-page.vue b/src/views/admin/pages/lists/items-page.vue
index f9f0773a0..4505c1c14 100644
--- a/src/views/admin/pages/lists/items-page.vue
+++ b/src/views/admin/pages/lists/items-page.vue
@@ -321,17 +321,18 @@
                                 <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
                             </span>
                         </button>
-                        <b-dropdown-item
-                                aria-controls="items-list-results"
-                                role="button"
-                                :class="{ 'is-active': (orderBy != 'meta_value' && orderBy != 'meta_value_num' && orderBy == metadatum.slug) || ((orderBy == 'meta_value' || orderBy == 'meta_value_num') && metaKey == metadatum.id) }"
-                                v-for="metadatum of sortingMetadata"
-                                v-if="metadatum != undefined"
-                                :value="metadatum"
-                                :key="metadatum.slug"
-                                aria-role="listitem">
-                            {{ metadatum.name }}
-                        </b-dropdown-item>
+                        <template v-for="metadatum of sortingMetadata">
+                            <b-dropdown-item
+                                    aria-controls="items-list-results"
+                                    role="button"
+                                    :class="{ 'is-active': (orderBy != 'meta_value' && orderBy != 'meta_value_num' && orderBy == metadatum.slug) || ((orderBy == 'meta_value' || orderBy == 'meta_value_num') && metaKey == metadatum.id) }"
+                                    v-if="metadatum != undefined"
+                                    :value="metadatum"
+                                    :key="metadatum.slug"
+                                    aria-role="listitem">
+                                {{ metadatum.name }}
+                            </b-dropdown-item>
+                        </template>
                     </b-dropdown>
                 </b-field>
             </div>
@@ -630,11 +631,8 @@
                         <p v-if="status == undefined || status == '' || status == 'publish,private,draft'">
                             {{ (hasFiltered || openAdvancedSearch || searchQuery) ? $i18n.get('info_no_item_found_filter') : (isSortingByCustomMetadata ? $i18n.get('info_no_item_found') : $i18n.get('info_no_item_created')) }}
                         </p>
-                        <p
-                                v-for="(statusOption, index) of $statusHelper.getStatuses()"
-                                :key="index"
-                                v-if="status == statusOption.slug">
-                            {{ $i18n.get('info_no_items_' + statusOption.slug) }}
+                        <p v-else>
+                            {{ $i18n.get('info_no_items_' + status) }}
                         </p>
 
                         <router-link
diff --git a/src/views/admin/pages/lists/taxonomies-page.vue b/src/views/admin/pages/lists/taxonomies-page.vue
index 8a001eb71..c1385e20a 100644
--- a/src/views/admin/pages/lists/taxonomies-page.vue
+++ b/src/views/admin/pages/lists/taxonomies-page.vue
@@ -125,9 +125,8 @@
                             </a>
                         </li>
                         <li 
-                                v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'draft')"
+                                v-for="(statusOption, index) of statusOptionsForTaxonomies"
                                 :key="index"
-                                v-if="statusOption.slug != 'private' || (statusOption.slug == 'private' && $userCaps.hasCapability('tnc_rep_read_private_taxonomies'))"
                                 @click="onChangeTab(statusOption.slug)"
                                 :class="{ 'is-active': status == statusOption.slug}"
                                 :style="{ marginRight: statusOption.slug == 'draft' ? 'auto' : '', marginLeft: statusOption.slug == 'trash' ? 'auto' : '' }"
@@ -171,11 +170,8 @@
                                     </span>
                                 </p>
                                 <p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_taxonomy_created') }}</p>
-                                <p
-                                        v-for="(statusOption, index) of $statusHelper.getStatuses()"
-                                        :key="index"
-                                        v-if="status == statusOption.slug">
-                                    {{ $i18n.get('info_no_taxonomies_' + statusOption.slug) }}
+                                <p v-else>
+                                    {{ $i18n.get('info_no_taxonomies_' + status) }}
                                 </p>
                                 <router-link
                                         v-if="status == undefined || status == ''"
@@ -269,6 +265,9 @@
             },
             repositoryTotalTaxonomies(){
                 return this.getRepositoryTotalTaxonomies();
+            },
+            statusOptionsForTaxonomies() {
+                return this.$statusHelper.getStatuses().filter((status) => status.slug != 'draft' && (status.slug != 'private' || (status.slug == 'private' && this.$userCaps.hasCapability('tnc_rep_read_private_taxonomies'))));
             }
         },
         created() {
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-list.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-list.vue
index 3383ad534..f790c6fb7 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-list.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-list.vue
@@ -45,16 +45,28 @@
                                             shown: 500,
                                             hide: 300,
                                         },
-                                        content: item.metadata != undefined ? renderMetadata(item, column) : '',
+                                        content: item.metadata != undefined ? renderMetadata(item, titleItemMetadatum) : '',
                                         html: true,
                                         autoHide: false,
                                         placement: 'auto-start',
                                         popperClass: ['tainacan-tooltip', 'tooltip']
                                     }"
-                                    v-for="(column, metadatumIndex) in displayedMetadata"
-                                    :key="metadatumIndex"
-                                    v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
-                                    v-html="item.metadata != undefined && collectionId ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />                 
+                                    v-if="collectionId && titleItemMetadatum"
+                                    v-html="item.metadata != undefined ? renderMetadata(item, titleItemMetadatum) : ''" />                 
+                            <p 
+                                    v-tooltip="{
+                                        delay: {
+                                            shown: 500,
+                                            hide: 300,
+                                        },
+                                        content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
+                                        html: true,
+                                        autoHide: false,
+                                        placement: 'auto-start',
+                                        popperClass: ['tainacan-tooltip', 'tooltip']
+                                    }"
+                                    v-if="!collectionId && titleItemMetadatum"
+                                    v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
                             <span 
                                     v-if="isSlideshowViewModeEnabled"
                                     v-tooltip="{
@@ -75,7 +87,7 @@
                         
                         <!-- Remaining metadata -->  
                         <div class="media">
-                                <div 
+                            <div 
                                     class="tainacan-list-thumbnail"
                                     v-if="item.thumbnail != undefined">
                                 <blur-hash-image
@@ -94,16 +106,17 @@
                                         :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)">   -->
                             </div>
                             <div class="list-metadata media-body">
-                                <span 
-                                        v-for="(column, metadatumIndex) in displayedMetadata"
-                                        :key="metadatumIndex"
-                                        :class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
-                                        v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
-                                    <h3 class="metadata-label">{{ column.name }}</h3>
-                                    <p      
-                                            v-html="renderMetadata(item, column)"
-                                            class="metadata-value"/>
-                                </span>
+                                <template v-for="(column, metadatumIndex) in displayedMetadata">
+                                    <span 
+                                            :key="metadatumIndex"
+                                            :class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
+                                            v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
+                                        <h3 class="metadata-label">{{ column.name }}</h3>
+                                        <p      
+                                                v-html="renderMetadata(item, column)"
+                                                class="metadata-value"/>
+                                    </span>
+                                </template>
                             </div>
                         </div>
 
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
index 63017febc..dbe359f50 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-map.vue
@@ -45,16 +45,28 @@
                                                 shown: 500,
                                                 hide: 300,
                                             },
-                                            content: item.metadata != undefined ? renderMetadata(item, column) : '',
+                                            content: item.metadata != undefined ? renderMetadata(item, titleItemMetadatum) : '',
                                             html: true,
                                             autoHide: false,
                                             placement: 'top-start',
                                             popperClass: ['tainacan-tooltip', 'tooltip']
                                         }"
-                                        v-for="(column, metadatumIndex) in displayedMetadata"
-                                        :key="metadatumIndex"
-                                        v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
-                                        v-html="item.metadata != undefined && collectionId && renderMetadata(item, column) ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />                 
+                                        v-if="collectionId && titleItemMetadatum"
+                                        v-html="item.metadata != undefined ? renderMetadata(item, titleItemMetadatum) : ''" />                 
+                                <p 
+                                        v-tooltip="{
+                                            delay: {
+                                                shown: 500,
+                                                hide: 300,
+                                            },
+                                            content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
+                                            html: true,
+                                            autoHide: false,
+                                            placement: 'top-start',
+                                            popperClass: ['tainacan-tooltip', 'tooltip']
+                                        }"
+                                        v-if="!collectionId && titleItemMetadatum"
+                                        v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />                             
                                 <div class="tainacan-map-card-thumbnail">
                                     <blur-hash-image
                                             v-if="item.thumbnail != undefined"
@@ -257,16 +269,28 @@
                                                         shown: 500,
                                                         hide: 300,
                                                     },
-                                                    content: item.metadata != undefined ? renderMetadata(item, column) : '',
+                                                    content: item.metadata != undefined ? renderMetadata(item, titleItemMetadatum) : '',
                                                     html: true,
                                                     autoHide: false,
                                                     placement: 'auto-start',
                                                     popperClass: ['tainacan-tooltip', 'tooltip']
                                                 }"
-                                                v-for="(column, metadatumIndex) in displayedMetadata"
-                                                :key="metadatumIndex"
-                                                v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
-                                                v-html="item.metadata != undefined && collectionId ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />                 
+                                                v-if="collectionId && titleItemMetadatum"
+                                                v-html="item.metadata != undefined ? renderMetadata(item, titleItemMetadatum) : ''" />                 
+                                        <p 
+                                                v-tooltip="{
+                                                    delay: {
+                                                        shown: 500,
+                                                        hide: 300,
+                                                    },
+                                                    content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
+                                                    html: true,
+                                                    autoHide: false,
+                                                    placement: 'auto-start',
+                                                    popperClass: ['tainacan-tooltip', 'tooltip']
+                                                }"
+                                                v-if="!collectionId && titleItemMetadatum"
+                                                v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />            
                                         <span 
                                                 v-if="isSlideshowViewModeEnabled"
                                                 v-tooltip="{
@@ -309,20 +333,21 @@
                                                             marginTop: '-' + getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px'
                                                         }" />
                                             </div>
-                                            <span 
-                                                    v-for="(column, metadatumIndex) in displayedMetadata"
-                                                    :key="metadatumIndex"
-                                                    :class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
-                                                    v-if="renderMetadata(item, column) != '' &&
-                                                        column.display && column.slug != 'thumbnail' &&
-                                                        column.metadata_type_object != undefined &&
-                                                        (column.metadata_type_object.related_mapped_prop != 'title') &&
-                                                        (column.metadata_type != 'Tainacan\\Metadata_Types\\GeoCoordinate') ">
-                                                <h3 class="metadata-label">{{ column.name }}</h3>
-                                                <p      
-                                                        v-html="renderMetadata(item, column)"
-                                                        class="metadata-value"/>
-                                            </span>
+                                            <template v-for="(column, metadatumIndex) in displayedMetadata">
+                                                <span 
+                                                        :key="metadatumIndex"
+                                                        :class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
+                                                        v-if="renderMetadata(item, column) != '' &&
+                                                            column.display && column.slug != 'thumbnail' &&
+                                                            column.metadata_type_object != undefined &&
+                                                            (column.metadata_type_object.related_mapped_prop != 'title') &&
+                                                            (column.metadata_type != 'Tainacan\\Metadata_Types\\GeoCoordinate') ">
+                                                    <h3 class="metadata-label">{{ column.name }}</h3>
+                                                    <p      
+                                                            v-html="renderMetadata(item, column)"
+                                                            class="metadata-value"/>
+                                                </span>
+                                            </template>
                                         </div>
                                     </div>
 
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-records.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-records.vue
index 57b682a7c..b98d3b4e4 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-records.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-records.vue
@@ -48,16 +48,28 @@
                                             shown: 500,
                                             hide: 300,
                                         },
-                                        content: item.metadata != undefined ? renderMetadata(item, column) : '',
+                                        content: item.metadata != undefined ? renderMetadata(item, titleItemMetadatum) : '',
                                         html: true,
                                         autoHide: false,
                                         placement: 'auto-start',
                                         popperClass: ['tainacan-tooltip', 'tooltip']
                                     }"
-                                    v-for="(column, metadatumIndex) in displayedMetadata"
-                                    :key="metadatumIndex"
-                                    v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
-                                    v-html="item.metadata != undefined && collectionId ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />                 
+                                    v-if="collectionId && titleItemMetadatum"
+                                    v-html="item.metadata != undefined ? renderMetadata(item, titleItemMetadatum) : ''" />                 
+                            <p 
+                                    v-tooltip="{
+                                        delay: {
+                                            shown: 500,
+                                            hide: 300,
+                                        },
+                                        content: item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`),
+                                        html: true,
+                                        autoHide: false,
+                                        placement: 'auto-start',
+                                        popperClass: ['tainacan-tooltip', 'tooltip']
+                                    }"
+                                    v-if="!collectionId && titleItemMetadatum"
+                                    v-html="item.title != undefined ? item.title : (`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />               
                             <span 
                                     v-if="isSlideshowViewModeEnabled"
                                     v-tooltip="{
@@ -100,16 +112,17 @@
                                                 marginTop: '-' + getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px'
                                             }" />
                                 </div>
-                                <span 
-                                        v-for="(column, metadatumIndex) in displayedMetadata"
-                                        :key="metadatumIndex"
-                                        :class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
-                                        v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
-                                    <h3 class="metadata-label">{{ column.name }}</h3>
-                                    <p      
-                                            v-html="renderMetadata(item, column)"
-                                            class="metadata-value"/>
-                                </span>
+                                <template v-for="(column, metadatumIndex) in displayedMetadata">
+                                    <span 
+                                            :key="metadatumIndex"
+                                            :class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
+                                            v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
+                                        <h3 class="metadata-label">{{ column.name }}</h3>
+                                        <p      
+                                                v-html="renderMetadata(item, column)"
+                                                class="metadata-value"/>
+                                    </span>
+                                </template>
                             </div>
                         </div>
 
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
index 73f3018c7..163fb47db 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue
@@ -288,47 +288,47 @@
                 <div class="is-large control has-icons-right is-loading is-clearfix" />
             </span>
 
-            <div
-                    v-for="(metadatum, index) of item.metadata"
-                    v-if="metadatum.value_as_html != undefined && metadatum.value_as_html != ''"
-                    :key="index"
-                    class="field">
-                <b-collapse 
-                        aria-id="metadata-collapse-for-slideshow"
-                        :open="!collapseAll">
-                    <label
-                            class="label has-text-white"
-                            slot="trigger"
-                            slot-scope="props">
-                        <span class="icon">
-                            <i 
-                                    :class="{ 'tainacan-icon-arrowdown' : props.open, 'tainacan-icon-arrowright' : !props.open}"
-                                    class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
-                        </span>
-                        <span 
-                                v-tooltip="{
-                                    delay: {
-                                        shown: 500,
-                                        hide: 300,
-                                    },
-                                    content: metadatum.name,
-                                    autoHide: false,
-                                    placement: 'auto-start',
-                                    popperClass: ['tainacan-tooltip', 'tooltip']
-                                }"  
-                                class="ellipsed-name">
-                            {{ metadatum.name }}
-                        </span>
-                    </label>
-                    <div class="content">
-                        <p  
-                            class="has-text-white"
-                            v-html="metadatum.value_as_html"/>
-                    </div>
-                </b-collapse>
-
-            </div>
+            <template v-for="(metadatum, index) of item.metadata">
+                <div
+                        v-if="metadatum.value_as_html != undefined && metadatum.value_as_html != ''"
+                        :key="index"
+                        class="field">
+                    <b-collapse 
+                            aria-id="metadata-collapse-for-slideshow"
+                            :open="!collapseAll">
+                        <label
+                                class="label has-text-white"
+                                slot="trigger"
+                                slot-scope="props">
+                            <span class="icon">
+                                <i 
+                                        :class="{ 'tainacan-icon-arrowdown' : props.open, 'tainacan-icon-arrowright' : !props.open}"
+                                        class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
+                            </span>
+                            <span 
+                                    v-tooltip="{
+                                        delay: {
+                                            shown: 500,
+                                            hide: 300,
+                                        },
+                                        content: metadatum.name,
+                                        autoHide: false,
+                                        placement: 'auto-start',
+                                        popperClass: ['tainacan-tooltip', 'tooltip']
+                                    }"  
+                                    class="ellipsed-name">
+                                {{ metadatum.name }}
+                            </span>
+                        </label>
+                        <div class="content">
+                            <p  
+                                class="has-text-white"
+                                v-html="metadatum.value_as_html"/>
+                        </div>
+                    </b-collapse>
 
+                </div>
+            </template>
             <br>
             <br>
 
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-table.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-table.vue
index 1120dafbb..4dbe3ab34 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-table.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-table.vue
@@ -12,34 +12,36 @@
                     class="tainacan-table tainacan-table-skeleton"
                     tabindex="0">
                 <thead>
-                    <th 
-                            v-for="(column, metadatumIndex) in displayedMetadata"
-                            :key="metadatumIndex"
-                            v-if="column.display"
-                            class="column-default-width"
-                            :class="{
-                                    'thumbnail-cell': column.metadatum == 'row_thumbnail',
-                                    'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || 
-                                                                                                        column.metadata_type_object.primitive_type == 'float' ||
-                                                                                                        column.metadata_type_object.primitive_type == 'int') : false,
-                                    'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' || 
-                                                                                                        column.metadata_type_object.primitive_type == 'item' || 
-                                                                                                        column.metadata_type_object.primitive_type == 'compound') : false,
-                                    'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' || column.metadata_type_object.related_mapped_prop == 'description') : false,
-                            }">
-                        <div class="th-wrap">{{ column.name }}</div>
-                    </th>
+                    <template v-for="(column, metadatumIndex) in displayedMetadata">
+                        <th 
+                                :key="metadatumIndex"
+                                v-if="column.display"
+                                class="column-default-width"
+                                :class="{
+                                        'thumbnail-cell': column.metadatum == 'row_thumbnail',
+                                        'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || 
+                                                                                                            column.metadata_type_object.primitive_type == 'float' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'int') : false,
+                                        'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' || 
+                                                                                                            column.metadata_type_object.primitive_type == 'item' || 
+                                                                                                            column.metadata_type_object.primitive_type == 'compound') : false,
+                                        'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' || column.metadata_type_object.related_mapped_prop == 'description') : false,
+                                }">
+                            <div class="th-wrap">{{ column.name }}</div>
+                        </th>
+                    </template>
                 </thead>
                 <tbody>
                     <tr   
                             :key="item"
                             v-for="item in 12">
-                        <td 
-                                v-for="(column, metadatumIndex) in displayedMetadata"
-                                :key="metadatumIndex"
-                                v-if="column.display"
-                                :class="{ 'thumbnail-cell': metadatumIndex == 0 }"
-                                class="column-default-width skeleton"/>
+                        <template v-for="(column, metadatumIndex) in displayedMetadata">
+                            <td 
+                                    :key="metadatumIndex"
+                                    v-if="column.display"
+                                    :class="{ 'thumbnail-cell': metadatumIndex == 0 }"
+                                    class="column-default-width skeleton"/>
+                        </template>
                     </tr>
                 </tbody>
             </table>
@@ -51,27 +53,27 @@
                 <thead>
                     <tr>
                         <!-- Displayed Metadata -->
-                        <th 
-                                v-for="(column, index) in displayedMetadata"
-                                :key="index"
-                                v-if="column.display"
-                                class="column-default-width"
-                                :class="{
-                                        'thumbnail-cell': column.metadatum == 'row_thumbnail',
-                                        'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' || 
-                                                                                                                               column.metadata_type_object.primitive_type == 'int' ) : false,
-                                        'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || 
-                                                                                                           column.metadata_type_object.primitive_type == 'float' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'int') : false,
-                                        'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' || 
-                                                                                                            column.metadata_type_object.primitive_type == 'item') : false,
-                                        'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' ||
-                                                                                                           column.metadata_type_object.related_mapped_prop == 'description' || 
-                                                                                                           column.metadata_type_object.primitive_type == 'compound') : false,
-                                }">
-                            <div class="th-wrap">{{ column.name }}</div>
-                        </th>
-
+                        <template v-for="(column, index) in displayedMetadata">
+                            <th 
+                                    :key="index"
+                                    v-if="column.display"
+                                    class="column-default-width"
+                                    :class="{
+                                            'thumbnail-cell': column.metadatum == 'row_thumbnail',
+                                            'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' || 
+                                                                                                                                column.metadata_type_object.primitive_type == 'int' ) : false,
+                                            'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || 
+                                                                                                            column.metadata_type_object.primitive_type == 'float' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'int') : false,
+                                            'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'term' || 
+                                                                                                                column.metadata_type_object.primitive_type == 'item') : false,
+                                            'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' ||
+                                                                                                            column.metadata_type_object.related_mapped_prop == 'description' || 
+                                                                                                            column.metadata_type_object.primitive_type == 'compound') : false,
+                                    }">
+                                <div class="th-wrap">{{ column.name }}</div>
+                            </th>
+                        </template>
                         <th 
                                 v-if="isSlideshowViewModeEnabled"
                                 class="actions-header">
@@ -99,90 +101,91 @@
                                 v-html="getBeforeHook(item)" />
                                 
                         <!-- Item Displayed Metadata -->
-                        <td 
-                                :key="metadatumIndex"    
-                                v-for="(column, metadatumIndex) in displayedMetadata"
-                                v-if="column.display"
-                                class="column-default-width"
-                                :class="{
-                                        'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea',
-                                        'thumbnail-cell': column.metadatum == 'row_thumbnail',
-                                        'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false,
-                                        'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' || 
-                                                                                                                               column.metadata_type_object.primitive_type == 'int' ) : false,
-                                        'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || 
-                                                                                                           column.metadata_type_object.primitive_type == 'int' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'float') : false,
-                                        'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'item' || 
-                                                                                                            column.metadata_type_object.primitive_type == 'term' ) : false,
-                                        'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' ||
-                                                                                                           column.metadata_type_object.primitive_type == 'compound' ||
-                                                                                                           column.metadata_type_object.related_mapped_prop == 'description') : false,
-                                }">
-                            <a :href="getItemLink(item.url, index)">
-                                <p
-                                        v-tooltip="{
-                                            delay: {
-                                                shown: 500,
-                                                hide: 300,
-                                            },
-                                            content: item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
-                                            html: true,
-                                            autoHide: false,
-                                            placement: 'auto-start',
-                                            popperClass: ['tainacan-tooltip', 'tooltip']
-                                        }"
-                                        :aria-label="column.name + ': ' + (item.title != undefined && item.title != '' ? item.title : $i18n.get('label_value_not_provided'))"
-                                        v-if="!collectionId &&
-                                            column.metadata_type_object != undefined && 
-                                            column.metadata_type_object.related_mapped_prop == 'title'"
-                                        v-html="`<span class='sr-only'>` + column.name + ': </span>' + (item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/>
-                                <p
-                                        v-tooltip="{
-                                            delay: {
-                                                shown: 500,
-                                                hide: 300,
-                                            },
-                                            content: item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
-                                            html: true,
-                                            autoHide: false,
-                                            placement: 'auto-start',
-                                            popperClass: ['tainacan-tooltip', 'tooltip']
-                                        }"
-                                        v-if="!collectionId &&
-                                            column.metadata_type_object != undefined && 
-                                            column.metadata_type_object.related_mapped_prop == 'description'"
-                                        v-html="`<span class='sr-only'>` + column.name + ': </span>' + (item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/>
-                                <p
-                                        v-tooltip="{
-                                            delay: {
-                                                shown: 500,
-                                                hide: 300,
-                                            },
-                                            popperClass: [ 'tainacan-tooltip', 'tooltip', column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' ? 'metadata-type-textarea' : '' ],
-                                            content: renderMetadataWithLabel(item.metadata, column) != '' ? renderMetadataWithLabel(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
-                                            html: true,
-                                            autoHide: false,
-                                            placement: 'auto-start'
-                                        }"
-                                        v-if="item.metadata != undefined &&
-                                            column.metadatum !== 'row_thumbnail' &&
-                                            column.metadatum !== 'row_actions' &&
-                                            column.metadatum !== 'row_creation' &&
-                                            column.metadatum !== 'row_author' &&
-                                            column.metadatum !== 'row_title' &&
-                                            column.metadatum !== 'row_description'"
-                                        v-html="renderMetadataWithLabel(item.metadata, column) != '' ? renderMetadataWithLabel(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/>
+                        <template v-for="(column, metadatumIndex) in displayedMetadata">
+                            <td 
+                                    :key="metadatumIndex"    
+                                    v-if="column.display"
+                                    class="column-default-width"
+                                    :class="{
+                                            'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea',
+                                            'thumbnail-cell': column.metadatum == 'row_thumbnail',
+                                            'column-main-content' : column.metadata_type_object != undefined ? (column.metadata_type_object.related_mapped_prop == 'title') : false,
+                                            'column-needed-width column-align-right' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'float' || 
+                                                                                                                                column.metadata_type_object.primitive_type == 'int' ) : false,
+                                            'column-small-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'date' || 
+                                                                                                            column.metadata_type_object.primitive_type == 'int' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'float') : false,
+                                            'column-medium-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'item' || 
+                                                                                                                column.metadata_type_object.primitive_type == 'term' ) : false,
+                                            'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' ||
+                                                                                                            column.metadata_type_object.primitive_type == 'compound' ||
+                                                                                                            column.metadata_type_object.related_mapped_prop == 'description') : false,
+                                    }">
+                                <a :href="getItemLink(item.url, index)">
+                                    <p
+                                            v-tooltip="{
+                                                delay: {
+                                                    shown: 500,
+                                                    hide: 300,
+                                                },
+                                                content: item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
+                                                html: true,
+                                                autoHide: false,
+                                                placement: 'auto-start',
+                                                popperClass: ['tainacan-tooltip', 'tooltip']
+                                            }"
+                                            :aria-label="column.name + ': ' + (item.title != undefined && item.title != '' ? item.title : $i18n.get('label_value_not_provided'))"
+                                            v-if="!collectionId &&
+                                                column.metadata_type_object != undefined && 
+                                                column.metadata_type_object.related_mapped_prop == 'title'"
+                                            v-html="`<span class='sr-only'>` + column.name + ': </span>' + (item.title != undefined && item.title != '' ? item.title : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/>
+                                    <p
+                                            v-tooltip="{
+                                                delay: {
+                                                    shown: 500,
+                                                    hide: 300,
+                                                },
+                                                content: item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
+                                                html: true,
+                                                autoHide: false,
+                                                placement: 'auto-start',
+                                                popperClass: ['tainacan-tooltip', 'tooltip']
+                                            }"
+                                            v-if="!collectionId &&
+                                                column.metadata_type_object != undefined && 
+                                                column.metadata_type_object.related_mapped_prop == 'description'"
+                                            v-html="`<span class='sr-only'>` + column.name + ': </span>' + (item.description != undefined && item.description != '' ? item.description : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)"/>
+                                    <p
+                                            v-tooltip="{
+                                                delay: {
+                                                    shown: 500,
+                                                    hide: 300,
+                                                },
+                                                popperClass: [ 'tainacan-tooltip', 'tooltip', column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' ? 'metadata-type-textarea' : '' ],
+                                                content: renderMetadataWithLabel(item.metadata, column) != '' ? renderMetadataWithLabel(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`,
+                                                html: true,
+                                                autoHide: false,
+                                                placement: 'auto-start'
+                                            }"
+                                            v-if="item.metadata != undefined &&
+                                                column.metadatum !== 'row_thumbnail' &&
+                                                column.metadatum !== 'row_actions' &&
+                                                column.metadatum !== 'row_creation' &&
+                                                column.metadatum !== 'row_author' &&
+                                                column.metadatum !== 'row_title' &&
+                                                column.metadatum !== 'row_description'"
+                                            v-html="renderMetadataWithLabel(item.metadata, column) != '' ? renderMetadataWithLabel(item.metadata, column) : `<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`"/>
 
-                                <span v-if="column.metadatum == 'row_thumbnail'">
-                                    <img 
-                                            :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
-                                            class="table-thumb" 
-                                            :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)">
-                                    <div class="skeleton"/>
-                                </span> 
-                            </a>
-                        </td>
+                                    <span v-if="column.metadatum == 'row_thumbnail'">
+                                        <img 
+                                                :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
+                                                class="table-thumb" 
+                                                :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)">
+                                        <div class="skeleton"/>
+                                    </span> 
+                                </a>
+                            </td>
+                        </template>
 
                         <!-- Actions -->
                         <td 
@@ -211,7 +214,8 @@
                         <td 
                                 v-if="hasAfterHook()"
                                 class="faceted-search-hook faceted-search-hook-item-after"
-                                v-html="getAfterHook(item)" />
+                                    v-html="getAfterHook(item)" />
+
                     </tr>
                 </tbody>
             </table>
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js
index a349f63d4..0c052eb12 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js
@@ -28,7 +28,23 @@ export const viewModesMixin = {
                 delete currentQueries['fetch_only_meta'];
             }
             return currentQueries
-        }
+        },
+         /* 
+         * This computed property only returns the metadatum object where the title is. 
+         * In repository level, there is not "title metadatum", this information comes directly from the item.title.
+         */
+         titleItemMetadatum() {
+            const possibleTitleItemMetadatum = this.displayedMetadata.find(aMetadatum => aMetadatum.display && aMetadatum.metadata_type_object && aMetadatum.metadata_type_object.related_mapped_prop == 'title');
+            return possibleTitleItemMetadatum ? possibleTitleItemMetadatum : false;
+        },
+        /* 
+         * This computed property only returns the metadatum object where the description is. 
+         * In repository level, there is not "description metadatum", this information comes directly from the item.description.
+         */
+        descriptionItemMetadatum() {
+            const possibleDescriptionItemMetadatum = this.displayedMetadata.find(aMetadatum => aMetadatum.display && aMetadatum.metadata_type_object && aMetadatum.metadata_type_object.related_mapped_prop == 'description');
+            return possibleDescriptionItemMetadatum ? possibleDescriptionItemMetadatum : false;
+        },
     },
     mounted() {
         this.isSlideshowViewModeEnabled = (this.enabledViewModes && Array.isArray(this.enabledViewModes)) ? (this.enabledViewModes.findIndex((viewMode) => viewMode == 'slideshow') >= 0) : false;
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
index e71756bb2..54a5db8b9 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
@@ -273,17 +273,18 @@
                                     <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
                                 </span>
                             </button>
-                            <b-dropdown-item
-                                    aria-controls="items-list-results"
-                                    role="button"
-                                    :class="{ 'is-active': (orderBy != 'meta_value' && orderBy != 'meta_value_num' && orderBy == metadatum.slug) || ((orderBy == 'meta_value' || orderBy == 'meta_value_num') && metaKey == metadatum.id) }"
-                                    v-for="metadatum of sortingMetadata"
-                                    v-if="metadatum != undefined"
-                                    :value="metadatum"
-                                    :key="metadatum.slug"
-                                    aria-role="listitem">
-                                {{ metadatum.name }}
-                            </b-dropdown-item>
+                            <template v-for="metadatum of sortingMetadata">
+                                <b-dropdown-item
+                                        aria-controls="items-list-results"
+                                        role="button"
+                                        :class="{ 'is-active': (orderBy != 'meta_value' && orderBy != 'meta_value_num' && orderBy == metadatum.slug) || ((orderBy == 'meta_value' || orderBy == 'meta_value_num') && metaKey == metadatum.id) }"
+                                        v-if="metadatum != undefined"
+                                        :value="metadatum"
+                                        :key="metadatum.slug"
+                                        aria-role="listitem">
+                                    {{ metadatum.name }}
+                                </b-dropdown-item>
+                            </template>
                         </b-dropdown>
                     </template>
                 </b-field>
@@ -325,35 +326,36 @@
                                 <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-arrowdown" />
                             </span>
                         </button>
-                        <b-dropdown-item 
-                                aria-controls="items-list-results"
-                                role="button"
-                                :class="{ 'is-active': viewModeOption == viewMode }"
-                                v-for="(viewModeOption, index) of enabledViewModes"
-                                :key="index"
-                                :value="viewModeOption"
-                                v-if="(registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == false) || (showFullscreenWithViewModes && registeredViewModes[viewModeOption] != undefined)"
-                                aria-role="listitem">
-                            <span 
-                                    v-if="!showInlineViewModeOptions"
-                                    class="gray-icon"
-                                    v-html="registeredViewModes[viewModeOption].icon"/>
-                            <span 
-                                    v-else 
-                                    v-tooltip="{
-                                        delay: {
-                                            shown: 500,
-                                            hide: 300,
-                                        },
-                                        content: registeredViewModes[viewModeOption].label,
-                                        autoHide: false,
-                                        placement: 'auto-start',
-                                        popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
-                                    }"
-                                    class="gray-icon"
-                                    v-html="registeredViewModes[viewModeOption].icon"/>
-                            <span v-if="!showInlineViewModeOptions">{{ registeredViewModes[viewModeOption].label }}</span>
-                        </b-dropdown-item>
+                        <template v-for="(viewModeOption, index) of enabledViewModes">
+                            <b-dropdown-item 
+                                    aria-controls="items-list-results"
+                                    role="button"
+                                    :class="{ 'is-active': viewModeOption == viewMode }"
+                                    v-if="(registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == false) || (showFullscreenWithViewModes && registeredViewModes[viewModeOption] != undefined)"
+                                    :key="index"
+                                    :value="viewModeOption"
+                                    aria-role="listitem">
+                                <span 
+                                        v-if="!showInlineViewModeOptions"
+                                        class="gray-icon"
+                                        v-html="registeredViewModes[viewModeOption].icon"/>
+                                <span 
+                                        v-else 
+                                        v-tooltip="{
+                                            delay: {
+                                                shown: 500,
+                                                hide: 300,
+                                            },
+                                            content: registeredViewModes[viewModeOption].label,
+                                            autoHide: false,
+                                            placement: 'auto-start',
+                                            popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
+                                        }"
+                                        class="gray-icon"
+                                        v-html="registeredViewModes[viewModeOption].icon"/>
+                                <span v-if="!showInlineViewModeOptions">{{ registeredViewModes[viewModeOption].label }}</span>
+                            </b-dropdown-item>
+                        </template>
                     </b-dropdown>
                 </b-field>
             </div>
@@ -362,19 +364,20 @@
             <div 
                     id="tainacanFullScreenViewMode"
                     class="search-control-item search-control-item--full-screen-view-mode">
-                <button 
-                        class="button is-white"
-                        :aria-label="$i18n.get('label_slides')"
-                        @click="onChangeViewMode(viewModeOption)"
-                        v-for="(viewModeOption, index) of enabledViewModes"
-                        :key="index"
-                        :value="viewModeOption"
-                        v-if="!showFullscreenWithViewModes && registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == true ">
-                    <span 
-                            class="gray-icon view-mode-icon"
-                            v-html="registeredViewModes[viewModeOption].icon"/>
-                    <span class="is-hidden-tablet-only">{{ registeredViewModes[viewModeOption].label }}</span>
-                </button>
+                <template v-for="(viewModeOption, index) of enabledViewModes">
+                    <button 
+                            class="button is-white"
+                            :aria-label="$i18n.get('label_slides')"
+                            @click="onChangeViewMode(viewModeOption)"
+                            v-if="!showFullscreenWithViewModes && registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == true"
+                            :key="index"
+                            :value="viewModeOption">
+                        <span 
+                                class="gray-icon view-mode-icon"
+                                v-html="registeredViewModes[viewModeOption].icon"/>
+                        <span class="is-hidden-tablet-only">{{ registeredViewModes[viewModeOption].label }}</span>
+                    </button>
+                </template>
             </div>
 
             <!-- Exposers or alternative links modal button -->
diff --git a/src/views/reports/components/number-block.vue b/src/views/reports/components/number-block.vue
index 167ac43f2..31734b992 100644
--- a/src/views/reports/components/number-block.vue
+++ b/src/views/reports/components/number-block.vue
@@ -17,29 +17,30 @@
             &nbsp;{{ $i18n.get(entityType) }}
         </p>
         <ul class="has-text-gray status-list">
-            <li 
-                    v-for="(statusOption, index) of $statusHelper.getStatuses()"
-                    :key="index"
-                    @mouseenter="currentHoveredStatus = statusOption.slug"
-                    @mouseleave="currentHoveredStatus = ''"
-                    v-if="(statusOption.slug != 'draft' || entityType != 'collections') && totalByStatus[statusOption.slug]">
-                <span class="value">
-                    <i-count-up
-                            :delay="750"
-                            :end-val="totalByStatus[statusOption.slug]"
-                            :options="{ separator: ' ' }" />
-                    &nbsp;
-                </span>
-                <span 
-                        v-if="$statusHelper.hasIcon(statusOption.slug)"
-                        class="icon has-text-gray">
-                    <i 
-                            :style="(isRepositoryLevel && entityType === 'items') ? 'color: var(--tainacan-block-primary, #187181);' : ''"
-                            class="tainacan-icon tainacan-icon-1-125em"
-                            :class="$statusHelper.getIcon(statusOption.slug)" />
-                </span>
-                <!-- {{ statusOption.name }} -->
-            </li>
+            <template v-for="(statusOption, index) of $statusHelper.getStatuses()">
+                <li 
+                        :key="index"
+                        @mouseenter="currentHoveredStatus = statusOption.slug"
+                        @mouseleave="currentHoveredStatus = ''"
+                        v-if="(statusOption.slug != 'draft' || entityType != 'collections') && totalByStatus[statusOption.slug]">
+                    <span class="value">
+                        <i-count-up
+                                :delay="750"
+                                :end-val="totalByStatus[statusOption.slug]"
+                                :options="{ separator: ' ' }" />
+                        &nbsp;
+                    </span>
+                    <span 
+                            v-if="$statusHelper.hasIcon(statusOption.slug)"
+                            class="icon has-text-gray">
+                        <i 
+                                :style="(isRepositoryLevel && entityType === 'items') ? 'color: var(--tainacan-block-primary, #187181);' : ''"
+                                class="tainacan-icon tainacan-icon-1-125em"
+                                :class="$statusHelper.getIcon(statusOption.slug)" />
+                    </span>
+                    <!-- {{ statusOption.name }} -->
+                </li>
+            </template>
         </ul>
         <p 
                 v-if="summary.totals && summary.totals[entityType] && entityType == 'taxonomies'"
diff --git a/src/views/roles/pages/roles-list.vue b/src/views/roles/pages/roles-list.vue
index 238579324..ddc16c30f 100644
--- a/src/views/roles/pages/roles-list.vue
+++ b/src/views/roles/pages/roles-list.vue
@@ -29,14 +29,15 @@
                     :aria-hidden="showDropdownMenu">
                 <!-- <p class="dropdown-menu-intro">{{ $i18n.get('Create a new role based on: ') }}</p> -->
                 <ul>
-                    <li 
-                            v-for="role of roles"
-                            :key="role.slug"
-                            v-if="role.slug.match('tainacan')">
-                        <router-link :to="'/roles/new?template=' + role.slug">
-                            {{ role.name }}
-                        </router-link>
-                    </li>
+                    <template v-for="role of roles">
+                        <li 
+                                :key="role.slug"
+                                v-if="role.slug.match('tainacan')">
+                            <router-link :to="'/roles/new?template=' + role.slug">
+                                {{ role.name }}
+                            </router-link>
+                        </li>
+                    </template>
                     <li><router-link to="/roles/new"><em>{{ $i18n.get('Blank') }}</em></router-link></li>
                 </ul>
             </div>