index.md distorts _includes html of Plotly interactive plot

Help
1

I am using Github Pages and Jekyll to serve Plotly interactive plots. At the moment, for each of the plots, I have Plotly generate the html and save it to _includes in my root directory. To display the plots, I’ve modified the home.html layout in _layouts to consist of only {% include filename.html %} statements and index.md to be blank. This does what I want it to do (see image 1) but is somewhat clunky.

Properly displayed page.

So, I’ve been trying to modify home.html with <head> and <title> and <body> sections, and then placing my {% include filename.html %} statements into the body of index.md . However, when home.html fills {{ content }} from index.md my plots all of a sudden become compressed in size (see image 2).

Distorted page.

Is there some way to have the contents from {% include filename.html %} statements fill the whole page, as was the case when I had {% include filename.html %} statements in home.html ?

Thanks!

2

I’m guessing that Plotly generated plots are full HTML pages, complete with their own <head>, <title>, and <body>? If so, then adding an extra <head>, <body>, in home.html might cause problems.

If the repo is public, then a link to the source would be helpful.

3

Correct, re: Plotly generating its own <head> and <body> tags. This question just got approved today—but I posted it initially a few weeks ago. In that time, the fix I came up with was just manually setting the height of each plot with height=700, in the code that generates the plot. The end result works out alright, I think.