Reveal.js: Status of replacing images/text/tables/things in general?

[deisi]

So this has been asked a couple of times, never the less I'm very confused about how to deal with this.

From a user perspective the solution https://github.com/hakimel/reveal.js/issues/745#issuecomment-422507012 from @okyear is very nice, however it doesn't apply to images, because they get placed with there top in the middle of the slide.

There is https://github.com/hakimel/reveal.js/issues/1432#issuecomment-266209218 for @bnjmnt4n . Here the problem is, that if you have parts of your slide that don't vanish, you have to add them to each slide individual, resulting in a lot of redundancy.

There is the most famous answer of https://stackoverflow.com/questions/23608762/replace-image-in-reveal-js
This one works, but is quite verbose. If you want to place a singe image I guess you are fine. Upon placing multiple images, this becomes increasingly difficult to handle, also I'm unable to position the images in the way I'd like to.

I also checked with https://github.com/hakimel/reveal.js/issues/1432#issuecomment-304243678. This one doesn't replace, it just hides one part and reveals the other at a different spot.

I tried a couple more, but all seam to fail at different points of my use cases. So is there any kind of guideline how to deal with this basic quest of replacing things?

Btw its funny how the project is called revealjs and how replace is a pain ;-)

[hakimel]

Judging by the amount of times this has come up it'd make sense to add some built-in styling for it. Using stacked fragments as shown in the Stack Overflow answer is a good approach. If we combine that with some simple built-in styling for stacking multiple elements we should be able to do something like:

<section>
  <div class="fragment-stack">
    <h2 class="fragment">First this</h2>
    <h2 class="fragment">Then this</h2>
  </div>
</section>

And for fixed-size elements like images:

<section>
  <div class="fragment-stack" style="width: 640px; height: 480px;">
    <img class="fragment" width="640" height="480" src="img1.jpg" />
    <img class="fragment" width="640" height="480" src="img2.jpg" />
  </div>
</section>

[deisi]

Is there any change this gets implemented?

[mitchnegus]

@deisi I'm wondering the same. I'd be happy to look into building something along these lines, but it might not be ready right away (I've got a few major deadlines in the next couple weeks). I think some form of "instant replacement" would be fantastic and would fix something that I find to be one of the most frustrating pieces of an otherwise brilliant tool.

[hakimel]

reveal.js 4.0 adds a new r-stack class for stacking multiple elements on top of each other. Paired with fragments that means you can now replace elements in a stack with:

<div class="r-stack">
  <img class="fragment current-visible" src="https://placekitten.com/450/300" width="450" height="300">
  <img class="fragment current-visible" src="https://placekitten.com/300/450" width="300" height="450">
  <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
</div>

More info and live examples in the docs: https://revealjs.com/layout/#stack
Answer on StackOverflow: https://stackoverflow.com/a/62072854/1601643

r-hstack and r-vstack are coming 4.1 and will let you create columns or rows of elements.