Random picture element für den body

[centershock2302]

Hallo zusammen,

meine JavaScript-Kenntnisse sind leider nicht die besten und ich habe schon eine ganze Weile nach einer Lösung gesucht, nichts passendes gefunden.
Ich möchte in Wordpress ein Script einbinden was mir verschiedene Bilder als picture element zufällig darstellt. Für die Einbindung von Javascript im Body, habe ich hoffentlich schon das passende Plugin gefunden ...

Hier mal ein Beispiel anhand von drei Fotos, die zufällig angezeigt werden sollen. Ich verwende zwei verschiedene Fotos, das zweite ist für Mobile optimiert.

<!-- random Foto 1 -->
<picture>
<source media="(min-width:768px)" style="width: 100%; height: 31.25%; max-width: 1920px;" srcset="/uploads/2022/07/Header-Bild-SPS-desktop-1.jpg">
<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="/uploads/2022/07/Header-Bild-SPS-mobile-1.jpg">
</picture>


<!-- random Foto 2 -->
<picture>
<source media="(min-width:768px)" style="width: 100%; height: 31.25%; max-width: 1920px;" srcset="/uploads/2022/07/Header-Bild-SPS-desktop-2.jpg">
<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="/uploads/2022/07/Header-Bild-SPS-mobile-2.jpg">
</picture>


<!-- random Foto 3 -->
<picture>
<source media="(min-width:768px)" style="width: 100%; height: 31.25%; max-width: 1920px;" srcset="/uploads/2022/07/Header-Bild-SPS-desktop-3.jpg">
<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="/uploads/2022/07/Header-Bild-SPS-mobile-3.jpg">
</picture>

Wäre super, wenn einer weiß, wie man das umsetzen könnte, bzw. mir einen Link schicken würde!

Beste Grüße
Markus

---

Das hatte ich gefunden und dachte es könnte funktionierten. Leider nein. Oder liegt es vielleicht am Plugin?

<script type="text/javascript">
var images = [],
index = 0;
images[0] = "<picture>
<source media="(min-width:768px)" style="width: 100%; height: 31.25%; max-width: 1920px;" srcset="/uploads/2022/07/Header-Bilder-SPS-ts-01.jpg">
<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="/uploads/2022/07/Header-Bilder-SPS-mobile-ts-01.jpg">
</picture>";
images[1] = "<picture>
<source media="(min-width:768px)" style="width: 100%; height: 31.25%; max-width: 1920px;" srcset="/uploads/2022/07/Header-Bilder-SPS-ts-02.jpg">
<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="/uploads/2022/07/Header-Bilder-SPS-mobile-ts-02.jpg">
</picture>";
images[2] = "<picture>
<source media="(min-width:768px)" style="width: 100%; height: 31.25%; max-width: 1920px;" srcset="/uploads/2022/07/Header-Bilder-SPS-ts-03.jpg">
<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="/uploads/2022/07/Header-Bilder-SPS-mobile-ts-03.jpg">
</picture>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done
</script>