Changer les images de l'unslider si resolution > 1080

Changer les images de l'unslider si resolution > 1080 [Réglé]

Changer les images du carrousel si la résolution de l'écran est supérieur à 1080 Support des Thèmes

Izutox Membre non connecté

Booster Fuzil

Le 04/01/2023 à 23h54

Booster Fuzil
Voir le profil du membre Izutox
Inscrit le : 22/01/2020
Groupes :

Bonjour, et meilleurs vœux 👋 !

J'utilise actuellement le thème Gaming Blue avec la version 5.2.12 de PHPBoost, que j'apprécie grandement.
Étant donné la démocratisation des écrans aux résolutions 1440 et 2160 (pour les plus fortunés

), j'aimerais faire en sorte que les images du carrousel changent en allant chercher un fichier plus adapté au ratio de l'écran quand la résolution de l'internaute dépasse les 1920 pixels de largeur.

Caché :

Ligne 34 à 43 du fichier body.tpl

Code TEXT :

    <!-- SLIDER -->
        <div class="unslider">
            <ul>
                <li class="img-shadow"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/1.jpg"></li>
                <li class="img-shadow"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/2.jpg"></li>
                <li class="img-shadow"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/3.jpg"></li>
                <li class="img-shadow"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/4.jpg"></li>
            </ul>
        </div>
    <!-- SLIDER FIN -->

Aprioris, je peux utiliser le fichier unslider.css du thème (que j'avais précédemment modifié pour modifier l'affichage sur mobile), mais les images sont chargées par le fichier body.tpl. Je ne sais pas trop comment faire le lien entre le .css et le .tpl étant donné que ce dernier ne semble puisse avoir de condition.

Sauriez comment je pourrais procéder ?

Édité par Izutox Le 04/01/2023 à 23h59

babsolune Membre non connecté

Equipe Développement Administrateur

Le 05/01/2023 à 07h03

#168231

Administrateur
Voir le profil du membre babsolune
Inscrit le : 16/05/2008
Site internet
Groupes :
Equipe Développement

plop

tu peux utiliser la balise <picture/> avec plusieurs sources différentes par image.

Code HTML :

<div class="unslider">
    <ul>
        <li class="img-shadow">
            <picture>
                <source media="(max-width: 1440px)" srcset="{PATH_TO_ROOT}/templates/{THEME}/images/1.jpg" alt="plop">
                <source media="(min-width: 1441px) and (max-width: 2160px)" srcset="{PATH_TO_ROOT}/templates/{THEME}/images/1-big.jpg" alt="plop">
                <source media="(min-width: 2161px)" srcset="{PATH_TO_ROOT}/templates/{THEME}/images/1-bigger.jpg" alt="plop">
                <img src="{PATH_TO_ROOT}/templates/{THEME}/images/1.jpg" alt="plop">
            </picture>
        </li>
        ....

Il faut ensuite ajouter les images pour les différents écrans dans le dossier ciblé

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

Izutox Membre non connecté

Booster Fuzil

Le 05/01/2023 à 20h13

#168234

Booster Fuzil
Voir le profil du membre Izutox
Inscrit le : 22/01/2020
Groupes :

Merci pour ta réponse

J'ai juste eu à modifier un peu le code pour que le carrousel puisse fonctionner, je le mets ci-dessous si ça peut resservir un jour à quelqu'un.

Code HTML :

<div class="unslider">
    <ul class="slider">
        <li class="img-shadow">
            <picture>
                <source media="(max-width: 1921px)" srcset="{PATH_TO_ROOT}/templates/{THEME}/images/1.jpg" alt="1_1921p">
                <source media="(max-width: 2561px)" srcset="{PATH_TO_ROOT}/templates/{THEME}/images/1_blur.jpg" alt="1_1441p">
                <img src="{PATH_TO_ROOT}/templates/{THEME}/images/1.jpg" alt="default">
            </picture>
        </li>
        <li class="img-shadow">
            <picture>
                <source media="(max-width: 1921px)" srcset="{PATH_TO_ROOT}/templates/{THEME}/images/2.jpg" alt="2_1921p">
                <source media="(max-width: 2561px)" srcset="{PATH_TO_ROOT}/templates/{THEME}/images/2_blur.jpg" alt="2_1441p">
                <img src="{PATH_TO_ROOT}/templates/{THEME}/images/2.jpg" alt="default">
            </picture>
        </li>
    </ul>
</div>

Support des Thèmes

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie