Premier blog pluxml

BB64600

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/

gcyrillus-nomade

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

BB64600

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

bazooka07

<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

BB64600

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

bazooka07

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 :

• https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
• https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

BB64600

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

gcyrillus-nomade

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

BB64600

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

BB64600

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

gcyrillus-nomade

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

BB64600

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

gcyrillus-nomade

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

BB64600

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

chantoine

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