Slides get jumbled

[Wolfr]

When you extract a presentation, sometimes the slides get jumbled.

It's unclear when this starts to happen, but it's usually when the presentation gets a bit more complex.

In this issue I will log more details and a workaround.

[Wolfr]

Keynote Extractor user Roel Van Gils found a workaround to fix said bug with a piece of jQuery.

The bug should obviously be fixed in the source code, but you can apply this code to the output to fix it. Then you should resave the generated HTML.

$(function() {
  $('img').each(function(index) {
    var img = this;
    var order = (index+1).toString().padStart(3, "0");
    img.src="image/image."+order+".jpg";
    img.srcset="images/images."+order+"-hg.jpg 1200w, images/images."+order+"-lg.jpg 984w, images/images."+order+"-md.jpg 728w, images/images."+order+"-sm.jpg 375w";
  })
});

The trick is that in the generated HTML the image sources are wrong, but the images in the /images folder do have the right order.

[BillTribble]

For anyone trying to suss this out - I got it working by:

1. exporting as 'responsive' and opening in Chrome
2. running this TWICE in the console: https://blog.wplauncher.com/run-jquery-in-chrome-console/
3. running the above code

[BillTribble]

Only trouble is, Chrome wouldn't let me save the altered code. Any way I can do this?

[Wolfr]

You can take the index.html of your exported slides, add a reference to jQuery (on a CDN or local) in the head section, then run the code, then copy the changed source. It is a hassle but I've done that and it works.

[BillTribble]

OK thanks Wolfr - run the code in browser or where? That's the tricky bit for me. I can see a 'fixed' version in Chrome but it won't let me save it! ><

…

On Sun, Apr 7, 2019 at 5:31 PM Wolfr ***@***.***> wrote: You can take the index.html of your exported slides, add a reference to jQuery (on a CDN or local) in the head section, then run the code, then copy the changed source. It is a hassle but I've done that and it works. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#6 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFoBfPn4i6tIbrwUG_tHb-tRNASt0RaVks5veh1cgaJpZM4V5G-d> .

[BillTribble]

(when I 'inspect source' in Chrome, it doesn't show the fixed version)

[BillTribble]

No worries - got it by copying code from Inspector!
Many thanks.

[connerxyz]

In short: past this just before the closing body tag in index.html.

<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>
<script>
  $(function() {
  $('img').each(function(index) {
    var img = this;
    var order = (index+1).toString().padStart(3, "0");
    img.src="image/image."+order+".jpg";
    img.srcset="images/images."+order+"-hg.jpg 1200w, images/images."+order+"-lg.jpg 984w, images/images."+order+"-md.jpg 728w, images/images."+order+"-sm.jpg 375w";
  })
});
</script>

[johnwry]

@connerxyz thanks so much! Super easy patch until a solution comes out.

[Wolfr]

@johnwry I'm afraid this bug has existed for a while and a patch is unlikely to come out, since development is discontinued. There is some reasoning in this blog post here.