Follow


Je sèche sur un pb de css pour obtenir une grille mansonry correcte sur ma galerie, pour le moment elle me coupe mes photos horizontale quand une verticale est à côté : cf. nft.photo/montagne/.
J’ai testé plein de trucs avec css de 10 tutos différents, en vain, impossible d’avoir le résultat que je recherche (cf. image).
Quelqu’un aurait une idée ? 
Merci. =)

ps. : le thème utilisé est celui-ci, si ça peut aider : github.com/transteph/custom-pu

@freetux À ma connaissance, en CSS ça n'est pas possible. Le "masonry" ne peut être fait qu'à l'aide de JS.

@lamecarlate J’ai lu pas mal de truc qui prétendaient le faire qu’avec du CSS pourtant. 🤔
Lui par ex :
tobiasahlin.com/blog/masonry-w

@freetux Ah, en effet. Moins flexible qu'avec JS parce que tu dois forcer le nombre de colonnes. Ingénieux.

C'est ce que tu as suivi ?

Sinon, pour le fait que tes images soient coupées, c'est apparemment à cause du `object-fit: cover` que tu as dans le CSS sur `.gallery__item img`. Son but est de forcer l'image à prendre toute la place dispo, même s'il faut couper. Commente-le (et sa version préfixée aussi), et aussi les `height` et `width`, inutiles si on met pas le object-fit, et dis-moi :)

@lamecarlate A peu près tous les tutos que j’ai vu utilisaient plus ou moins cette méthode, mais en essayant d’adapter mon css depuis l’inspecteur de Firefox, je n’ai jamais réussi à avoir le même rendu. Peut-être que mon thème utilise du JS pour le faire du coup. 🤔

@freetux Bin, au vu du résultat, non :P C'était marqué quelque part dans la description du thème que ça ferait du masonry ?

@lamecarlate Non, pas que je sahe. C’est moi qui voulait le modifier pour qu’il le prenne en charge justement. Il n’y est pas loin pourtant vu le résultat, juste le pb des photos coupées.

@lamecarlate Ah pinaise, je n’avais pas vu cet environnement `.gallery__item img`.
Y ’a du mieux, maintenant c’est plus coupé. ^^
Je vais essaye de revoir maintenant en modifiant le .gallery avec les codes du tuto pour voir. 🙂

@Troll @lamecarlate Je crois qu’en combinant vos deux idées, ça fonctionne. 😍
Je vais essayer d’optimiser tout ça maintenant, merci. 🤗

@Troll @lamecarlate Mouais, j’ai parlé un peu vite, le thème n’a pas dit son dernier mot quand j’essaye de changer le css. ^^’

@Troll @lamecarlate C’est bizarre, même en modifiant l’environnement dans mon css perso, il conserve l’autre par défaut qui prend le dessus. 🤔

@freetux
mmm pas sur de comprendre ton problème ^^
Tu modifies ou ? dans l'inspecteur Firefox ?

@lamecarlate

@Troll Nan, sur Publii dans le custom css qui est censé prendre le dessus du thème.
@lamecarlate

@Troll Je travail en prévisualisation locale là pour faire mes tests donc pas en ligne. 😕
@lamecarlate

@bronco J’étais tombé dessus aussi. 🙂
Je m’en suis finalement sorti avec l’aide de quelques personnes, j’avais un souci ailleurs que je n’avais pas vu en fait, mais merci du partage. 🙂

@freetux J’peux probablement t’aider, mais je cerne pas le souci. Ceci n’est pas le résultat attendu ?

(Sinon a priori, l’approche est la bonne : colonnes CSS. 👍 J’en parlais sur Twitter y’a quelques jours : twitter.com/meduzen/status/126.)

@meduz C’est parce que tu vois la version ou mon problème est résolu. 😉
Par contre l’ordre de visualisation est en colonne et non en ligne du coup, mais bon, je vais vivre avec. ^^

@freetux Ouaip. Sans recours au JavaScript, c’est la contrainte : les colonnes sont remplies une par une de haut en bas, ce qui, pour une galerie d’images sans indication chronologique, est probablement vivable. Pour avoir une Masonry qui respecte l’ordre du DOM, il faut du JS.

(Jolies photos !)

Sign in to participate in the conversation
Mastodon Tetaneutral.net

Instance de Mastodon, réseau social de micro-blogging libre et décentralisé hébregée par l'association Tetaneutral.net.