Unable to have soft cover like newspaper

[Raparivo]

Hi all,

I would like to have soft covers like newspaper. Even if I add data-density="soft" to my divs, The covers are always hard.

<div class="flip-book" id="example">
  <div class="page page-cover page-cover-top" data-density="soft">
    <div class="page-content">
      <h2>BOOK TITLE</h2>
    </div>
  </div>
  <div class="page">
    <div class="page-content">
      <h2 class="page-header">Page Header 1</h2>
      <div class="page-image" style="background-image: url(1.jpg)"></div>
   </div>
  </div>
   ...
  <div class="page page-cover page-cover-bottom" data-density="soft">
    <div class="page-content">
      <h2>THE END</h2>
    </div>
  </div>
</div>

Could you please tell me how to have soft covers?

Thank you.

[musaticsgilbert]

It looks like setting the showCover property to true makes the lines 61-64 run in Collection/PageCollection.ts so it will always make the cover hard. You might fork/download the code and modify it to suit your needs.

[natebeaty]

I achieved this by having blank pngs as first and last pages, but it would be nice to have the option for data-density="soft" support on cover pages.

[DanTNC]

Same requirement in my project. It would be really nice to have a flexibility of setting covers' density when showCover is true.

[foxacid]

Same issue here. Soft covers would be really nice.

[George-Seletski]

I achieved this by having blank pngs as first and last pages, but it would be nice to have the option for data-density="soft" support on cover pages.

Could you explain exactly how did you fix this?

[foxacid]

I achieved this by having blank pngs as first and last pages, but it would be nice to have the option for data-density="soft" support on cover pages.

Could you explain exactly how did you fix this?

Set showCover: false, use data-density="soft" for every page and set up dummy page containers for the first and last page containing a placeholder image.

[natebeaty]

I just omitted showCover: true (the default is false, or like foxacid mentioned, you can specifically set it to false) and for the first page image used a transparent png, so the second image acts as a soft cover. Eventually I changed the first image to a png with instructions on how to use the magazine feature, so I could give hints on keyboard + TOC support I had added. You can see it in action here:

https://bmxmuseum.com/reference/6490

Here is the code I am using to init (with some preload logic in case it's useful for someone else):

var pageFlip = new St.PageFlip(
  flipbook,
    {
      width: 400,
      height: 550,
      drawShadow: true,
      flippingTime: 300,
      size: "stretch"
      // autoSize: true,
      // showCover: true,
    }
);
pageFlip.loadFromHTML(flipbook.querySelectorAll('.page'));
pageFlip.on('flip', (e) => {
  // Preload next few pages
  flipbook.querySelectorAll('.page:nth-child('+(e.data + 3)+') img, .page:nth-child('+(e.data + 4)+') img').forEach(function(el) {
    el.setAttribute('loading', 'eager');
  });
});

[George-Seletski]

I achieved this by having blank pngs as first and last pages, but it would be nice to have the option for data-density="soft" support on cover pages.

Could you explain exactly how did you fix this?

Set showCover: false, use data-density="soft" for every page and set up dummy page containers for the first and last page containing a placeholder image.

dummy pages?

[foxacid]

I achieved this by having blank pngs as first and last pages, but it would be nice to have the option for data-density="soft" support on cover pages.

Could you explain exactly how did you fix this?

Set showCover: false, use data-density="soft" for every page and set up dummy page containers for the first and last page containing a placeholder image.

dummy pages?

'Dummy page' meaning placeholder page. In order to make a "soft" cover on the right hand side work, it actually needs to be the second page in the source code. The first page serves as a simple placeholder in that case...

<div class="book" id="stf-book">
    <div class="page">
        // This is the dummy page
        <img src="blank-page.png">
    </div>
    <div class="page">
        <img src="page-1.png">
    </div>
    <div class="page">
        <img src="page-2.png">
    </div>
    [...]
</div>

[maxfahl]

Unfortunately, a transparent page introduces a bug when flipping back to the "cover", as displayed below.

How did you work this out @foxacid ?

[foxacid]

How did you work this out @foxacid ?

Can you create a demo or post your code?

I suspect you just added an empty container. In order for this to work you need to add a transparent image, too.

[maxfahl]

@foxacid

I've added a transparent png as you say, but no dice.

<div id="book">
			<div class="my-page blank" data-density="soft">
				<img src="./static/blank.png" height="900" width="600">
			</div>
			<div class="my-page" data-density="soft">
				<div class="inner">
					<div class="title">
						<h1>Page Cover</h1>
					</div>
					<div class="body"><p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus, nunc vel maximus dignissim, sapien tortor suscipit quam, eu bibendum odio dolor nec ex. Nullam vel est vel velit vestibulum pellentesque. Donec ut ante sed justo rutrum bibendum. Etiam id velit at turpis malesuada condimentum. Maecenas vel felis vel nunc consectetur consequat.<br><br>Nulla facilisi.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Donec et velit sit amet quam vestibulum posuere. Praesent mattis, sem non convallis euismod, leo magna faucibus orci, in rutrum nunc ipsum vel velit. Sed euismod, ante non ullamcorper porta, enim nisl feugiat nulla, vitae dignissim nulla velit in velit.<br><br>Mauris id dui id mauris gravida eleifend.
Aliquam erat volutpat. Sed vel libero blandit, dapibus purus vel, gravida sapien. Nulla facilisi. Duis ac dolor nunc. Sed euismod, enim ac ultrices bibendum, velit nulla eleifend felis, vel lacinia est sapien vitae libero. Donec at dolor euismod, iaculis odio nec, posuere nibh. Sed volutpat, est eu maximus laoreet, odio nisl tempor nulla, euismod vehicula nisl dui vel elit.
					</p></div>
				</div>
			</div>
                        ...
</div>

[maxfahl]

I made a fork adding the ability to have soft pages for front/back. If you're happy with the state of this project, but really needs that functionality, you're welcome to use my fork at https://github.com/maxfahl/StPageFlip. Since this repo seems to be dead, I just forked it and added the functionality. Be aware that there might be other bugs, and I will not do maintain it actively. If anyone wants to contribute, just let me know.

One more thing, I removed everything related to image pages, since it didn't bring anything to the table and was only inferior to the HTML variant. One more reason was that we wanted a smaller bundle size and didn't have the time to fix soft pages for front/back for the canvas method.