diff --git a/README.md b/README.md
index b720be8d..0c8c836e 100644
--- a/README.md
+++ b/README.md
@@ -87,7 +87,7 @@ new Tify({
container: '#tify',
language: 'de',
manifestUrl: 'https://example.org/iiif-manifest.json',
- pageLabelFormat: 'P (L)',
+ pageLabelFormat: 'P (L) / T',
pages: [2, 3],
pan: { x: .45, y: .6 },
translationsDirUrl: '/translations/tify',
diff --git a/src/components/PageName.vue b/src/components/PageName.vue
index f3ea5f68..b76128b8 100644
--- a/src/components/PageName.vue
+++ b/src/components/PageName.vue
@@ -26,6 +26,7 @@ export default {
html() {
return `${this.$store.options.pageLabelFormat}`
.replace('P', `${this.number}`)
+ .replace('T', `${this.$store.pageCount}`)
.replace('L', `${this.label}`)
.replace('', '');
},
diff --git a/src/config.js b/src/config.js
index d47d7a13..3ce83793 100644
--- a/src/config.js
+++ b/src/config.js
@@ -127,6 +127,7 @@ export default {
* thumbnails view. The placeholder `P` is replaced by the page number
* (consecutive numbers starting at `1`) while `L` is replaced by the
* page label, which can be any string, defined by the manifest.
+ * The placeholder `T` is replaced by the total number of pages.
* If the page label is missing, only the page number is displayed,
* regardless of the format.
*
diff --git a/src/plugins/store.js b/src/plugins/store.js
index 9be53058..ced6b950 100644
--- a/src/plugins/store.js
+++ b/src/plugins/store.js
@@ -337,7 +337,10 @@ function Store(args = {}) {
const label = store.localize(labelObject, '');
if (label) {
- return store.options.pageLabelFormat.replace('P', number).replace('L', label);
+ return store.options.pageLabelFormat
+ .replace('P', number)
+ .replace('T', store.pageCount)
+ .replace('L', label);
}
return store.options.pageLabelFormat.includes('P')