search

damianavila / mIPyex

My IPython notebook extensions (a.k.a. mIPyex).
BSD 3-Clause "New" or "Revised" License
7 stars 4 forks source link

Support data-background for full screen backgrounds in reveal.js slides #3

Open jbarratt opened 10 years ago

jbarratt commented 10 years ago

Reveal.js supports setting data-background attributes on the <section> elements; data-background, data-background-size, and data-background-repeat. 

<section data-background="#ff0000">
    <h2>All CSS color formats are supported, like rgba() or hsl().</h2>
</section>
<section data-background="http://example.com/image.png">
    <h2>This slide will have a full-size background image.</h2>
</section>
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
    <h2>This background image will be sized to 100px and repeated.</h2>
</section>

One idea I had was to add a generic attribute-management capability via HTML comments, as they are ignored by markdown, directly in the slide, like so:

<!-- data-background="myimage.png" -->

Then the slide renderer could pick anything attribute-shaped and stick it into the section tag.

damianavila commented 10 years ago

This could be an option... half-way, but probably more quick than a full implementation...

jbarratt commented 10 years ago

Ok. Architecturally could this be done as an extension or would it need to be injected more directly into the slide rendering pipeline?

damianavila commented 10 years ago

The slide rendering pipeline is in charge of reveal.js, so probably you have to touch the reveal source... or write a reveal plugin... The other option, I personally would follow, is essentially work with the reveal preprocessor as a model, be able to detect the HTML comment, and later pass this info to a custom template... and pack all these things inside an extension.