Andere images in mobiele versie vs. desktop versie

  • zekerzelf

    (@zekerzelf)


    6 jaren, 6 maanden geleden

    Op mijn website staan een aantal vierkante images naast elkaar. In een mobiele browser ziet dit er niet mooi uit en neemt dit veel ruimte in beslag.

    Ik zou graag hebben dat, zodra iemand de website op een mobieltje bekijkt, deze andere images gebruikt (namelijk langwerpige).

    Ik zoek dus een manier / plug-in die, op basis van de browser, andere images laat zien (het gaat dus niet over de resolutie, maar echt over een ander formaat image).

    Ik heb de juiste oplossing nog niet gevonden. Kent iemand een oplossing?

    Alvast bedankt,

    Remko

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • 5a5k1a

    (@5a5k1a)

    6 jaren, 5 maanden geleden

    Hi Remko,

    De manier om dit door middel van code op te lossen, kun je vinden in WordPress wp_is_mobile().

    // Use the build-in function if WP
if( wp_is_mobile() ) {
    the_post_thumbnail_url('featured-image-mobile'); // On mobile
} else {
    the_post_thumbnail_url('featured-image');
}
    • Deze reactie is gewijzigd 6 jaren, 5 maanden geleden door 5a5k1a. Reden: put code within code tags
    Ruurd de Wind

    (@geoclaps)

    6 jaren, 5 maanden geleden

    Wil je niet liever 2 afbeeldingen naast elkaar op mobiel? Je pagina wordt anders erg lang.

    Dus zoiets: https://jsfiddle.net/ruurd/n33oosb5/14/

    Maak het venster rechts onderin maar eens smaller. Zoiets zou je ook kunnen doen middels css m.b.v. zogeheten media-queries.

    Mocht je het alsnog wel willen dan zou je eventueel de blokken waarin de afbeelding kunnen staan, voorzien van een achtergrond die je met behulp van bovenstaande methode kunt voorzien van een afbeelding en formaat op mobiel (en/of desktop).

    Ruurd de Wind

    (@geoclaps)

    6 jaren, 5 maanden geleden

    Ik zie trouwens nu een fout in mijn css verwijzing :$

    https://jsfiddle.net/ruurd/n33oosb5/16/

    Dit zou het moeten verhelpen.

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Andere images in mobiele versie vs. desktop versie’ is gesloten voor nieuwe reacties.