Réduire format image sur une page blog

Bonjour
J'ai réussi (avec une extension) a avoir des images qui soient responsives.
Néanmoins, il y a un cas que je n'arrive pas à résoudre.
Sur une page blog, il est important (ergonomiquement parlant?!) que la hauteur d'une image soit limitées pour éviter des décalages ... tout en ne déformant pas l'image

Voir l'article avec image sur la page https://joom41test.88h.ovh/
En essayant:

height: 300px!important;

Cela déforme l'image

j'ai essayé aussi

object-fit: cover;

mais pas sûr d'avoir bien compris ce que cela fait

Salut,

HDcms a écrit :
J'ai réussi (avec une extension) a avoir des images qui soient responsives.

Une extension uniquement pour faire des images responsive ou ca fait autre chose ?

HDcms a écrit :
que la hauteur d'une image soit limitées pour éviter des décalages ... tout en ne déformant pas l'image

Comme avec max-height ?

HDcms a écrit :
Voir l'article avec image sur la page https://joom41test.88h.ovh/
En essayant:

height: 300px!important;

Cela déforme l'image

n'oublie pas de mettre une width: auto;

Bonjour
Merci pour ces suggestions.
L'extension ne s'occuper à priori que de celà.
J'arrive à pointer sur l'image de l'article https://joom41test.88h.ovh/index.php/article-avec-image
mais ce n'est pas ce que je veux
Je souhaite pouvoir "standardiser" les tailles sur la page blog.
j'essaie pour cela de trouver un class spécifique au dessus de l'image mais cela ne fonctionne pas

.div.com-content-category-blog__items img {
  max-height: 30px!important;
  width: auto;
  object-fit: cover;
}

Qu'est-ce que tu veux dire par "standardiser" ?
J'ai du mal a cerner ce que tu veux faire. Pour moi il y a deux possibilités :

- soit tu donne une max-width et max-height a tes images et elle prendron la place qui leur faut en gardant leur proportions
- soit tu défini une taille d'image précise genre 200px par 300px et là :
-- soit ton image est déformée normal
-- soit ton image est rognée. et la :
--- soit tu la passe en background-image
--- soit tu joue avec object-fit: cover;

j'ai l'impression que c'est sur la dernière que tu veux aller (le "hauteur d'une image soit limitées" m'a embrouillé au début).

Mets une height sur le <p> juste au dessus de l'image et sur l'image :

height: 100%;
width: 100%;
object-fit: cover;

Modifié par _laurent (21 Feb 2022 - 14:39)

Ce que j'appelle "standardiser" c'est le fait d'avoir à peu près la même hauteur dans la page blog des différentes vignettes. Les vidéos sont "standardisés" pas besoin d'y retoucher, le problème est avec l'image où je dois avoir une image ayant une hauteur proche de celle d'une vidéo ou fichier pdf, tout en ne la déformant pas (à cause de la largeur).
Je ne peux pas intervenir sur le "p" au-dessus de l'image, mais sur une class qui est généré uniquement sur la page blog https://joom41test.88h.ovh/ , mais pas la page article https://joom41test.88h.ovh/index.php/article-avec-image
Après je me demande à quoi sert "object-fit: cover;" et si cela sert vraiment dans mon cas ?
vraiment pas sûr !

HDcms a écrit :
Je ne peux pas intervenir sur le "p" au-dessus de l'image, mais sur une class qui est généré uniquement sur la page blog https://joom41test.88h.ovh/ , mais pas la page article https://joom41test.88h.ovh/index.php/article-avec-image

Pourquoi tu ne peux pas intervenir sur le p ?

.com-content-category-blog__item blog-item p {
   hieght: 200px;
}

HDcms a écrit :
Après je me demande à quoi sert "object-fit: cover;" et si cela sert vraiment dans mon cas ? vraiment pas sûr !

Bah suffit de lire la doc et de regarder l'exemple.

mozilla a écrit :
La propriété CSS object-fit définit la façon dont le contenu d'un élément remplacé (<img> ou <video> par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
Donc en gros faire rentrer une image dans un un conteneur sans la déformer (mais en la rognant pour le "cover").

Après si je suis encore a coté de la plaque je veux bien une maquette de ce que tu aimerai comme résultat ca me guidera...

Ah ok pour le p, je croyais qu'il fallait mettre un class dedans.
merci pour l'info sur l'object-fit, cela fonctionne donc sur le container parent ? c'est ce que je ne compenais pas !
Voici ce que j'ai mis. Cela ne fonctionne pas mais en vidant le cache
.com-content-category-blog__item blog-item p {
max-height: 30px!important;
width: auto;
object-fit: cover;
}

L'image ci-dessous de la page blog. L'idée est d'avoir une image (la fille) qui soit toujours responsive selon les écrans, tout en éliminant le blanc sous la vidéo de gauche.
Modifié par HDcms (21 Feb 2022 - 16:12)

HDcms a écrit :
Ah ok pour le p, je croyais qu'il fallait mettre un class dedans.

Bah pas plus que quand tu tapais sur l'image avec ton sélecteur

.div.com-content-category-blog__items img 

C'est le même principe

HDcms a écrit :
merci pour l'info sur l'object-fit, cela fonctionne donc sur le container parent ? c'est ce que je ne compenais pas !

Non ca fonctionne sur l'image.

_laurent a écrit :
Mets une height sur le <p> juste au dessus de l'image et sur l'image :
height: 100%;
width: 100%;
object-fit: cover;

si le parent n'a pas de hauteur ca ne vas pas t'arranger ! Il faut donner au p une hauteur et dire à l'image "maintenant tu prend toute la place dispo".

HDcms a écrit :
L'image ci-dessous de la page blog. L'idée est d'avoir une image (la fille) qui soit toujours responsive selon les écrans, tout en éliminant le blanc sous la vidéo de gauche.

T'as tu louper le dernier bouton "insérer l'image" apres l'avoir uploadé
Je pense que je vois ce que tu veux dire mais ta phrase "L'idée est d'avoir une image (la fille) qui soit toujours responsive selon les écrans" veut pas dire grand chose haha

Effectivement, je n'ai pas fais gaffe au message "La taille du fichier excède le maximum autorisé" et pourtant je réduis à 55 ko !!

J'ai fais plein d'essai sans arriver à modifier l'affichage de l'image sur la page blog alors que j'arrive à le faire sur la page article mentionnée

Je prends la ba ba avec

 p {
border:10px dotted black!important;
/* height: 30px!important;*/
}

Aucun effet alors que je vois la modif sur la page article.
Je suis perdu !


Modifié par HDcms (21 Feb 2022 - 16:35)

HDcms a écrit :

 p {
border:10px dotted black!important;
/* height: 30px!important;*/
}

Aucun effet alors que je vois la modif sur la page article.

bah ca marche bien chez moi. Ou est-ce que tu le rajoutes ce code ? Tu l'as mis en ligne ?

Je ne comprends plus rien.
Est-ce qu'on parle de la même chose.
Le code mentionné fonctionne très bien sur https://joom41test.88h.ovh/index.php/article-avec-image mais pas du tout sur https://joom41test.88h.ovh/
Hors je veux justement atteindre l'image sur la partie blog de la page accueil et pas l'équivalent sur la page article !!

Alors je ne sais pas comment tu dev ça, mais ton CSS n'est chargé que sur la page de détail. Il faut mettre ton CSS soit dans une partie globale à tout ton site, soit dans le css lié à ta page d'accueil (et non à ta page de détail)

J'étais entrain de réfléchir à ça et effectivement j'avai fais une erreur bête d'affectation du css.
Ouf j'ai peu reprendre mes essais en pointant bien sur le bon élément de l'image uniquement sur la page blog. Un peu galéré, un peu compris. J'ai mis:

.blog-item p{
max-height: 200px!important;
}

.blog-item img {
border:10px dotted black!important;
width: 100%;
}

Questions subsidiaires
1/ serait-il possible d'avoir (sans déformation bien sûr) une plus grande partie du corps de cette femme dans le container avec la limite max de la hauteur?
2/ effet de bord, je touche aussi le pdf avec le "p". Bon pas très grave, je peux vivre avec car pas facile de toucher l'image sans toucher la vignette du pdf ?

Salut !

Alors avant tout, si ta prod est a jour là :
- tu as mis un max-height et non un height sur le <p>
- il n'y a pas de object-fit sur l'image
- il n'y a pas de height: 100% sur l'image
- tu peux virer les !important ils ne servent a rien

Ensuite

1/ si tu lis la doc (je te jure que tu devrais tester y'a beaucoup de réponse ! ) il y a marqué encadré en bleu :

mozilla a écrit :
Note : Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété object-position.

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
et t'as juste a cliquer sur le lien pour arriver à https://developer.mozilla.org/fr/docs/Web/CSS/object-position
MAIS par défaut il est au centre. Si la tu ne vois que la tete c'est que le object-fit n'est pas actif. Si tu reprends point par point ma liste au dessus ca devrait le centrer naturellement sans toucher à la position.

2/ effectivement, comme il est aussi dans un <p>. Dans un soucis d'uniformisation tu ne veux pas que le PDF ait la même taille que les images et les vidéos ? Sinon il faut que tu trouves le moyen de différencier tes posts en indiquant si c'est un post image, un post video ou un post pdf dans une classe par exemple.

HDcms a écrit :
Je ne suis pas trop l'actu CSS, mais je me demande s'il n'y aurait pas la possibilité maintenant ? de mettre des règles ? faire des test ?
Est-ce qu'il serait possible (sans trop complexifier) de mettre un height sur la balise "p" uniquement si "img" est en dessous ?

.blog-item p [Si ... ]{

Si, c'est le selecteur :has, enfin c'est ce qui s'en rapproche le plus. tout le monde attend un truc comme ça mais pour le moment il n'est pas prêt (le support est quasi nul donc il va falloir patienter encore un peu)
https://developer.mozilla.org/fr/docs/Web/CSS/:has

En CSS pas possible encore mais en Js ca peut se bricoler. Mais a mon avis ca resterait plus simple de le gérer par le CMS... à voir donc..

HDcms a écrit :
Merci en tout les cas pour ce soutien éclairé qui m'a permis de résoudre ce problème principal qui me gênait depuis longtemps.

Avec plaisir
Modifié par _laurent (22 Feb 2022 - 12:02)

Ok dommage que l'on ne puisse pas modifier l'élément parent. J'ai vu que cela fait longtemps que cette proposition existe et répond à un besoin (cf résultats moteur de recherche)

Après c'est un "faux" problème car normalement, en pleine maitrise du code, il suffit de différencier les parents avec une classe au moment de la construction du DOM (comme on disait plus haut) et ne pas gérer ça uniquement en CSS. C'est une impasse pour ceux qui ne maitrise que le CSS et ne touche pas au reste code.

Bonne journée

Bonjour
De retour, car je n'arrive pas à finaliser le transfert de mon code qui fonctionnait sur le site de test.
Je pense que cela vient du fait que vu le nombre de l'introduction de sous-menu (car le nbr d'items de menu va poser problème)
Fatigue et pas très compétent là-dessus, je me demande aussi si ce que j'appelais test est aussi possible sur cet autre problème.
1/ icone devrait être différent selon la catégorie/menu
L'affichage de l'icone fonctionne bien sur https://cochanger.eu/media-web mais en fait cela n'a pas d'intérêt sur une liste d'articles qui font tous partie de la même catégorie.
L'affichage de l'icone (et le soulignement en orange) ne fonctionne pas sur https://cochanger.eu/organisations ou sur la page accueil du site
Le code est

/* mise en page titre blog avec icone */
h2 {
  border-bottom: 2px solid red;
  margin-left: 40px;
}
h2::before {
  font-family: "Font Awesome 5 Free";
  content: "\f133";
  font-weight: 400;
  display: inline-block;
  width: 40px;
  text-align: center;
  margin-left: -40px;
}

2/ limiter l'affichage d'une image
dans l'échange on était arrivé au code

/* centrage vignette hauteur limitée  */
.blog-item p{
height: 280px;
}
 .article-body img {
height: 100%;
width: 100%;
object-fit: cover;
}

Cela n'est pas pris en compte pour la vignette de "Mouvement français des Réseaux d'Échanges Réciproques de Savoirs"

3/ image à la fin
Vraiment moins important et non abordé précédement mais bon

Re

2/ je suis arrivé a quelque chose
J'ai du mettre !important sinon je n'y arriveai pas

div.item-content> img{
height: 280px!important;
}

J'ai enlevé :

div.com-content-category-blog__item .item-content img  {
height: 100%;
width: 100%;
object-fit: cover;
}

Étonnant car il me semblait que c'était pour éviter de déformer l'image. Est-ce que je dois le remettre dans div.item-content> img?

1/ C'est ma question principale, mais peut-être faut-il créer un nouveau fil ?
Je m'aperçois que l'url de la catégorie en haut de l'encadre de chaque article mentionne les termes "association-collectif", "lieu-avec-activites" ... ce qui pourrait peut-être permettre d'identifier la catégorie pour utiliser la bonne icône ?
Modifié par HDcms (22 Jul 2022 - 19:10)