How to Embed External micro-Flipbooks in Bookdown

After you have created micro-flipbooks in your miniflipbook project, how do you embed them in Rmarkdown and bookdown projects?

How to micro-flipbook

Let’s assume you followed along in the micro-flipbooks blog post,

https://higgi13425.github.io/medical_r/posts/2020-10-14-micro-flipbooks/

and you now have an RStudio project with at least one micro-flipbook, which has been pushed to Github, and is now viewable at your github.io site, much like the one found at the link below.

Example micro-flipbook

Try it out - click on the link below, then use the left and right arrows to go forward and back in the xaringan slides. You can also make it full screen (see bottom bar icons, Esc to return), use Home/End to go to 1st/last slide, or share on social media.

https://higgi13425.github.io/mini_flipbooks/ttest_flipbook.html#1

So now that this is on the web as a viewable flipbook, how are you going to embed it in your Rmarkdown or bookdown project?

Some great ideas on how to do this properly (not the slapdash [but quick] way that I do it) from the source of all flipbooks, Evangeline Reynolds, are here: https://evangelinereynolds.netlify.app/post/embedding-flipbook-mini-in-html-document/

Also, there is lots more flipbook knowledge/options here:

https://evangelinereynolds.netlify.app/#posts

Fun with iframes!

Yes, in addition to stealing the brilliant idea of flipbooks from Evangeline Reynolds (@evamaerey), we are going to steal a trick or three from the iframe knowledge of Desiree DeLeon’s (@docossyle) blog post on how to use iframes to embed learnr apps.

For full details on how to do this properly, refer to Desiree’s blog post at:

http://desiree.rbind.io/post/2020/learnr-iframes/

Down to the details

This is actually not that hard.

Once you have working HTML at github.io with a web address, you are in business.

Just insert some iframe code between two comment fences, as in the code chunk below. This is actually easier than inserting a learnr app - with no resizing issues.

Note that it is essentially two html tags, one to open the iframe: <iframe> with a bunch of options/arguments,

• style = ““margin:0 auto; border: solid black;”
• id = “myIframeNN-unique name/number here”
• width = “763”
• height = “432”
• src =“https://actual.link.here”
• scrolling = “no”
• data-external=“1”
• allowfullscreen
• loading = “lazy”

and then one to close the iframe: </iframe>

The style argument is basically some inline CSS styling. Note that I know almost zero CSS. You can get surprisingly far with web searches. You can learn some minimal CSS here if you need to:
https://www.w3schools.com/css/css_intro.asp

Note that if you have multiple iframes in your HTML document/chapter, each one must have a unique id.

You can set the width and height (these (763 x 432) seemed to work for me).

Then set the source (src) to the link to github.io, with the first xaringan slide (#1) as the starting point.

Then usually set scrolling to “no”. Your call.

NOTE: as of fall 2021, a change in Pandoc means that you must add data-external="1" for any externally sourced files (like a flipbook from github, or a learnr app) so that Pandoc won’t get grumpy and refuse to render the flipbook.

I like to allowfullscreen, especially if there is a lot of code.

I like to set loading = “lazy”, so that this will not load until the reader scrolls to it. This makes it less likely that the flipbook will time out due to inactivity if you have a long chapter.

NOTE: if the flipbook does time out, it will turn gray and not function (no advancing with arrow keys). This can be easily fixed by reloading the webpage in the browser, but it is worth letting learners know about this possibility and the solution.

NOTE: Your <iframe> tag, with many options, should only have spaces between options, with no return characters. A return character will make your iframe silently fail.

<!---FLIPBOOK EX 1--> 

<iframe style="margin:0 auto; border: solid black;" 
id="myIframe11" width="763" height="432"
src="https://higgi13425.github.io/mini_flipbooks/ttest_flipbook.html#1" 
scrolling="no" data-external="1" 
allowfullscreen
loading="lazy">
</iframe>

<!-------------> 

Then, build your website or bookdown book with this chunk in it.

It may be helpful to preface the first microflipbook with a bit of orientation for new users. Something like:

See the example flipbook below. You can click on it and move forward or backward in the slides with the left and right arrows to see what each line of code actually does.

And your micro-flipbook will look something like the flipbook below when up on the web: * Note that in the RStudio viewer at this point it will look like an empty white box, but hang in there (and trust):*

To get this up on the web and working, will require several steps:

• Knit the Rmd page
• Build the website/book (Build tab)
• Git commit and push to Github
• Render the book (bookdown::render_book()) - for some reason this may open a web page in your browser that does not connect. Just close it.
• publish the book to bookdown.org (bookdown::publish_book(account = “your account name here”))

in a minute or two, you will have a working flipbook in your bookdown book on the web at bookdown.org that looks something like the below example.