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>

[admin]

Da du WordPress nutzt, wäre es besser, wenn du in den WordPress Forum nachfragst .
Ein Script zu erstellen, was zufällig Bilder anzeigt wäre kein Problem , doch es muss ja auch bei WordPress laufen. Das laufen wäre auch kein Problem , doch WP hat so viele Plugins die laufen und funktionieren , da ist sicher was dabei was genau das macht, was du möchtest.
Falls du da nicht weite kommst, dann sag Bescheid , dann mache ich dir ein Beispiel fertig.
Kurze Beschreibung, wie ich das Script erstellen würde.
1. Ein Element erstellen " zb <div id="zufallbild"></div>" wo nachher die Bilder angezeigt werden sollen
1. ein Array erstellen mit den Bilder Namen , z. B. bild1.png,bild2.png usw.
2. Anzahl der Array lange ermitteln,
3. ein Code erstellen der ein zufälliges Bild aus dem Array ermittelt , bzw. 2-mal weil du zwei Bilder haben willst.
4. Mit createElement das img Element erstellen und beide Bilder in den HTML Code einfügen

[centershock2302]

Hallo,

dann frage ich nochmal im WP-Forum nach. Und ich muss zugeben dort JavaScript einzubinden ist nicht so easy.
Klingt aber erst mal nach einer nicht ganz so komplizierten Geschichte mit dem Random-Script.

Besten Dank schon mal für deinen Post!
Markus

[admin]

So ein Script zu erstellen ist kein Problem , doch wie man das bei WP einbaut weiß ich nicht . Falls du im WP Forum nicht weiter kommst dann meld dich, .
Das Erstellen des Skripts ist nicht das Problem und das Einbauen bekommen wir auch schon hin