Show Book Cover Image on Book Detail Page

[ryan-avamia]

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

[prohtex]

+1 for this

[prohtex]

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.

[mdev88]

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!