Premier blog pluxml

Bonsoir
Je viens de mettre en ligne un blog pluxml minimaliste, tous les retours, conseils, critiques et avis sont les bienvenus.
J’ai pu faire ce blog grâce à ce forum, merci pour votre aide.
https://www.menuiserie-menplast.fr/blog/

Réponses

  • 8 avril modifié

    Bonjour,

    Il est clair et net, félicitation :)

    Pour mon avis perso, il n'est pas assez large sur un écran de pc, surtout si l'on vient du site principal qui lui prend toute la largeur.
    tu peut peut-être l'élargir aux environs de 1200px et redimensionner ton image de bannière.
    un possible exemple :

        .bg img{
            display:block;border-top:1px solid #ccc; 
            /* ajout dimensions / comportement */
            width:100%;
            max-height:200px;
            object-fit:cover;
        }
    

    Du coup la résolution est peut-être limite :) . Si tu vas de ce coté , regarde https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html si tu souhaites utilisé au moins 2 résolutions pour ton image de bannière.

    Bonne continuation,

    GC

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

  • BB64600BB64600 Member
    8 avril modifié

    Bonjour
    Merci pour ton retour GC, j'ai lu l'article du lien que tu m'as envoyé, j'ai suivi tes conseils :-)
    (J'ai redimensionné le blog en 900px).
    Mais je n'arrive pas à implanter "srcset" sur le blog.
    Ci dessous le code que j'ai bidouillé :-(
    <img src="<?php $plxShow->template(); ?>/img/header-1.jpg" srcset="header-1.jpg 900w,
    header-2.jpg 500w" alt=" />

    J'ai deux images

    • header-1jpg en 900px
    • header-2jpg en 500px

    Si vous avez la solution ou une piste ?
    Merci
    Bonne soirée

  • <img
        src="<?php $plxShow->template(); ?>/img/header-1.jpg"
        srcset="<?php $plxShow->template(); ?>/img/header-2.jpg 500w,
            <?php $plxShow->template(); ?>/img/header-3.jpg 250w"
        alt="Bannière" />
    

    Répéter $plxShow->template() au temps que nécessaire.

    la valeur de "alt" n'est pas à négliger :

    • les personnes mal-voyantes utilisent un lecteur audio qui sait lire un texte
    • Google n'analyse pas encore les images pour savoir ce qu'elles représentent
  • BB64600BB64600 Member

    Merci bazooka07
    Le top :-)
    Une petite question, je n'ai que 2 images header-1.jpg en 900px et header-2.jpg en 500px ...?
    A quoi correspondent les 3 images de ton exemple ?
    header-1.jpg ?
    header-2.jpg 500w (500px ?)
    header-3.jpg 300px (250px ?)
    Faut-il rajouter une troisième photo ?
    Merci
    Bonne soirée

  • Non, il n'y a pas de contrainte sur le nombre de valeurs dans srcset.
    Par contre la plus grande image avec 900px de large me parait un peu courte sur l'écran d'un PC.
    La largeur maxi du corps de la page est de 1250px. Et certains trouvent cela trop petit.

    A propos de srcset :

  • BB64600BB64600 Member
    9 avril modifié

    Bonjour
    Merci
    J'ai lu ces articles, mais je dois être récalcitrant à srcset :-(
    Pour résumer afin de savoir si j'ai bien compris. ( J'utilise 3 images de taille différentes).

    Ton code :
    <img

    1. src="<?php $plxShow->template(); ?>/img/header-1.jpg" / image en 1250 px

    2. srcset="<?php $plxShow->template(); ?>/img/header-2.jpg 500w, / image en 500 px

    3. <?php $plxShow->template(); ?>/img/header-3.jpg 250w" / image en 250px
      alt="Bannière" />

    Puis le navigateur choisit l'image qui lui convient ?
    Comment vérifie tu que la version mobile utilise bien l'image qui lui est destiné ?

    Merci.
    Bonne journée

  • Bonjour,

    Comment vérifie tu que la version mobile utilise bien l'image qui lui est destiné ?

    C'est tout bête, test avec 3 images qui ne se ressemblent pas .

    Il y a https://caniuse.com/?search=srcset qui peut aussi t'aider à savoir si srcset est implémenter sur le navigateur que tu testes.

    Cdt

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

  • BB64600BB64600 Member
    9 avril modifié

    Bonjour
    La tête dans le guidon, sur ce coup j'ai pas trop réfléchi :-)
    Merci gcyrillus

  • BB64600BB64600 Member
    9 avril modifié

    Bonjour
    J’ai installé trois images différentes comme me la conseillé gcyrillus.
    Header 1 / 1200px
    Header 2 / 900 px
    Header 3/ 500px
    Avec le code suivant, j’ai toujours header 1 d’affiché même en mobil
    / <img
    src="<?php $plxShow->template(); ?>/img/header-1.jpg"

    srcset="<?php $plxShow->template(); ?>/img/header-2.jpg 900w,

    <?php $plxShow->template(); ?>/img/header-3.jpg 500w"
    alt="chantier montpellier" /> /
    https://www.menuiserie-menplast.fr/blog/
    Je ne comprends pas ce qui ne vas pas, merci
    Bonne journée

  • 9 avril modifié

    Bonsoir,

    retire l'attribut sizes (que tu as ajouté entre temps) qui ne te sert pas ici , ensuite pour l'image a 500w, peut-être que 640w ou 750w est plus approprié.

    Cdt

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

  • BB64600BB64600 Member

    Bonsoir
    Merci
    J'ai essayé ce que tu ma suggéré, cela ne fonctionne pas.
    Je vais essayé de me documenter un peu plus.
    Bon weekend

  • 9 avril modifié

    re,

    je travaille ce week-end, dispo incertaine

    l'idée etait un code similaire à

    <img 
        src="<?php $plxShow->template(); ?>/img/header-1.jpg" 
        alt="chantier montpellier"      
        srcset="<?php $plxShow->template(); ?>/img/header-2.jpg 900w,
        <?php $plxShow->template(); ?>/img/header-3.jpg 748w"
        width="100%"
    />
    

    en t'assurant que ton cache est bien vidé avant le rechargement ...

    Cdt

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

  • BB64600BB64600 Member
    10 avril modifié

    Bonjour
    Un grand merci, tout fonctionne sur pc :-) (Firefox)
    Pas sur chrome (Pourtant j'ai vidé le cache).
    En mobil cela ne fonctionne pas, essai sur android et iphone (img 900w affichée).

    Bon weekend

  • Bonjour,
    En pied de page, il manque le t à Montpellier...

Connectez-vous ou Inscrivez-vous pour répondre.