Random picture element für den body js

Centershock86

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.

<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>

<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>

usw.

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

Beste Grüße
Markus

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

danielgoehr

Warum soll es denn Javascript sein? Das wäre zwar auch möglich, aber in dem Fall scheint mir ein Shortcode in PHP (zumindest auf den ersten Blick) die bessere Lösung.

Centershock86

Hallo danielgoehr,

klingt für mich erst mal gut. Kennst du ein gutes Plugin um PHP-Shortodes zu integrieren? Nach was würdest du suchen, wenn du den Code unten siehst?

Die Bilder um die es geht, binde ich aktuell so ein:
<picture>
<source media="(min-width:768px)" style="width: 100%; height: 31.25%; max-width: 1920px;" srcset="/wp-models/wp-content/uploads/2022/07/Header-Bilder-SPS-ts-pixabay-4.jpg">
<img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="/wp-models/wp-content/uploads/2022/07/Header-Bilder-SPS-mobile-ts-dana.jpg">
</picture>
.

Beste Grüße
Markus

danielgoehr

Ich meinte tatsächlich eher selbst schreiben (und dann entweder in die functions.php oder als eigenes Plugin einfügen). Das sollte eigentlich mit ein paar Zeilen erledigt sein.

In WordPress lassen sich Shortcodes relativ einfach selbst erstellen.

https://developer.wordpress.org/reference/functions/add_shortcode/

Verwendest du ein Child-Theme?

Centershock86

Ja ich verwende ein Child-Theme.

Habe das ganze jetzt mit einem Plugin umgesetzt, was es möglich macht Widgets als Block auf einer bestimmten Seite zu integrieren (Organic Widget Area Block Plugin). Heißt ich habe den PHP Code als Widget (Code Widget Plugin) erstellt und mit Widget Area integriert.

Allerdings gefällt mir der Code noch nicht wirklich. Das erste Bild wird sehr oft angezeigt, das zweite schon weniger usw. und das vierte Bild wird erst gar nicht angezeigt.

Vielleicht hat Jemand eine Idee wie man das gleichmäßig verteilen kann und das bei einer beliebiger Anzahl der Bilder.

Hier mal der Code, ohne die Bilder selbst. Würde sonst zu unübersichtlich werden.

PHP

<?php
    $divs = array(
    '<div id="divFirst">picture 1</div>',
    '<div id="divFirst">picture 2</div>',
    '<div id="divFirst">picture 3</div>',
    '<div id="divFirst">picture 4</div>'
);
    $randKeys = array_rand($divs, 2);
    echo $divs[$randKeys[0]];
?>

danielgoehr

Eigentlich sollte dein Code wirklich einen zuälligen Key zurückgeben, das heißt, alle Einträge berücksichtigen. Nur die 2 als zweiter Parameter in array_rand() ist in deinem Fall eigentlich überflüssig, weil du ja nur einen Key für dein Vorhaben brauchst und den zweiten ohnehin "ignorierst".

Folgendes sollte reichen:

Code

$randKeys = array_rand($divs);
   echo $divs[$randKeys];

Alternativ ging zum Beispiel auch folgendes (sollte zwar keine grundsätzlich anderen Ergebnisse bringen, wäre aber ein anderer Ansatz):

Code

$divs = shuffle($divs);
   $divs[0];

Oder auch

Code

$randKey = rand(0, count($div));
    $divs[$randKey];

Centershock86

Mega gut, genau so hatte ich mir das vorgestellt!

Besten Dank an Dich!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Random picture element für den body js

Jetzt mitmachen!