Unable to create stretch images in revealjs slides

[cwu]

Using pandoc to create revealjs slides from markdown, there doesn't seem to be a way to create <img class="stretch"/> outputs which are necessary to include images that stretch to fit the window.

I've tried

% Some Slides

# Title
<img class="stretch" src="http://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg">\

However this wraps the img tag in a p tag but revealjs requires strech elements to be direct descendants of the

tag.

Don't know if this is in the scope of pandoc but since it aims to support reveal.js, I just wanted to bring it up

[mpickering]

See #261

[Quintasan]

This change partly solves the problem. You can now add the stretch class to the image but the image itself is wrapped between <p></p> which renders the whole thing useless in this case. For example:

pandoc -f markdown -t revealjs
## Header
![Image](images/test.jpg){.stretch}\

yields

<section id="header" class="slide level2">
<h1>Header</h1>
<p><img src="images/test.jpg" alt="Image" class="stretch" /> </p>
</section>

[jgm]

One approach would be to use -f markdown-markdown_in_html_blocks-native_divs and then include this raw HTML:

<div>
<img class="stretch" ... />
</div>

[Quintasan]

@jgm Unless I'm doing it wrong then it won't work because

pandoc -f markdown-markdown_in_html_blocks-native_divs -t revealjs
## Header
<div>
<img class="stretch" src="images/test.jpg" />
</div>

yields

<section id="header" class="slide level2">
<h1>Header</h1>
<div>
<img class="stretch" src="images/test.jpg" />
</div>
</section>

[jgm]

Yes, that's what I thought it would yield. Sorry, I don't
know how stretch works. What is wrong with this output?

+++ Micha? Zaj?c [Feb 19 16 09:49 ]:

[1]@jgm Unless I'm doing it wrong then it won't work because
pandoc -f markdown-markdown_in_html_blocks-native_divs -t revealjs

Header

yields

Header

—
Reply to this email directly or [2]view it on GitHub.

References

1. https://github.com/jgm
2. Unable to create stretch images in revealjs slides #1291 (comment)

[Quintasan]

@jgm I am not 100% sure but for stretch to work the image has be direct descendant of section.slide. So in order to get it working the slide should look like this.

<section id="header" class="slide level2">
<h1>Header</h1>
<img src="images/test.jpg" alt="Image" class="stretch" />
</section>

[jgm]

I see. Then for now maybe your best workaround is to add a bit
a javascript that runs before reveal.js and moves img
tags with stretch out of enclosing paragraphs.

+++ Micha? Zaj?c [Feb 19 16 09:57 ]:

[1]@jgm I am not 100% sure but for stretch to work the image has be
direct descendant of section.slide. So in order to get it working the
slide should look like this.

Header

—
Reply to this email directly or [2]view it on GitHub.

References

1. https://github.com/jgm
2. Unable to create stretch images in revealjs slides #1291 (comment)

[Quintasan]

Quite unfortunate but I'll do it like that then. Thanks.