Add wrapper element in markup

[silentbugs]

I'm trying to add an element between pswp__zoom-wrap and pswp__img elements, so that I can style it and position it since styling/positioning the pswp__zoom-wrap element seems to break some things.

Is there some easy way to do this without providing an entirely custom markup?

---

My approach (possibly bad):

I tried to use loadComplete event and append all elements (currently just the pswp__img element) of slide.container to another element, and then append that element to slide.container.

function wrapElement(target, wrapper) {
	while (target.hasChildNodes()) {
		wrapper.appendChild(target.firstChild);
	}

	return target.appendChild(wrapper);
}

const gallery = new PhotoSwipeLightbox(options);

gallery.on('loadComplete', ({ content, slide }) => {
	// append an extra element between pswp__zoom-wrap and content
	const wrapper = document.createElement('div');
	wrapper.classList.add('pswp__slide-wrapper');

	const wrapped = wrapElement(slide.container, wrapper);
	slide.container.appendChild(wrapped);
});

This seems to work fine within the callback function of the loadComplete event, but as soon as photoswipe fully loads, the child element of pswp__slide-wrapper becomes its sibling.

During loadComplete:

<div class="pswp__zoom-wrap" style="transform-origin: 0px 0px 0px; transform: translate3d(398px, 60px, 0px) scale3d(1, 1, 1);">
	<div class="pswp__slide-wrapper">
		<img class="pswp__img pswp__img--placeholder" decoding="async" alt="" src="somefile.jpg" role="presentation" aria-hiden="true" style="width: 250px; height: auto; transform-origin: 0px 0px 0px; transform: translate3d(0px, 0px, 0px) scale3d(3.156, 3.156, 1);">
	</div>
</div>

After loadComplete:

<div class="pswp__zoom-wrap" style="transform-origin: 0px 0px 0px; transform: translate3d(398px, 60px, 0px) scale3d(1, 1, 1);">
	<div class="pswp__slide-wrapper"></div>
	<img class="pswp__img" style="width: 789px; height: 444px;" src="somefile.jpg" alt="">
</div>

[dimsemenov]

You'll need to either entirely override the content, as shown here https://photoswipe.com/custom-content/

Or you can preventDefault contentAppendImage event https://github.com/dimsemenov/PhotoSwipe/blob/master/src/js/slide/content.js#L495 and append it yourself (and contentRemove as well).