Colonnes avec des images (hors template)


#1

Bonjour,

après avoir écumé le mode d’emploi grav et internet, j’ai trouvé comment créer des colonnes en markdown dans un nouveau module (sur un blog, je pratiquais à peu près le html, mais là…). Mais je n’arrive pas à y intégrer une image pour chaque colonne.

J’aurais bien voulu modifier un template déjà existant (portfolio en rajoutant un texte sous chaque image, ou team en remplaçant l’image ronde par une normale, ou what we do en remplaçant l’icône par une image normale), mais rien n’y fait. J’ai donc décidé de faire un module sans template, mais impossible d’intégrer une image

2 colonnes en markdown: PAS DE PROBLÈME

<table border="0">
 <tr>
    <td><b style="font-size:30px">Title</b></td>
    <td><b style="font-size:30px">Title 2</b></td>
 </tr>
 <tr>
    <td>Lorem ipsum ...</td>
    <td>Lorem ipsum ...</td>
 </tr>
</table>

Tentative de mettre une image par-dessus chaque titre (si je peux y intégrer un lien, c’est encore mieux), mais ça ne marche pas (j’ai fait des tas d’autres essais, sans succès):

<table border="0">
 <tr>
    <td>[Alternative text](Bureau.jpg?cropResize=200,100)</td>
    <td>[Alternative text](Bureau.jpg?cropResize=200,100)</td>
 </tr>
 <tr>
    <td><b style="font-size:30px">Title</b></td>
    <td><b style="font-size:30px">Title 2</b></td>
 </tr>
 <tr>
    <td>Lorem ipsum ...</td>
    <td>Lorem ipsum ...</td>
 </tr>
</table>

Si vous avez une idée, je serais ravie. Merci d’avance.


#2

Bonjour

La solution que je te proposerais serait d’utiliser une notation Twig dans ton code HTML. Pour ton exemple, ce serait:

<table border="0">
 <tr>
    <td>{{ page.media['Bureau.jpg'].resize(200, 100).html('Titre image', 'Texte alternatif') }}</td>
    <td>{{ page.media['Bureau.jpg'].resize(200, 100).html('Titre image', 'Texte alternatif') }}</td>
 </tr>
 <tr>
    <td><b style="font-size:30px">Title</b></td>
    <td><b style="font-size:30px">Title 2</b></td>
 </tr>
 <tr>
    <td>Lorem ipsum ...</td>
    <td>Lorem ipsum ...</td>
 </tr>
</table>

Cependant, il faut passer en mode Expert dans l’interface de gestion de la page concernée et ajouter ceci dans le cadre Frontmatter

 process:
   twig: true

L’image doit se trouver dans les medias de la page. Si son nom contient des espaces, il ne faut pas les remplacer par %20 mais les écrire tels quels (je ne sais pas si d’autre caractères spéciaux posent soucis ou non)

En espérant d’avoir d’une quelconque aide.


#3

Bonjour PaliPalo,

je te remercie de ta réponse. Je vais essayer et je te donnerai le résultat.

À quel endroit dois-je mettre le lien vers lequel l’image renvoie? Avec le groupe ('Titre image', 'Texte alternatif')?

À bientôt,


#4

Vu que tu utilises déjà du HTML, le plus simple serait d’écrire :

<td><a href="url_vers_lequel_aller">{{ page.media['Bureau.jpg'].resize(200, 100).html('Titre image', 'Texte alternatif') }}</a></td>

J’édite mon post pour dire que tu peux également écrire cela en Markdown

| | |
| ---- | ---- |
| [![Alternative text](Bureau.jpg?cropResize=200,100)](url_vers_lequel_aller) | [![Alternative text](Bureau.jpg?cropResize=200,100)](url_vers_lequel_aller) |
|Titre 1|Titre2|
|Lorem ipsum...|Lorem ipsum...|

Voilà à quoi cela ressemblerait (vu que Bureau.jpg n’est pas connu du site Framasoft, j’ai utilisé l’url de leur logo):

Alternative text Alternative text
Titre 1 Titre2
Lorem ipsum… Lorem ipsum…

#5

Bonjour PaliPalo,

merci de tes 3 solutions, qui fonctionnent parfaitement. Je pense que la meilleure pour moi est la troisième (twig avec html), où il y a plus de possibilités de formatage. La solution markdown est trop éloignée de mes habitudes, et les deux images sont collées, ce qui ne me convient pas.

Une dernière question (pour aujourd’hui): y-a-t-il moyen de changer la couleur des caractères du carrousel? Car ils sont blancs, et deviennent difficilement visibles avec une image de fond claire. Il me semble que non, car c’est un template. Si j’avais installé le tout sur mon propre srveur, j’image que j’aurais pu, mais comme ce n’est pas le cas…

Toi qui es si fort, peut-être as-tu une solution.

À bientôt, merci.


#6

Bonjour,

Tout d’abord je suppose que tu utilises le composant g-carousel et que tu veuilles toujours la même couleur de caractères.

Si c’est bien le cas, voici comment je ferais:

<style>
div.carousel-caption { color: red; }
</style>

[g-carousel id="carousel1" name="carousel1"]

[g-carousel-item image="image1.jpg"]
**Duis mollis**, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-carousel-item]

[g-carousel-item image="image2.jpg"]
Cras mattis consectetur purus sit amet fermentum.
[/g-carousel-item]

[g-carousel-item image="image3.jpg"]
Cras mattis consectetur purus sit amet fermentum.
[/g-carousel-item]
[/g-carousel]

Il faut changer red de la balise par une couleur de ton choix (cf. https://www.w3schools.com/cssref/css_colors.asp)

(PS: pas besoin de flagornerie, si je peux aider, j’aide :wink: )


#7

Bonjour PaliPalo,

merci de ta réponse. J’ai bien reçu ton admnonestation et je ne le ferai plus (bien que je n’en pense pas moins).

En ce qui concerne le Carrousel, je souhaite changer la couleur des caractères des différentes pages de présentation (du “slide”), des textes qui sont contenus dans le template _showcase, c’est-à-dire le heading, le subheading et le button text.

Par exemple:

   image: image1.jpg
        heading: 'Titre 1 - Le projet'
        subheading: 'Texte pour inviter à lire le projet'
        button_text: 'LE PROJET'
        button_url: '#_what_we_do'
    -

La solution que tu m’as proposée (mais je ne suis pas sûre d’en avoir fait très bon usage), a fait apparaître le texte latin (Demain, beaucoup de fermentation de carottes de piment tomate) en rouge, en faisant disparaître le reste, ce qui évidemment ne m’a pas beacoup avancée.

Si tu as une idée, je suis preneuse. D’un autre côté, ne t’ennuie pas trop non plus avec ça, parce que c’est déjà très beau comme c’est.

(et aussi, ces rajouts se mettent où? Dans le frontmatter en expert ou dans l’espace du bas?)

À bientôt, merci.


#8

Je t’avoue que je me demande toujours comment vous procédez pour faire un Carousel. Je n’ai jamais réussi à le faire de façon simple. Peut-être que ce serait une bonne idée si tu pouvais nous en faire une description (ici ou sur la page de documentation des outils de Framasoft) parce que moi, perso, je rame :slight_smile:

Quoi qu’il en soit, en lisant attentivement ton précédent message, je vois que tu me parles de _showcase et de heading et subheading. Donc, j’ai fait quelques essais et me suis basé sur des sites d’exemples.

Ce que je peux voir c’est que les carousels sont décomposés en divisions dont l’attribut classe est modular-row showcase flush-top. Chaque division comporte les balises suivantes :

balise correspondance dans le code FrontMatter Description
<h1> heading: Titre de l’image
<h2> subheading: Sous-titre
<a> button_text: et button_url: Texte et lien du bouton en dessous des titres. Cette balise est de classe "button"

Pourquoi, je parle de cela? Parce que ça pourrait aider à appliquer un style en particulier à chaque élément.

Maintenant, je suppose que tu as une page simple (style blog) qui contient une “sous-page” de type modulaire (showcase).

Je n’ai pas réussi à changer la couleur à partir de la “sous-page” mais, tu t’en doutes, que j’y suis parvenu dans la page parent.

Donc dans la configuration de la page parent en mode expert, j’ai mis ceci dans la zone Markdown (pas dans la zone FrontMatter, donc) :

<style>
div.modular-row > h1 { color: red; }
div.modular-row > h2 { color: blue; }
div.modular-row > a.button { color: green; }
</style>

Ce qui permet de changer le style (ici, la couleur) respectivement du titre, du sous-titre et du bouton.

Le soucis, c’est que cela change le style de tous les sous-éléments des divisions de classes modular-row dans la page. Ce n’est pas un problème si nous n’avons qu’un carousel.

Autrement, il faudra ajouter un attribut dans la page modulaire showcase et modifier un peu mon exemple précédent.

Donc dans la partie FrontMatter de la sous-page modulaire de type showcase, ajouter ceci avant la ligne slides:

slideme:
    id: un_id_unique

Et changer mon exemple précédent par :

<style>
div#un_id_unique > div.slideme > div.modular-row > h1 { color: red; }
div#un_id_unique > div.slideme > div.modular-row > h2 { color: blue; }
div#un_id_unique > div.slideme > div.modular-row > a.button { color: green; }
</style>

un_id_unique est libre de choix et il permet justement de pouvoir cibler précisément un carousel.

Une simple manière de comprendre la première ligne c’est de la lire ainsi: "écrire en rouge le texte du titre dans la section de type modular-row de la section de type slideme dans la division dont l’identifiant est un_id_unique.

J’espère avoir été assez clair :thinking:


#9

Bonsoir PaliPalo,

merci à nouveau pour tes explications très détaillées.

Le choix que j’ai fait pour mon site est la quatrième option, celle du site personnalisé, avec une page simple avec carrousel.

Étant donné mes compétences (plutôt précaires) en informatique, je ne fais qu’adapter le modèle en en comprenant petit à petit le fonctionnement.

Comme tu dois le savoir, mais ça peut servir à d’autres, dans le menu des Pages de l’administration, le principe du carrousel est:

  1. D’abord la page avec carrousel,

  2. qui est composée de plusieurs modules (what we do, team, clients, porfolio) dont on peut modifier le texte (j’avoue quelquefois avec quelque difficulté, d’autant qu’il y a quelques bugs),

  3. mais surtout composé aussi du module carrousel showcase, qui est très important car c’est lui qui détermine la page d’accueil en carrousel du site (le diaporama/slide avec les flèches pour se déplacer à droite à gauche). C’est dans le front matter du showcase, en mode expert, que l’on modifie le texte (Titre, sous-titre, bouton de chaque diapo et j’imagine que l’on peut y rajouter autre chose, mais je ne m’y suis pas essayée encore). On aussi rajouter des diapositives, à condition de rajouter aussi leur module équivalent (team2, portfolio2…)

Voilà l’étendue de mes connaissance, mais je pense que tu connais tout ça.

Par tes explications, j’ai modifié les couleurs de la page d’accueil en carrousel en mettant ton premier exemple dans la zone markdown du module showcase. Et effectivement, les couleurs des titres, sous-titre et bouton ont changé. C’est magnifique.

Je me suis aussi amusée à faire différents formatages (gras, couleur de fond, italique…) J’ai compris à cette occasion qu’il fallait utiliser une syntaxe css sans que ce soit complètement du css (vraiment curieux, mais bon…) Par contre opacity: ne fonctionne pas, et peut être d’autres, je ne sais pas pourquoi.

<style>
div.modular-row > h1 { color: red; background-color:#E6E6FA; font-style:italic; }
div.modular-row > h2 { color: blue; }
div.modular-row > a.button { color: green; font-weight: bold;; background-color:yellow; }
</style>

Par contre, comme tu l’as écrit, et si j’ai bien compris, cette méthode change le formatage des titre, sous-titre et bouton de toutes les diapos d’un carrousel. L’autre code que tu donnes avec une id concernerait un autre carrousel, mais il n’y en a qu’un seul dans mon site.

j’ai essayé de changer de couleur de caractères pour chaque diapo/slide d’un unique carrousel, mais je n’ai pas réussi. Le problème est que je n’ai pas trouvé comment différencier chaque diapo.

Mais c’est quand même un très grand progrès.

Merci encore, et à bientôt pour de nouvelles aventures,

PS: quand je parle de bugs, par exemple j’ai essayé de mettre d’autres photos que celles de jane, Peter etc. données en exemple pour le module team, et je n’ai pas réussi (et ce n’est pas faute d’avoir essayé). J’ai fait des vrais/faux médaillons de mes propres photos que j’ai mis à la place en laissant vide l’espace de la photo de g-team et en mettant ma photo en dessous. J’ai également réussi, sans comprendre comment, à centrer la photo. Comme je suis incapable de recommencer la manip, quand j’ai besoin d’une photo centrée, je fais un copier-coller, puis je change la photo. Un peu galère, mais ça ira jusqu’à ce que je maîtrise mieux la bête.


#10

Salut,

Pour choisir un élément en particulier, je te propose ceci

<style>
<!-- Modifier les attributs du 1er élément du carousel -->
div.slideme > div.modular-row:nth-child(1) > h1 { color: blue; }
div.slideme > div.modular-row:nth-child(1) > h2 { color: blue; }
div.slideme > div.modular-row:nth-child(1) > a.button { color: blue; }

<!-- Modifier les attributs du 2nd élément du carousel -->
div.slideme > div.modular-row:nth-child(1) > h1 { color: red; }
div.slideme > div.modular-row:nth-child(1) > h2 { color: red; }
div.slideme > div.modular-row:nth-child(1) > a.button { color: red; }

...
</style>

div.slideme > div.modular-row:nth-child(x) permet de selectionner la x-ième balise div de classe modular-row enfant d’une balise div de classe slideme.


D’ailleurs pour tes styles personnalisés, je viens de découvrir qu’il est possible de les mettre à un endroit “commun” au site en allant dans la partie “Plugins” de l’interface d’administration, d’y cliquer sur “Custom CSS” et d’inscrire des styles CSS dans la case “Inline CSS” (les valeurs ne doivent pas être entourées de <style> et </style>).


Pour la photo des personnes de la team, fais comme ceci. Dans la configuration de la page _team, mets ce qui suit au début de la zone de contenu (pas dans la zone FrontMatter). Juste au-dessus de [g-team attributes...

<style>
    div#_team > div.row > div.col-md-4 > div.item-image > img { border-radius: 0%; }
</style>

Ceci enlève la découpe circulaire de l’image.



Tu vas rire, mais j’ai beau essayé, je ne réussis jamais à faire une page d’accueil avec le carousel en haut. Moi, j’obtiens au mieux, les images à la queue-leu-leu. Mais pas de slider. Et pourtant cela me génère bien les divisions en question; autrement, je n’aurai pas su te guider pour les customisations.

Je viens même d’essayer ici de mettre un module team, mais je n’ai rien sur ma page. :confused:

Mouarf! Je viens de relire plus attentivement ta description et maintenant, je remarque tes mots “la quatrième option, celle du site personnalisé”. Je comprends pourquoi cela avait l’air si simple pour vous et extrêmement compliqué pour moi :sweat_smile:

Je laisse ce blabla sur la lueur de ma compréhension pour historique. On ne sait jamais que cela pourrait être utile à quelqu’un.


#11

Hello PaliPalo,

ta solution pour les couleurs des titres du carrousel marche très bien, sauf… que la couleur du premier titre (h1) n’est pas pris en compte chez moi. Il reste blanc. C’est curieux, peut-être un bug.

Je suis heureuse de t’avoir appris quelque chose (ou plutôt que tu te sois rendu compte de quelque chose grâce à moi).

En ce qui concerne les personnes du module team, je crois que l’erreur était mienne, car je me suis rendue compte que certaines de mes photos étaient jpg, et d’autres jpeg, et je devais sûrement me mélanger les pinceaux dans les noms.

Je continue à composer mon site, mais je ne fais qu’adapter des modules existants car j’ai des difficultés à faire une page avec un formatage complet. La solution markdown avec menu n’est peut-être pas tout à fait au point, car il manque des possibilités de formatage dans le menu, comme le centrage par exemple. Lorsque l’on clique sur italique, le texte devient italique… et aussi centré! J’aurais préféré uniquement centré. J’aimerais bien centrer un texte ou une image sans être obligée de mettre des tas de ligne de code, qui sont moitié html moitié css…

À vrai dire, je ne sais pas si ces petits problèmes (passagers j’en suis sûre) peuvent être considérés comme des bugs ou s’ils sont le résultat de mes lacunes. Il est écrit sur la page d’accueil de Framasite “Framasite est en phase de test. Le service fonctionne, mais n’est pas encore facile à utiliser par quiconque…”

Ce n’est pas facile, c’est vrai, mais c’est déjà très beau, et je suis ravie de proposer un site avec un carrousel.

Framasoft, c’est formidable!

À bientôt,


#12

Bonjour Pep,

Je suis ravi d’avoir pu t’être utile.

Merci pour tes remarques positives quant aux solutions que Framasoft essaie de fournir. Je pense qu’elles sont appréciées par l’équipe à leur juste valeur.

Bonne continuation dans tes démarches de création!