Show Book Cover Image on Book Detail Page #5270

New Issue

OVERLORD · 2026-02-05T09:52:56+03:00

OVERLORD commented

2026-02-05 09:52:56 +03:00

Originally created by @ryan-avamia on GitHub (Apr 29, 2025).

Describe the feature you'd like

Would love to show the book cover image on the book detail page, instead of just the list of books section and list of books shelf section. This is something I grew to enjoy in Notion, and miss having the cover image shown when you are on your book detail page.

Describe the benefits this would bring to existing BookStack users

Gives the user / reader a more personable, image driven page. Benefits including:

For those who are visual learners, the ability to view content tied to an image
Create a better customizable home page for each book, especially with Books acting as a department
Gives people with the ability to create books a way to personalize their book with better experience.

Can the goal of this request already be achieved via other means?

Not sure, since there's already a cover photo as part of the book edit page, it should be an easy lift to add to the book detail page.

Have you searched for an existing open/closed issue?

I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

3 months to 1 year

Additional context

No response

Originally created by @ryan-avamia on GitHub (Apr 29, 2025). ### Describe the feature you'd like Would love to show the book cover image on the book detail page, instead of just the list of books section and list of books shelf section. This is something I grew to enjoy in Notion, and miss having the cover image shown when you are on your book detail page. ### Describe the benefits this would bring to existing BookStack users Gives the user / reader a more personable, image driven page. Benefits including: 1. For those who are visual learners, the ability to view content tied to an image 2. Create a better customizable home page for each book, especially with Books acting as a department 3. Gives people with the ability to create books a way to personalize their book with better experience. ### Can the goal of this request already be achieved via other means? Not sure, since there's already a cover photo as part of the book edit page, it should be an easy lift to add to the book detail page. ### Have you searched for an existing open/closed issue? - [x] I have searched for existing issues and none cover my fundamental request ### How long have you been using BookStack? 3 months to 1 year ### Additional context _No response_

OVERLORD added the 🔨 Feature Request label 2026-02-05 09:52:56 +03:00

OVERLORD commented

2026-02-05 09:52:57 +03:00

@prohtex commented on GitHub (Jun 17, 2025):

+1 for this

@prohtex commented on GitHub (Jun 17, 2025): +1 for this

OVERLORD commented

2026-02-05 09:52:59 +03:00

@prohtex commented on GitHub (Jun 17, 2025):

Here's a little script you can stick in the admin interface header to achieve this right now:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const isBookDetail = /^\/books\/[^\/]+$/.test(window.location.pathname);
  if (!isBookDetail) return;

  const metaCover = document.querySelector('meta[property="og:image"]');
  const container = document.querySelector('.book-content') || document.body;

  if (metaCover && container) {
    const wrapper = document.createElement('div');
    wrapper.style.width = '120px';
    wrapper.style.height = '120px';
    wrapper.style.overflow = 'hidden';
    wrapper.style.float = 'left';
    wrapper.style.marginRight = '1em';
    wrapper.style.marginBottom = '1em';

    const img = document.createElement('img');
    img.src = metaCover.content;
    img.alt = 'Book Cover';
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.objectFit = 'cover';

    wrapper.appendChild(img);
    container.prepend(wrapper);
  }
});
</script>

Our deployment is used for people, and our books are people, and all the covers are headshots, so I applied a little crop to this and floated left. ymmv.

@prohtex commented on GitHub (Jun 17, 2025): Here's a little script you can stick in the admin interface header to achieve this right now: ``` <script> document.addEventListener('DOMContentLoaded', () => { const isBookDetail = /^\/books\/[^\/]+$/.test(window.location.pathname); if (!isBookDetail) return; const metaCover = document.querySelector('meta[property="og:image"]'); const container = document.querySelector('.book-content') || document.body; if (metaCover && container) { const wrapper = document.createElement('div'); wrapper.style.width = '120px'; wrapper.style.height = '120px'; wrapper.style.overflow = 'hidden'; wrapper.style.float = 'left'; wrapper.style.marginRight = '1em'; wrapper.style.marginBottom = '1em'; const img = document.createElement('img'); img.src = metaCover.content; img.alt = 'Book Cover'; img.style.width = '100%'; img.style.height = '100%'; img.style.objectFit = 'cover'; wrapper.appendChild(img); container.prepend(wrapper); } }); </script> ``` Our deployment is used for people, and our books are people, and all the covers are headshots, so I applied a little crop to this and floated left. ymmv.

OVERLORD commented

2026-02-05 09:53:00 +03:00

@mdev88 commented on GitHub (Nov 28, 2025):

Here's a little script you can stick in the admin interface header to achieve this right now:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const isBookDetail = /^\/books\/[^\/]+$/.test(window.location.pathname);
  if (!isBookDetail) return;

  const metaCover = document.querySelector('meta[property="og:image"]');
  const container = document.querySelector('.book-content') || document.body;

  if (metaCover && container) {
    const wrapper = document.createElement('div');
    wrapper.style.width = '120px';
    wrapper.style.height = '120px';
    wrapper.style.overflow = 'hidden';
    wrapper.style.float = 'left';
    wrapper.style.marginRight = '1em';
    wrapper.style.marginBottom = '1em';

    const img = document.createElement('img');
    img.src = metaCover.content;
    img.alt = 'Book Cover';
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.objectFit = 'cover';

    wrapper.appendChild(img);
    container.prepend(wrapper);
  }
});
</script>

Our deployment is used for people, and our books are people, and all the covers are headshots, so I applied a little crop to this and floated left. ymmv.

The cover images are cropped so that they end up having an landscape aspect. Is there a way to get the original images that were uploaded as cover photos...?
I would like to show a full size image inside the detail page.

Thanks!

@mdev88 commented on GitHub (Nov 28, 2025): > Here's a little script you can stick in the admin interface header to achieve this right now: > > ``` > <script> > document.addEventListener('DOMContentLoaded', () => { > const isBookDetail = /^\/books\/[^\/]+$/.test(window.location.pathname); > if (!isBookDetail) return; > > const metaCover = document.querySelector('meta[property="og:image"]'); > const container = document.querySelector('.book-content') || document.body; > > if (metaCover && container) { > const wrapper = document.createElement('div'); > wrapper.style.width = '120px'; > wrapper.style.height = '120px'; > wrapper.style.overflow = 'hidden'; > wrapper.style.float = 'left'; > wrapper.style.marginRight = '1em'; > wrapper.style.marginBottom = '1em'; > > const img = document.createElement('img'); > img.src = metaCover.content; > img.alt = 'Book Cover'; > img.style.width = '100%'; > img.style.height = '100%'; > img.style.objectFit = 'cover'; > > wrapper.appendChild(img); > container.prepend(wrapper); > } > }); > </script> > ``` > > Our deployment is used for people, and our books are people, and all the covers are headshots, so I applied a little crop to this and floated left. ymmv. The cover images are cropped so that they end up having an landscape aspect. Is there a way to get the original images that were uploaded as cover photos...? I would like to show a full size image inside the detail page. Thanks!

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#5270