With ioslides, place css class on the <slide> rather than the <article>

Publishing Your Results
1

Is there any way to place a class on the <slide> element rather than the <article> element?

If I use the rmarkdown method of putting the class after the slide header:

## Slide Title {.slide_class}

then the resulting HTML looks like this:

<slide>
<hgroup>
<h2>Slide Title</h2>
</hgroup>
<article id="Slide Title" class="slide_class">
... bunch of stuff
</article>
</slide>

The reason I want to place the css class on <slide> is that I'm trying to use ioslides to emulate a PowerPoint format that I need to use for a talk at a convention, and I need to include a background-image in the css that covers the whole slide. If the background-image is placed on the <article> tag, then it doesn't cover the whole slide. I cannot just apply the background-image to the <slide> tag generally, because different types of slides need to use different background images.

Help!

2

Hey @amos! This isn't a direct answer to your question, unfortunately, but how married are you to using ioslides? When Yihui talks about some of his reasons for preferring remark.js and xaringan over competing RMarkdown slide formats, he mentions customisability and specifically names a workaround for your problem: including a background-image on a slide.

https://www.jaredlander.com/2017/07/fullscreen-background-images-in-ioslides-presentations/

So it's possible, according to this workaround, but it involves dropping JavaScript into your slides (and bringing jQuery in), which is pretty frustrating.

Having played with xaringan a little, I think you'll find it much better when you want to heavily customise the slides with CSS.

In particular, with xaringan you can apply CSS classes or properties directly in the RMarkdown like:

---
background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg)
background-position: 50% 50%
class: center, bottom, inverse

# You only live once!
---

These styles aren't quite applied to the top-level slide element (remark.js uses CSS transform to scale your xaringan slides according to window size, so there are some wrapper parents), but it's still applied above the slide content level, so it should suit your requirements :slight_smile:

5 Likes
3

You may already know but I mentioned it anyway: Last version of pandoc and now Rmarkdown allows you to render to Powerpoint presentation format. This could be the better way to emulate powerpoint. :wink:

and look for powerpoint in Pandoc documentation

About ioslide, you can try to customise the html template

However, ioslide customisation is limited compared to other format (like xaringan) and not everything is in the html template, the rendered slide are in LUA filter by pandoc. However, it is html and you may try to use some JS to add class to some element based on content maybe. Not a classic customisation easy to do. :thinking:

1 Like
4

But with a PowerPoint output from pandoc, I didn’t think there was any way to specify an existing template or which master slide you want applied to particular slides. You have to generate, look at the styles in the output, and you have very limited options for changing them, then you regenerate. Is that wrong?

5

Yes you can use a template potx with pandoc. It if often easier to generate default template and modify it. You need to have template slides and also styles, (even custom) that you can applies to inline or block text.

Using pandoc markdown feature, you can customise well the presentation in the limit of PowerPoint. You won't have the power of html+css by you can do a lot already.

Give a look at the pandoc documentation.

6

You can use a reference document with the PowerPoint output format, but I'm not super clear to what degree it's used. The documentation refers to the 'styles', which sounds less line the slide masters being used and more like the text styles. You might need to have a play with this and see how well it works :slightly_smiling_face:

7

Yeah that’s what I thought as well. Maybe cderv has a link to a doc page?

1 Like
8

I already put what I know in previous post. You have the chapter in the Definitive Guide and more importantly the Pandoc Guide for knowing markdown features and pandoc presentation features. Did not find other for now.

9

I ended-up using Xaringan. Which is very nice (although I wish it used the same slide markdown as ioslides... it kinda sucks that different markdown formats break the rmarkdown feature of being able to output to multiple formats from the same document.) .

Thanks all!

2 Likes