explorations #GRIST
Comment placer des images dans un formulaire GRIST pour un affichage dans une page Web ? #nocode #Logos
13 VuesVues·0 EnregistrementsEnregistrementsQuel code pour intégrer une image ?
Dans un bloc texte (titre ou paragraphe), on peut insérer du HTML5 !
Par exemple :
<img src="https://adressecomplètedevotreimagehébergéeenmodepublicsurunepageweb.png" />
On peut ajouter des propriétés pour les images... mais à ce stade, je manque de temps pour les tester, par exemple :
<img class="middle" src="https://adressecomplètedevotreimagehébergéeenmodepublicsurunepageweb.png"
width="50%"
height="50%" />
class="middle" : aligner verticalement
width="50%" et height="50%" : dimensions largeur et hauteur
NB : On peut même ajouter des vidéos :D
https://support.getgrist.com/fr/widget-custom/#lecteur-video-grist
Test de propriétés image
En reprenant le dernier code HTML indiqué ci-dessus, dans GRIST, on peut voir que les 2 images sont bien alignées verticalement !
Mais dans l'affichage de la page Web (formulaire publié), on s'aperçoit que l'alignement vertical ne fonctionne pas (navigateurs testés : Firefox 128.11.0esr et Chrome Version 138.0.7204.170 Build officiel).
Vous pouvez tester l'intégration d'image avec celle ci-dessous.
Voici son adresse Web :
https://storage.lesbases.anct.gouv.fr/main/images/5c64576d-1b96-4af8-a9e8-b72c9851c2da/e_KkBQiz3cTtvNnMGgoGc_Logos_RF_ANCT_FNE.png_nocrop_1176_100.webp
Logos RF ANCT FNE
Bonne exploration ;)
Sources
https://support.getgrist.com/fr/widget-form/#soumissions-de-formulaire
https://support.getgrist.com/fr/widget-custom/
exemple de page Web avec injections de textes, de données et de graphismes :
https://gristlabs.github.io/grist-widget/invoices/index.html?demo=1
(https://support.getgrist.com/fr/widget-custom/#exemple-de-facture)