SEIS - New data release (April to June 2021)
This new data release (n° 11) from SEIS includes raw and calibrated data from July 1, 2021 to September 30, 2021
Avec JCE il est possible de tout faire !
Créer des images non cliquables.
Comme on peut le voir dans cet article il est possible d'avoir exactement la même feuille de style, en front-end , en backend ou connecté en front-end.. Ajouter une image non zoomable est un jeu d'enfant, comme on peut le voir ici à droite.. et les dimensions de cette images sont paramétrables en pourcentage... (Il suffit pour cela d'indiquer la largeur en % et d'indiquer NaN pour la hauteur, penser à décocher "proportionnelle dans ce cas là.). Superbe..
Cerise sur le gâteau, créer l'image qui va bien à partir de l'image d'origine ce fait directement grâce au gestionnaire d'images
Il est également simplissime de positionner l'image a droite ou à gauche, avec les styles pull-left et pull-right que j'ai créés dans le menu dropdown styles.
Dans ce cas, on peut également changer les valeurs des dimensions pour les corriger, si besoin mais on peut également copier coller en wysiwyg l'image ou on le désire.. Il suffit de la copier puis de placer le curseur avant le premier mot de la phrase puis de coller l'image. On peut choisire ensuite pull-left ou right... (recliquer sur le style dans le menu avant d'attribuer le nouveau...).
Une légende sur cette petite image qui ne se zoome pas mais qui s'adapte à la largeur de l'écran...
Des images avec des légendes
Avec JCE les légendes sont possibles de toutes les façons et c'est assez facile à réaliser.
Légendes dans le texte
Pour les légendes dans le texte, Il faut d'abord crée une image comme les précédentes, puis la sélectionner et cliquer sur l'icone "Insérer/modifier une légende qui apparait au moment du clic..
Saisir alors la légende voulue, et lui attribuer le syle légende. Logique.
Attention
Si on veut positionner une image à droite ou à gauche , il faut attribuer le style pull-left ou right à l'image dans le gestionnaire d'image onglet "avancé" et au container de la légende dans le gestionnaire de légende onglet "container" sinon on casse tout.. logique aussi.
Soyez vigilant, dan cette opération, les valeurs de dimensions de l'image ont tendance à se remttre en pixels, ce qui va vous surprendre morsque 20% devient 20px..
Créer un Pop up dans le style du site seis !
Pour économiser de la bande passante, il est possible d'utiliser une image à la résolution d'écran pour l'affichage dans l'article et son image équivalente en haute définition qui ne se chargera qu'a l'activation du pop-up.
Qui affiche une image et une légende différente dans l'article et dans le Pop-up.!
Pour ce faire il faut réaliser ces étapes dans l'ordre:
1- Insérer une image grâce à l'icône du gestionnaire d'images :
2- Sélectionner l'image dans le gestionnaire d'image, cliquer sur l'icone "créer une miniature"(dernier icône en bas à droite, s'il n'apparait pas cliquez sur actualiser.... il vous est proposé de choisir de quelles dimensions vous voulez cette miniature, mais pouvez également la recadrer! (en decochant la petite chaine entre les deux dimensions..) ou en changer les proportions.. Penser que ces dimensions doivent être égales ou supérieures à la dimention qu'occupera l'image dans l'article si c'est 20%, c'est 20% de la dimension de l'article SUR UN ORDINATEUR eten affichage pleine page, puisque ce sont des pourcentages! pas d'une tablette..
3- Ensuite, aller dans l'onglet Popup et sélectionnez "pop up WidgetKit 2 dans le menu drop down.
4- Insérer une légende si vous le désirez das le champs title de l'onglet pop up. Bon a savoir : ici vous pouvez écrire du Html! C'est cette légende qui apparaitra au bas de l'image zoomé.
Texte dans le gestionnaire de légende, acceptant le html..et qu'on peut saisir en wysiwyg
Rappel
Si on veut positionner ce Pop-up à droite ou à gauche , il faut attribuer le style pull-left ou right à l'image dans le gestionnaire d'image onglet "avancé" et au container de la légende dans le gestionnaire de légende onglet "container" sinon on casse tout.. logique aussi.
Soyez vigilant, dan cette opération, les valeurs de dimensions de l'image ont tendance à se remttre en pixels, ce qui va vous surprendre morsque 20% devient 20px..
J'ai même fait un style pour afficher des colonnes
Pas mal non? Bon là je ne vais pas vous écrire un article complet, à moins que vous ne supportiez pas le latin...,Mais en attendant, regardez bien la phrase qui suit, d'une part parce qu'elle est interessante, mais aussi parceque vous pouvez la survoler avec votre souris : "Si tu veux parvenir a la vue juste, ton œil doit travailler à s'affranchir de ce qui détermine sa vision" ed hendrerit neque. Integer irerit neque. Integer id tellus euismod, hendrerit eros ac, sodales nisl. Duis ac orci condimentum, blandit nibh ic pretium ex, sed hendrerit neque. Integer id tellus euismod, hendrerit eros ac, sodales nisl. Duis ac orci condimentum, blandit nibh ic pretium ex, sed hendrerit neque. Integer id tellus euismod, hendrerit eros ac, sodales nisl. Duis ac orci condimentum, blandit nibh ic pretium ex, sed hendrerit neque. Integer irerit neque. Integer id tellus euismod, hendrerit eros ac, sodales nisl. Duis ac orci condimentum, blandit nibh ic pretium ex, sed hendrerit neque. Integer id tellus euismod, hendrerit eros ac, sodales nisl. Duis ac orci condimentum blandit nibh ic pretium ex, sed hendrerit neque. Integer id tellus euismod, hendrerit eros ac, sodales nisl. Duis ac orci condimentum, blandit nibh ic pretium ex, sed hendrerit neque. Integer.
Lorem ipsum dolor sit amet,
Consectetur adipiscing elit. Sed et sem arcu, nec pretium odio.
In ullamcorper, eros dapibus sollicitudin lacinia, ante turpis fringilla lectus, id dignissim nisi tellus ac tellus. Quisque a felis lacus, et euismod quam. Curabitur feugiat luctus euismod. In condimentum velit eu nulla mollis id vestibulum nisi rutrum. Morbi ut tellus augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum et libero ut neque pulvinar egestas sit amet sed libero. Phasellus semper magna non risus accumsan id mollis lacus volutpat. Phasellus congue dapibus nisl eget rutrum. Phasellus elementum nulla non nisl dapibus vestibulum. In libero dui, pellentesque et aliquam sed, auctor nec ante. Morbi et risus sem, vel porta leo. Aenean nunc enim, aliquet ut euismod nec, fermentum nec orci.
Phasellus mauris lectus, mollis vel sollicitudin tristique, ultrices a turpis. Fusce sagittis ultricies enim vel mattis. Sed vel est at justo dapibus mattis. Suspendisse ut ante lorem. Aliquam erat volutpat. Donec mollis, justo vel eleifend porta, sem mi rutrum metus, mollis volutpat nibh nulla in enim. Quisque suscipit lobortis sem eu hendrerit. Proin sagittis vestibulum sem, vitae tincidunt libero blandit rutrum. Phasellus nec malesuada sem. Praesent sed fringilla lacus. Curabitur faucibus, sapien in luctus tempor, urna lacus dictum est, a bibendum ipsum quam ac eros.
Image est arcu, pharetra sit amet rutrum eu, sagittis eu lacus. Vivamus pellentesque mollis purus vitae mollis. Nullam tempus lobortis arcu, ac malesuada tortor pellentesque ut. Pellentesque facilisis imperdiet arcu id mollis. Phasellus et pretium ante. Aliquam elementum, neque ut porttitor euismod, leo augue fermentum metus, eget pretium purus velit commodo elit. Nulla magna massa, elementum ut sagittis sit amet, varius eu eros. Ut eleifend elementum massa id bibendum. Phasellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsanellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsan. Duis in velit turpis. Aliquam mollis, leo ut tempor suscipit, leo nisi imperdiet massa, at placerat velit enim a odio.
Le pop up Mediabox de JCE
Exemple de pop-up Mediabox
Un popup défini uniquement par l'editeur JCE
Dans ce cas, plusieurs légendes sont possible :
Legende 1 : lorsqu'on clique sur l'icone image, on choisi de l'image vue dans l'article et il suffit de saisir cette légende dans le champs "title" prévu a cet effet, cette légende apparaitra dans l'article sous la photo. Le code Html n'est apparemment pas possible ici qui permettrait ldes retours à la lignes etc au sein de cette légende.
Légende 2 : la création du pop up se fait en définissant un lien sur cette image vers une autre image qui sera vue dans le Pop-up. C'est assez facile comme procédure. Sélectionner l'image dans l'article sur laquelle on veut un pop-up. puis entrer l'url de l'image du pop-up. ( a cet effet une petite icone a côté du champs url permet de parcourir vos dossiers d'image.) Ensuite aller dans l'onglet "poup" et définir les paramêtres de ce popup. Ici aussi le champs "title" permet de saisir un légende qui n'apparaitra que dans le popup.
Pop up modal de ARK
Popup uniquement défini par l'editeur Ark editor..
Etiam malesuada lacus et turpis pretium feugiat. Quisque ut quam eros. Curabitur vel pretium leo. Proin venenatis tellus vehicula sem bibendum, a luctus nibh iaculis. In a velit ut ante pharetra vehicula. Quisque in consequat erat, sed congue arcu. Sed sagittis augue diam, et tristique metus ultrices in. Ut dignissim id odio in porta. Nulla placerat congue mattis. Aliquam non sapien tellus. Fusce ut metus ut lectus pretium aliquam in ut nisl. Cras fringilla iaculis lectus at ornn accumsan massa non velit rhoncus blandit. Etiam malesuada lacus et turpis pretium feugiat. Quisque ut quam eros. Curabitur vel pretium leo. Proin venenatis tellus vehicula sem bibendum, a luctus nibh iaculis. In a velit ut ante pharetra vehicula. Quisque in consequat erat, sed congue arcu. Sed sagittis augue diam, et tristique metus ultrices in. Ut dignissim id odio in porta. Nulla placerat congue mattis. Aliquam non sapien tellus. Fusce ut metus ut lectus pretium aliquam in ut nisl. Cras fringilla iaculis lectus at ornare.
Exemple de Pop up modal.
Popup uniquement défini par l'editeur Ark editor..
eem bibendum, a luctus nibh iaculis. In a velit ut ante pharetra vehicula. Quisque in consequat erat, sed congue arcu. Sed sagittis augue diam, et tristique metus ultrices in. Ut dignissim id odio in porta. Nulla placerat congue mattis. Aliquam non sapien tellus. Fusce ut metus ut lectus pretium aliquam in ut nisl. Cras fringilla iaculis lectus at ornn accumsan massa non velit rhoncus blandit. Etiam malesuada lacus et turpis pretium feugiat. Quisque ut quam eros. Curabitur vel pretium leo. Proin venenatis tellus vehicula sem bibendum, a luctus nibh iaculis. In a velit ut ante pharetra vehicula. Quisque in consequat erat, sed congue arcu. Sed sagittis augue diam, et tristique metus ultrices in. Ut dignissim id odio in porta. Nulla placerat congue mattis. Aliquam non sapien tellus. Fusce ut metus ut lectus pretium aliquam in ut nisl. Cras fringilla iaculis lectus at ornare.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed et sem arcu, nec pretium odio. In ullamcorper, eros dapibus sollicitudin lacinia, ante turpis fringilla lectus, id dignissim nisi tellus ac tellus. Quisque a felis lacus, et euismod quam. Curabitur feugiat luctus euismod. In condimentum velit eu nulla mollis id vestibulum nisi rutrum. Morbi ut tellus augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum et libero ut neque pulvinar egestas sit amet sed libero. Phasellus semper magna non risus accumsan id mollis lacus volutpat. Phasellus congue dapibus nisl eget rutrum. Phasellus elementum nulla non nisl dapibus vestibulum. In libero dui, pellentesque et aliquam sed, auctor nec ante. Morbi et risus sem, vel porta leo. Aenean nunc enim, aliquet ut euismod nec, fermentum nec orci. Phasellus mauris lectus, mollis vel sollicitudin tristique, ultrices a turpis. Fusce sagittis ultricies enim vel mattis. Sed vel est at justo dapibus mattis. Suspendisse ut ante lorem. Aliquam erat volutpat. Donec mollis, justo vel eleifend porta, sem mi rutrum metus, mollis volutpat nibh nulla in enim. Quisque suscipit lobortis sem eu hendrerit. Proin sagittis vestibulum sem, vitae tincidunt libero blandit rutrum. Phasellus nec malesuada sem.
Praesent sed fringilla lacus. Curabitur faucibus, sapien in luctus tempor, urna lacus dictum est, a bibendum ipsum quam ac eros.
Vestibulum est arcu, pharetra sit amet rutrum eu, sagittis eu lacus. Vivamus pellentesque mollis purus vitae mollis. Nullam tempus lobortis arcu, ac malesuada tortor pellentesque ut. Pellentesque facilisis imperdiet arcu id mollis. Phasellus et pretium ante. Aliquam elementum, neque ut porttitor euismod, leo augue fermentum metus, eget pretium purus velit commodo elit. Nulla magna massa, elementum ut sagittis sit amet, varius eu eros. Ut eleifend elementum massa id bibendum. Phasellus a mollis diam. Maecenas dignissim tortor et neque elementum vel facilisis sapien accumsan. Duis in velit turpis. Aliquam mollis, leo ut tempor suscipit, leo nisi imperdiet massa, at placerat velit enim a odio.
Proin in urna sapien. Integer sed enim diam, ut adipiscing mi. Mauris fringilla eleifend lorem, sit amet gravida urna vestibulum vel. Mauris interdum tempus quam, et aliquam lacus blandit vel. Maecenas sit amet elit ac elit placerat molestie. Nam pellentesque vestibulum sem ac malesuada. Vestibulum l
acus turpis, scelerisque in rhoncus quis, ultricies ut tellus. Quisque eget enim leo, a elementum lacus. Integer feugiat, nunc pellentesque faucibus faucibus, sem augue dictum dui, vel venenatis nulla quam eget diam. Integer sit amet ligula mauris. Fusce quis vestibulum ante. Integer non lobortis nisl. Nulla consectetur nisi et metus lacinia auctor. Cras sit amet elit libero, iaculis ultricies odio. Donec in tellus sapien. Maecenas malesuada urna in diam mollis pretium.
Sed scelerisque neque facilisis nibh pulvinar interdum. In hac habitasse platea dictumst. Nullam ac ante eget tortor aliquam imperdiet. Proin laoreet turpis ut mauris mollis pretium. Curabitur vel tortor nisl, at facilisis nulla. Phasellus faucibus, nunc sed semper porttitor, magna mauris ultrices sapien, commodo viverra diam arcu a mauris. Cras a tristique purus. Aenean interdum, dui et venenatis elementum, libero nunc dignissim dolor, at posuere nisi magna et enim. Pellentesque eleifend hendrerit magna. Maecenas pretium nulla eget purus posuere ultricies. Etiam et velit ligula, a tempor neque. Integer ut elit at tortor placerat varius. Proin vehicula hendrerit neque ac pulvinar. Mauris dapibus dui quis turpis pretium nec gravida augue porta. Curabitur aliquam posuere auctor.
