Bonsoir,
Comment faire pour que les images soient toutes à la même dimension (taille format)?
Est ce en rajoutant du code ou faut-il les redimensionner (de façon identique) avant des les télécharger sur le site
Quelle la taille correct pour le site pour garder une bonne qualité sans quelle soit trop lourd ?
Merci à vous
IL faut que je passe par le module images collage ? dans le module Portofolio …
Salut
J’aurai bien voulu t’aider mais je n’arrive pas à remplir un portfolio de données.
Salut,
J’ai pas bien compris ce que tu veux dire ?
tu as aussi un framasite ?
Non, j’en ai créé un pour t’aider, tout simplement.
Mais lorsque je mets un module portfolio, je n’arrive pas à y mettre quoi que ce soit. Maintenant, si tu peux m’expliquer comment tu as procédé, je pourrais peut-être débloqué ta situation.
J’ai consulté le code source du plugin Gravtstrap (qui est celui qui propose le portfolio) mais j’ai encore du mal à comprendre toutes les subtilités du soft.
D’ailleurs, au début, je pensais que tu utilsais des meta-balise [g-carousel] pour faire un défilement de photo (si ça te donne des idées, sache que je n’ai pas trouvé le moyen de les redimensionner et que le code ne semble pas implémenter cette possibilité)
T’es vraiment sympa toi 
[g-thumbnail]
[g-thumbnail-item image="coffee.jpg" url="/"][/g-thumbnail-item]
[g-thumbnail-item image="farmerboy.jpg" url="/"][/g-thumbnail-item]
[g-thumbnail-item image="girl.jpg" url="/"][/g-thumbnail-item]
[g-thumbnail-item image="judah.jpg" url="/"][/g-thumbnail-item]
[g-thumbnail-item image="origami.jpg" url="/"][/g-thumbnail-item]
[g-thumbnail-item image="retrocam.jpg" url="/"][/g-thumbnail-item]
[/g-thumbnail]
[/g-portfolio]
et ensuite j’ai supprimer coffee par exemple et j’ai écrit le nom de ma photo par exemple “structure”
Après, j’ai pas essayé image/collage
[g-images-collage columns="4" border="3" width="800" attributes="title:Image title,class:img-responsive"][/g-images-collage]
https://docs.framasoft.org/fr/grav/modules.html
à voir …
Grrr, c’est pas facile…
J’ai essayé avec [g-images-collage]. C’est plein de contraintes. Le layout est obligatoirement carré.
Le soft crée en fait une image à partir des autres. Il n’est pas possible de cliquer sur un des élément de l’image pour l’agrandir. De même, le clic est inactif sur cette image finale. (Et il y a un léger bug, l’attribut columns= devrait plutôt s’appeler rows= :))
Cependant, dans le code que j’ai repris du dépôt Github, je constate que cette balise pourrait avoir un attribut images-folder= qui serait le dossier contenant les images à “coller”. Mais ça n’a pas l’air d’avoir de l’effet…
Ce n’est pas le top.
Alors, avec [g-portfolio], c’est le résultat quasi escompté sauf ton soucis de taille d’image. Et là je ne vois pas d’attribut pouvant être utilise au redimensionnement de l’image…
ok merci à toi pour tout ces test
Du coup, peut être faut il que toutes les images soient de la même taille avant de les télécharger ?
Faudra que je test pour le portfolio
J’ai test aussi
c’est bizarre comment ça prend les photos je pensais que ça aurait fait un copier/coller de ma galerie photos de 4 sur 4 par exemple et à l’identique mais là ça prends la colonne 1 colonnes de la galerie et ça la transcrit en ligne dans le collage.
C’est un peu déroutant visuellement
De plus, il y a « img-responsive » pour que ça s’adapte à l’écran sur le téléphone ok mais sur l’ordi c’est positionné à gauche.
C’est vrai que ça serait pas mal, un petit zoom quand on passe dessus ou que l’on clic la photo
J’ai passé ma fin de soirée, hier, à essayer de tripatouiller [g-thumbnail-item]. Mais rien à faire, même en procédant à de l’injection HTML dans la balise je ne suis arrivé à rien … Sauf à faire en sorte que l’image en portrait s’affiche entièrement en arrière plan; avec les autres photos dans la bonne position.
Mais!!! En regardant dans le code, j’ai remarqué que [g-thumbnail-item] créait deux balise <div> imbriquée. La première est de classe col-md-4 et l’autre à l’intérieur de class thumbnail
Alors, je me suis dit: "Pourquoi ne pas mettre une balise <style> dans le contenu de la page avec [g-thumbnail]. J’ai donc écrit le code suivant dans la zone contenu de la page :
<style>
a.thumbnail img {
width: 20%;
height: 100px;
}
</style>
[g-thumbnail]
[g-thumbnail-item image="image1-1.jpg" url="/"]Quoi[/g-thumbnail-item]
[g-thumbnail-item image="farmerboy.jpg" url="/"]qu'il[/g-thumbnail-item]
[g-thumbnail-item image="girl.jpg" url="/"]en soit[/g-thumbnail-item]
[g-thumbnail-item image="judah.jpg" url="/"][/g-thumbnail-item]
[g-thumbnail-item image="origami.jpg" url="/"][/g-thumbnail-item]
[g-thumbnail-item image="retrocam.jpg" url="/"][/g-thumbnail-item]
[/g-thumbnail]
Et je tombe sur ce résultat
La première image est en mode portrait et, donc, décalait l’ensemble du portfolio. Avec le code tout est encadré dans le même espace.
Bon dans l’absolu, il faudra commencer à jouer avec les définition de width et height dans la balise <style>. Pour ça, consulter un site de documentation CSS et HTML (tel que https://www.w3schools.com/)
A savoir aussi: [g-thumbnail-item] agit différemment si l’attribut url= est présent ou nom. S’il l’est, il est possible de cliquer sur l’image et le contenu entre la balise ouvrante et fermante est ignoré. S’il n’est pas présent, l’image sera sous-titrée avec le contenu entre les balises ouvrante et fermante; de plus, il ne sera pas possible de cliquer dessus.
Pourquoi je dit ça? Simple car dans le premier cas la balise HTML qui englobera l’image sera un <a class="thumbnail" href=...>; dans l’autre ce sera un <div class="thumbnail">. Dès lors il faut utilser a.thumbnail ou div.thumbnail entre les balises <style> dans mon exemple précédent.
Pour ceux que ça intéresse, l’injection HTML, je l’ai fait comme ceci
[g-thumbnail-item image="image1-1.jpg" class="col-md-4" style="width=100"]Ou quelque chose dans le genre.
Voilà en mettant ceci avant les [g-thumbnail], on obtient un effet satisfaisant:
<style>
a.thumbnail > img {
max-height: 200px;
max-width: 400px;
padding: 2px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 2px;
transition: border .2s ease-in-out;
}
</style>
Ce sont principalement les paramètres max-height et max-width qui sont déterminants.
