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.
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 FlipbookThe 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;
}