1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Random picture element für den body js

Dieses Thema im Forum "Allgemeines" wurde erstellt von Centershock86, 19. Juli 2022.

  1. Centershock86

    Centershock86 Well-Known Member

    Registriert seit:
    7. Januar 2022
    Beiträge:
    45
    Zustimmungen:
    1
    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>

    usw.

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

    Beste Grüße
    Markus
     
    #1 Centershock86, 19. Juli 2022
  2. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    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.
     
    #2 danielgoehr, 20. Juli 2022
  3. Centershock86

    Centershock86 Well-Known Member

    Registriert seit:
    7. Januar 2022
    Beiträge:
    45
    Zustimmungen:
    1
    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
     
    #3 Centershock86, 20. Juli 2022
  4. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    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?
     
    #4 danielgoehr, 21. Juli 2022
  5. Centershock86

    Centershock86 Well-Known Member

    Registriert seit:
    7. Januar 2022
    Beiträge:
    45
    Zustimmungen:
    1
    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.

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #5 Centershock86, 21. Juli 2022
  6. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Alternativ ging zum Beispiel auch folgendes (sollte zwar keine grundsätzlich anderen Ergebnisse bringen, wäre aber ein anderer Ansatz):

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Oder auch


    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    #6 danielgoehr, 21. Juli 2022
    Centershock86 gefällt das.
  7. Centershock86

    Centershock86 Well-Known Member

    Registriert seit:
    7. Januar 2022
    Beiträge:
    45
    Zustimmungen:
    1
    Mega gut, genau so hatte ich mir das vorgestellt!

    Besten Dank an Dich!
     
    #7 Centershock86, 21. Juli 2022
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden