Create custom Thumb for Image flipbook.

User case:

https://wordpress.org/support/topic/custom-thumb-for-images-book-source-type/
Summary: User wants to change the cover image for Image Flipbook. By default cover image is determined by the first image in the flipbook. But in this case user wants to use a different image, without losing the hover effect of thumb.

… perhaps some CSS magic that could allow me to have a thumbnail image that’s different from the cover page, just like you can do it with choosing a pdf as the source ….

Demo Scenario:

We use a Image flipbook as below. Which has the cover image as displayed below. But has to be changed to the Custom Image displayed further below.

Image Flipbook

Solution:

We add a class attribute to the shortcode:

[dflip id="1579" class="custom-image" type="thumb"][/dflip]

We use Custom CSS to do the customization.

CSS:

.custom-image img {
      content: url("https://wordpress.dearflip.com/wp-content/uploads/2019/08/3d-flipbook.jpg");
}

Output:

Image Flipbook

The cover is changed to the target image https://wordpress.dearflip.com/wp-content/uploads/2019/08/3d-flipbook.jpg

For WordPress, please read on 
How to add Custom Code to WordPress Pages

FAQs

Compatibility:

This setup is not compatible with version below 2.0

Adjusting Size:

This setup can be controlled with CSS width: Do not provide height!

._df_thumb {
    width: 200px;
}

---