Bigimg displays as empty div with Javascript disabled

[WJBarnes456]

I noticed that, if Javascript is disabled, the bigimg on the home page of a website using this theme doesn't display, instead showing a blank box.

As an example, using the exampleSite with the triangle image commented out in config.toml and disabling Javascript using Noscript:

Javascript disabled (also note the empty description box on the right hand side): Javascript enabled:

This is because the theme only populates a data div with the image data, not any elements on the page. The theme then relies on the ~Photoswipe~ (correction, main.js) JS dependency to populate the image, which can't run and has no fall-back in the case that Javascript is disabled in the user's browser.

[WJBarnes456]

On the fork of this theme I use on my website, I've applied a small patch to fix this by statically grabbing the source and description of the first image in bigimg and populating the page source with that, though it isn't at full feature-parity with the JS version, as it only displays the first image, and doesn't iterate through them at all.

I'm happy to submit this as a PR to this repo: I've tested it and it doesn't regress in the case where Javascript is enabled, still allowing an image other than the first one to be selected.

[WJBarnes456]

I've also just noticed that the base main.js code supports a couple of further features beyond just setting the image and description: setting background-position when the position attribute is set, and building Markdown links from the src attribute (although I'm not convinced the markdown parsing regex is correct, as it doesn't handle nested brackets)

EDIT: though we don't actually save position to the HTML, so that code path doesn't work even with JS enabled here... maybe a second issue https://github.com/halogenica/beautifulhugo/issues/457

[WJBarnes456]

Closed by https://github.com/halogenica/beautifulhugo/commit/f0ff519ec72aaef0a4e4511c3e1099def1740d16