Erratum. Je viens de corriger la documentation du #plugin #SPIP microcache :
►https://contrib.spip.net/Plugin-microcache
On (je ?) avait indiqué qu’on pouvait effacer le microcache avec une fonction effacer_microcache. Il fallait lire : supprimer_microcache.
Tout de suite ça fonctionne beaucoup mieux…
Ah oui tout de même : l’erreur venait de mon signalement initial sur Seenthis en… 2011
▻https://seenthis.net/messages/13252
Ça doit pas être une fonction utilisée par trop de monde, donc… :-))
Huhu, seenthis => contrib => seenthis =>... belle boucle ;)
▻https://git.spip.net/explore/organizations
Récupérer les données détaillées des repos git de SPIP au format JSON :
– le core : ▻https://git.spip.net/api/v1/orgs/spip/repos
– les plugins : ▻https://git.spip.net/api/v1/orgs/spip-contrib-extensions/repos
– les squelettes : ▻https://git.spip.net/api/v1/orgs/spip-contrib-squelettes/repos
– les thèmes : ▻https://git.spip.net/api/v1/orgs/spip-contrib-themes/repos
– les outils : ▻https://git.spip.net/api/v1/orgs/spip-contrib-outils/repos
– galaxie : ▻https://git.spip.net/api/v1/orgs/spip-galaxie/repos
(source : ▻https://git.spip.net/spip-contrib-outils/git_loader/src/branch/master/git_loader.sh#L81
merci @azerttyu )
#SPIP #git.spip.net #json #plugins
@seenthis « Spam, spam, spam » (+ émoji notes de musique)
@b_b : il a quand même 2 symptômes « types » des comptes de spammeurs :
– son pseudo est identique au nom de son site (net2.com)
– ses billets n’ont référencé que son site
@cy_altern je vous laisse en débattre sur la liste seenthis et me signaler s’il est nécessaire de supprimer le compte.
/me retourne faire des cartons...
Un aperçu de WP-VCD, la plus grande opération de piratage WordPress actuelle - ZDNet
▻https://www.zdnet.fr/actualites/un-apercu-de-wp-vcd-la-plus-grande-operation-de-piratage-wordpress-actuelle-39
contrib/git_loader - git_loader.sh at master - git_loader - SPIP on GIT
▻https://git.spip.net/contrib/git_loader/src/branch/master/git_loader.sh
Ce script sh s’occupe d’installer/mettre à jour une distribution
SPIP (core + plugins-dist). Soit tout en master soit à une version SPIP (sur la base des tags spip-x.y.z pour les plugins)
#spip #loader #git #plugins-dist #bash
Toi tu ne traines pas assez sur contrib.spip.net, ou alors tu ne lis pas la gazette ►https://blog.spip.net/-Gazette-.html :p
Donc, maintenant il n’y a plus 5 ou 6 plugins pour gérer des newsletters dans SPIP, mais un seul (une collection de plugins pour être plus précis) maintenu par la communauté :
▻https://contrib.spip.net/Newsletters
Et comme les choses sont bien faites, tu peux importer tes abonné⋅e⋅s depuis un ancien plugin vers le « nouveau » cf ▻https://contrib.spip.net/Mailsubscribers#Migration-depuis-un-ancien-plugin
Comme dirait @suske : « SPIP c’est bôôôôôôô » :)
Je vais tenter le coup. Je récupère un vieux site SPIP, où toutes les fonctions ont été recollées « à la main », avec du PHP en dur partout, le cache à zéro… Alors la migration vers SPIP 3, c’est fun…
Grosse nouveauté sur mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Le filtre image_responsive est désormais capable de fabriquer les versions WebP des images, en plus des versions usuelles. Ce qui fait que, si on visite le site avec un navigateur qui comprend WebP, ce sont les versions WebP des images que l’on charge, sinon les versions habituelles (JPEG en général). Et c’est tout automatique (autant pour le reste, le plugin est particulièrement utile si on fait des configurations précises avec une belle gestion des media queries, autant pour le WebP tout se fait tout seul…).
Pour activer cela, il faut définir une nouvelle constante dans mes_options.php :
define("_IMAGE_WEBP", true);.htaccess lié à image_responsive pour prendre en compte les nouveaux appels d’images.En gros, par rapport au Jpeg (qualité 80%) généré par SPIP, ça semble me générer des images deux fois plus légères.
Attention : j’en suis aux premiers tests. Faudrait pas que ça te pète ton site…
Notez qu’il faut que votre version de PHP soit capable de fabriquer des images en WebP. Ça me semble le cas désormais à peu près partout.
Notez encore que ce n’est pas anecdotique : d’après CanIUse, le WebP est désormais affiché par 80% des navigateurs.
Mise à jour à l’instant (version 7.7.5) qui corrige le fait que, sur certains serveurs, les images WebP sont mal formées à cause d’un bug de PHP (nan mais vraiment, on est en 2019, et PHP continue à être livré avec des bugs grossiers dans les traitements d’images…) :
▻https://bugs.php.net/bug.php?id=66590
Si tu as eu des problèmes avec la version précédente, et que donc ton dossier de cache /local est pourri de fichiers WebP corrompus, voici un petit script pour faire le ménage (à la racine du site donc) :
<?php
function getDirContents($dir, &$results = array()){
$files = scandir($dir);
foreach($files as $key => $value){
$path = realpath($dir.DIRECTORY_SEPARATOR.$value);
if(!is_dir($path)) {
$results[] = $path;
} else if($value != "." && $value != "..") {
getDirContents($path, $results);
$results[] = $path;
}
}
return $results;
}
$liste = getDirContents("local/cache-responsive");
foreach ($liste as $l) {
if (preg_match("/webp$/", $l)) {
echo "<li>$l";
unlink($l);
}
}
Autre bug je pense : sur les serveurs qui déconnent (ci-dessus), je n’arrive pas, en plus, à fabriquer de WebP avec couche de transparence (c’est-à-dire en travaillant à partir de PNG transparent). Mais ça fonctionne sur un serveur qui n’a pas le bug précédent. (Pfff, vraiment… je veux dire : personne n’a testé la fonctionnalité de base quand ils l’ont implémentée complètement buguée ?).
M’enfin sinon, sur un serveur en PHP 7, ça fonctionne très bien, j’ai désormais plusieurs sites qui tournent avec. Avec un serveur PHP 5, ça tourne aussi très bien, à l’exception des PNG semi-transparents qu’on passerait par image_responsive (c’est pas le plus fréquent).
Révision 116199 – SPIP-ZONE
▻https://zone.spip.net/trac/spip-zone/changeset/116199/spip-zone
Documentation provisoire du plugin SPIP « filtres_images_vectorise » qui propose 3 types de filtres de vectorisation d’images bitmaps en SVG.
Utilise soit la lib GeometrizePHP soit la lib PotRace soit une combinaison des 2.
Voir aussi :
– ▻https://github.com/Cerdic/geometrize-php pour GeometrizePHP
– ▻https://github.com/Otamay/potracio (+ ▻https://seenthis.net/messages/645575) pour PotRace
Ca va dépoter les SVG dans SPIP :-) !
#SVG #vectoriser #PHP #SPIP #filtres_images_vectorise #plugin
C’est beau :)
<BOUCLE_docs(DOCUMENTS){id_document IN 8,9}>
[(#FICHIER|image_reduire{#GET{taille}})]
[(#FICHIER|image_reduire{#GET{taille}}|image_geometrize)]
[(#FICHIER|image_reduire{#GET{taille}}|image_potrace)]
[(#FICHIER|image_reduire{#GET{taille}}|image_geopotrize)]
<hr/>
</BOUCLE_docs>Par contre on dirait qu’il y a un petit glitch avec image_geopotrize par défaut.
PS : le glitch est corrigé et c’est encore plus beau :)
Hop, pour info, en SPIP 3.2 tu peux indiquer qu’un plugin nécessite une librairie php dans le paquet.xm, exemple <necessite nom="php:mbstring" /> ; cf commit ▻https://core.spip.net/projects/spip/repository/revisions/23396
En ajoutant ça dans ▻https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/plugins_seenthis/lien_court/trunk/paquet.xml cela permettrait d’avertir les gens qui installent le plugin ;)
Grosse modification sur mon #plugin #SPIP image_responsive :
▻https://23forward.com/Plugin-SPIP-Image-responsive
Sur écran haute définition (« Retina » dans le jargon Apple), l’image était auparavant une version ultra-compressée (Jpeg à 30%), histoire de gagner énormément de poids sur les fichiers. Mais depuis, la qualité des écrans a encore beaucoup progressé, et même avec des pixels deux fois plus petit, un JPEG à 30% c’est assez dégueulasse.
Du coup, par défaut désormais sur écran Retina le plugin utilise la version « normale » de l’image, mais deux fois plus grande.
Si on veut rester avec le comportement précédent (JPEG ultra-compressé sur écran Retina), on ajoutera :
define("_IMAGE_RESPONSIVE_RETINA_HQ", false);dans son fichier de fonctions.
DSP2 : Authentification forte du client
▻https://stripe.com/fr/guides/strong-customer-authentication
Documentation de Stripe pour le passage à l’authentification forte du client (Strong Customer Authentication, SCA) dans le cadre la réglementation DSP2 applicable en septembre 2019
Voir aussi :
- ▻https://stripe.com/fr/guides/sca-payment-flows
- la doc de l’API concernée : ▻https://stripe.com/docs/payments/payment-intents
#stripe #api #dsp2 #Strong_Customer_Authentication #SPIP #plugin_bank #3D_Secure
Un tout petit chouilla d’auto promo #SPIP -ienne ... :-) #plugin
> ▻https://contrib.spip.net/timecircles-plugin-spip
also available in english #SPIP #plugin
> ▻https://contrib.spip.net/TimeCircles-plugin-for-SPIP-3-1
Ajouter à SPIP des chronomètres et des comptes à rebours, personnalisables et animés par jQuery.
Ah, une #CSS que je ne connaissais pas : appliquer une image de fond au texte lui-même. Je suis tombé dessus sur les nouvelles pages de chez Apple :
On voit que le paragraphe de texte a une texture orangée. Celle-ci est attribuée avec un très classique background :
background-image: url(https://seenthis.net/"/v/iphone-xs/a/images/overview/copy_texture_1_large.jpg");-webkit-background-clip: text;
color: transparent !important;transparent, de façon à laisser apparaître l’image de fond.D’après CanIUse :
▻https://caniuse.com/#search=background-clip
Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix)
Du coup, c’est plutôt assez largement répandu.
Le hic, malheureusement, c’est que ça se dégrade particulièrement mal quand background-clip n’est pas interprété :
Un fallback CSS à coucher dehors:
▻http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
body {
color: red;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url(https://seenthis.net/path/to/bg/image) repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
}
Je viens d’uploader une mise à jour de mon #plugin #SPIP CSS imbriqués :
►https://zone.spip.org/trac/spip-zone/browser/_plugins_/css_imbriques
On peut désormais utiliser un pseudo-style -spip-text-background par exemple ainsi :
div {
color: orange;
-spip-text-background: url(https://seenthis.net/../imgs/test.jpg) 100% 100%;
}
Time-saving #CSS techniques to create #responsive #images
▻https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84f
To Recap
1) Use background-image if your image is not part of the page’s content.
2) Use object-fit if you don’t care about IE.
3) The padded container technique, used by Netflix, works everywhere.
4) In most cases, just add height: auto; in your CSS.
5) If you need fast load times, use srcset to load smaller images on mobile.
Le #plugin #SPIP « Image responsive » d’@arno utilise la méthode Netflix si je ne m’abuse.
A peu de chose près : les images ne sont pas en absolute, c’est le contenant <picture> qui a une hauteur à 0
►https://www.paris-beyrouth.org/Plugin-SPIP-Image-responsive
GitHub - alsacreations/pepin : Structure par défaut de plugin jQuery et plugins variés
▻https://github.com/alsacreations/pepin
Pepin est un modèle (parmi tant d’autres) de plugin jQuery modulaire, accompagné de plugins pratiques (voir liste ci-dessous), propres et respectant la plupart des bonnes pratiques d’accessibilité, avec l’usage d’ARIA.
Pour les plugins proposés : ▻https://github.com/alsacreations/pepin#plugins
#jquery #plugin #modulaire #javascript #tabs #modalbox #slider #scroll #sticky #accordeon #toggle #autocomplete
Un jeune libriste part à l’asso des mauvaises habitudes
►https://framablog.org/2018/07/04/un-jeune-libriste-part-a-lasso-des-mauvaises-habitudes
Neil vient de finir un #Stage d’étudiant au terme duquel il a réussi à faire adopter des outils libres à une #Association. Il livre ici le récit de ses tribulations, c’est amusant et édifiant… On aimerait bien qu’il y en … Lire la suite
#Claviers_invités #Contributopia #Libres_Logiciels #Libres_Services #Migration #adhérents #aide #Asso #base_de_données #BTS #ciné #LibreOffice #mailing #MariaDB #mastodon #Microsoft #migration #plugin #site_web #stagiaire #windev #wordpress
Il y’a quelque temps j’ai commencé a séparer en plugins différents des fonctionnalités du plugin typo_enluminée que j’utilisais sur des sites .
En fait je n’utilisais jamais l’ensemble, et du coup trop de boutons pas forcément utiles et qui perturbe l’utilisateur.
J’avais commencé par les intertitres, qui était vraiment le besoin commun a tous mes projets.
Là j’ai eu le besoin de la mise en évidence de textes ou couleur de surlignage. Donc en tapotant je suis tombé sur des lames du couteau suisse (que je n’utilise pas), et un article de tetue, qui traitait le sujet.
▻https://contrib.spip.net/Decorer-ou-colorer-vos-textes
▻http://romy.tetue.net/stabilo-web
Ayant un client souffrant d’achromatopsie, je me suis dit que les solutions proposées n’étaient en fait pas accessible, si cette mise en évidence devait en plus apporter un sens au contexte.
J’ai donc fait un petit plugin Stabilo, qui reprend cette fonctionnalité, mais en le rendant accessible via un aria-label, afin que cette mise en évidence soit décrite aux lecteurs vocaux , mais aussi signalés au hover pour ceux qui sont daltoniens ou qui ne voient qu’en nuances de gris.
▻https://framapic.org/pDkNGJH05k4G/SniYfn85ukWL
Le nom est relativement mal choisi, car c’est une marque, surligner est déjà utilisé par spip, a voir….
Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
▻https://www.fondationcustodia.fr
Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…
Parmi les points à voir en particulier…
– Un menu hamburger tout mignon.
– Des #longforms pour la présentation des expositions :
▻https://www.fondationcustodia.fr/Georges-Michel
– Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :
– Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
▻https://www.fondationcustodia.fr/Les-portraits-en-miniature-12
Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
►http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images
On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :
– Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :
Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.
– Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
▻https://www.fondationcustodia.fr/les-portraits-en-miniature
– Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.
– Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :
– Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).
– Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.
À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))
Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.
Ce qui donne par exemple, avant chargement de l’image :
et une fois l’image chargée :
Ce que je réalise directement dans le squelette ainsi :
#image_haut {
background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
background: linear-gradient(to bottom,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
);
}
#image_haut:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
z-index: 1;
background: linear-gradient(to right,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
);
mix-blend-mode: soft-light;
}
Merci pour cette astuce du fond d’image en dégradé CSS.
J’ai essayé de naviguer au clavier et impossible de dérouler le hamburger :(
@realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.
Je fais ceci :
$("#menu_flottant a").on("focus", function() {
$("#afficher_menu").prop("checked", true);
});
$("body > *:not(#menu_flottant) a").on("focus", function() {
$("#afficher_menu").prop("checked", false);
});
Dans l’indispensable #plugin #SPIP Ortho-typo (celui qui, notamment, te met des guillemets français qui vont bien, et les exposants tout bien comme il faut), j’ai besoin de transformer le « petit x » qu’on met usuellement entre des dimensions du genre :
30cm x 25cmPour ça, j’active l’option Corrections automatiques, et je fais (bêtement…) :
/\ x\ /= ×
Les aides au débuggage de squelettes - SPIP
▻https://www.spip.net/fr_article4453.htmldebloquer_svp#debloquer_svp
le var_mode pour décoincer SVP lorsque la liste des plugins plante
#SPIP #admin_plugins #svp #var_mode #plugin
Confort-plus, une solution libre contre la #dyslexie
▻http://confort-plus.orange.com
Je découvre en jetant un œil au programme de Paris-web cette conférence sur la dyslexie et de manière plus générale sur l’accessibilité
▻https://www.paris-web.fr/2017/conferences/dyslexie-des-solutions-numeriques-pour-rendre-le-web-plus-lisible.php
Ce service offre une vingtaine d’options pour adapter les sites Web à votre besoin : que vous ayez des déficiences visuelles ou une simple fatigue, des problèmes de reconnaissance des mots pour des raisons de dyslexie ou autres, de la difficulté à utiliser une souris ou que vous ne sachiez pas comment paramétrer votre ordinateur, Orange Confort+ vous apporte des solutions : un paramétrage à réaliser une fois et tous les sites Web prendront en compte vos préférences
Apparemment assez léger à intégrer sur son site (et pourquoi pas dans l’interface privée de Spip ?). L’outil est dispo sur GitHub et en GPL.
Telegraphics - Free plugins for Photoshop & Illustrator...and other software
▻http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat
Mise à jour importante sur mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
– il y avait un bug sur le choix des images hors media-queries, avec risque de ne pas respecter le choix de tailles prédéterminés (et donc de fabriquer beaucoup trop d’images en cache)
– surtout : je viens (enfin) d’ajouter le timestamp aux adresses des fichiers, ce qui devrait résoudre pas mal des problèmes de cache rencontrés par les utilisateurs.
Bonjour
Je cherche à comprendre pourquoi (et surtout si c’est normal) avec background_responsive il y a dans le code html de la page 4 appels d’images (avec 1 px de différence) pour chaque taille (je comprends pour 1 et 2 mais pas i et p).
EX :
\"960\" :{\"i\" :{\"1\" :\"local\\/cache-responsive\\/cache-960\\/d32c7d34962d8ea6f4fa0a9b008cdf7c.jpg ?1529623009\",\"2\" :\"local\\/cache-responsive\\/cache-960\\/d32c7d34962d8ea6f4fa0a9b008cdf7cd32c7d34962d8ea6f4fa0a9b008cdf7c-2.jpg ?1529623010\"},\"p\" :{\"1\" :\"local\\/cache-responsive\\/cache-960\\/5e9c6d2f4211f48525892e5f9f166dc6.jpg ?1529623011\",\"2\" :\"local\\/cache-responsive\\/cache-960\\/5e9c6d2f4211f48525892e5f9f166dc65e9c6d2f4211f48525892e5f9f166dc6-2.jpg ?1529623012\"}
Merci
Nouveau #plugin #SPIP : Fonds d’articles
▻https://zone.spip.org/trac/spip-zone/browser/_plugins_/fonds
C’est un plugin particulièrement important dans les sites que je réalise désormais, parce qu’il me permet d’installer les images qui viendront se fondre sous le texte de l’article, ce qui constitue un aspect central de mes #longforms avec SPIP.
Par exemple :
– dans les dossiers histoires d’Orient XXI :
▻http://orientxxi.info/l-orient-dans-la-guerre-1914-1918/german-asymmetric-warfare-in-world-war-i,1423
– les articles d’Orient Palms :
▻http://fr.orientpalms.com/L-oeil-de-Tony-Hage
– la page d’accueil de Paris-Beyrouth :
▻http://www.paris-beyrouth.org
– les « formes longues » du site de l’OPPIC :
►http://www.oppic.fr/rubrique18.html
– bien entendu, ma spectaculaire démonstration à base d’images de la NASA :
►http://www.orientpalms.com/demo/spip.php?rubrique2
Le principe est de créer des images se terminant par un dégradé vers un aplat de couleur (de la même couleur que le fond de la page, que l’on indiquera aussi dans l’interface du plugin), puis d’installer cette image en « fond » d’article, une partie se trouvant avant le pavé de texte, et la seconde (la partie peu contrastée) en dessous du pavé de texte. Le plugin permet d’installer de telles images en haut et en bas de l’article. D’autres options permettent d’installer une image « en fond » d’article, sans notion de haut et de bas.
Par ailleurs, l’affichage est responsive, avec un balisage moderne qui autorise le pré-chargement des images et l’affichage adapté sur écran haute définition.
Pour créer l’effet de dégradé ci-dessus…
(1) Je pars de l’image d’origine (celle-ci n’est pas très grande, je préfère si possible travailler avec des images de 2400 pixels de large, pour couvrir les besoins d’un écran haute définition de type iPad) :
(2) Dans mon logiciel de dessin, je déterminer (avec des règles bleues ici) comment découper mon image :
(3) Étape particulièrement importante : j’applique un dégradé vers une couleur d’aplat (qui correspondra à la couleur de mon fond d’article) sur la partie basse de l’image :
(4) Je découpe l’image en deux parties :
http://orientxxi.info/IMG/fonds/article1423/img_haut1423.jpg 
http://orientxxi.info/IMG/fonds/article1423/fond_haut1423.jpg Je sauvegarde ces deux images (img_haut.jpg et fond_haut.jpg par exemple) sur mon disque dur.
(5) Je me rends dans l’espace privé de mon site, sur l’article qui convient, et je trouve en colonne de droite, l’encadré suivant :
Les deux intitulés qui m’intéressent sont : « Image du haut », où je vais installer img_haut.jpg, et « Dégradé du haut » où j’installe fond_haut.jpg. Je peux uploader via « Enregistrer », mais ici, je vais cliquer plutôt sur la pipette.
Et hop… Cela donne directement une vue réduite de la page :
La pipette a indiqué que je voulais extraire automatiquement la couleur en bordure bas de l’image. Si le résultat automatique ne convient pas, je peux évidemment renseigner le code de la couleur à la main. (Et à l’inverse, si j’ai oublié de passer par la pipette pour uploader les images, je peux simplement cliquer sur la pipette une fois les images déjà chargées, ça fonctionnera aussi.)
Si nécessaire, j’effectue la même opération pour le bas de l’article.
On peut tout à fait n’installer qu’une image de haut, ou qu’une image de dégradé du haut, ou la même chose en bas, selon la nature des images qu’on utilise. Toute la difficulté, c’est de bien prévoir à quel endroit on accepte ou on interdit de placer le texte par dessus l’image, avant tout par souci de lisibilité.
Un autre usage très simple consiste à ne même pas utiliser d’image, ni en haut ni en bas, mais à simplement choisir une couleur de fond d’article.
Au niveau des squelettes, il faut modifier son squelette d’article pour appeler fonds_article.html, par exemple :
[(#INCLURE{fond=fonds_article}{id_article})]Ce squelette gère l’ajout des images. En revanche, c’est toujours à vous de créer le squelette d’affichage du bloc de texte de l’article (contenant le texte, mais aussi le titre, le sous-titre, et tout ce que vous voulez…).
De manière automatique, le squelette du plugin essaiera de charger un squelette : inc/contenu-article.html
mais vous pouvez aussi lui passer un autre nom de squelette, que vous passerez dans une variable contenu_article :
[(#INCLURE{fond=fonds_article}{id_article}{contenu_article=inc/mon_squelette_a_moi)]Oui, c’est un peu brut de décoffrage, il va falloir bosser un peu de votre côté…
Ah, un détail mignon : sur écran de petite taille (smartphone, tablette verticale), les images sont recadrées automatiquement, on conserve tout leur contenu vertical, mais on supprime une partie de la droite et de la gauche de l’image. De cette façon, sur petit écran, on limite l’aspect « minuscule bandeau horizontal », en « zoomant » un peu par rapport à l’image d’origine.
Quelques remarques :
– d’expérience, ce n’est pas évident du tout à utiliser ; pas techniquement (une fois qu’on a réussi à bidouiller les squelettes), ni de l’interface, mais surtout au niveau graphique ; si on n’a pas de solides compétences de graphisme (et si on ne sait pas bien utiliser un logiciel de manipulation d’images), on n’y arrivera pas ;
– du coup : ça réintroduit un graphiste dans la mise en ligne des articles. (Je te laisse réfléchir à ça…)
– réaliser les images du haut avec des dégradés est généralement beaucoup plus difficile que de créer les images du bas de l’article. Avec les images du haut, on est généralement coincés par le corps des gens, sur lesquels on ne peut pas facilement appliquer de dégradé de couleur… avec les images du bas, on a souvent le ciel ou le plafond, c’est nettement plus facile (mais moins spectaculaire puisqu’on ne le voit qu’après avoir scrollé tout l’article)
– par ailleurs, il faut essayer de faire des images « du haut » (au-dessus) du texte très larges et pas trop hautes, c’est-à-dire de grands bandeaux très horizontaux, puisque sinon on va rejeter le texte après l’image, possiblement en dehors de l’écran ; ça ajoute encore de la difficulté dans la création des images de fond du haut de l’article (alors que, en bas de page, on n’a aucun problème à avoir une image très haut).
Le plugin permet aussi de gérer une image en fond d’article (ni en haut, ni en bas, « en fond »…). Cela se passe dans la partie basse de l’interface :
On chargera donc une image dans « Image de fond », qui devra s’afficher sous le bloc de texte de l’article.
Il y a alors trois options pour dimensionner ce bloc de texte :
– taille automatique, le bloc aura naturellement la taille fabriquée par son contenu ; c’est l’image qui tentera de s’adapter aux dimensions du bloc de texte (donc de manière potentiellement grotesque) ;
– remplir l’écran, le bloc aura la hauteur de la fenêtre du navigateur ; si nécessaire, le plugin ajoutera de l’espace en haut et bas du texte pour centrer le texte dans l’écran, ou au contraire provoquera un ascenseur vertical (pas dément). C’est surtout destiné à un texte très court. Et c’est excessivement difficile à maîtriser, à cause des grandes différences de tailles d’écrans ;
– proportions de l’image : fabriquer un bloc de la « taille » de l’image affichée sur toute la largeur de l’écran ; on ne cherche pas à « remplir » l’écran, mais à afficher toute l’image. Comme précédemment, c’est destiné aux textes courts, ça ajoute du blanc ou ça ajoute des ascenseurs selon la hauteur du bloc de texte, mais c’est généralement plus facile à maîtriser…
Dans le cas de remplir l’écran, par défaut le plugin affichera l’image en « position : fixed », l’image s’affichera avec cet effet de « parallaxe » (qui personnellement me sort désormais par les oreilles…), c’est-à-dire un élément qui ne scrolle pas pendant que le reste de la page défile.
Et une dernière technique : si tu fais ça en haut et bas d’articles, et que tu affiches tous les articles d’une rubrique les uns après les autres dans la même page, tu obtiens un énorme… longform. Et c’est comme ça que j’ai fabriqué ma démo de la Nasa. (Ou, moins « fondue » graphiquement, la page d’accueil de Paris-Beyrouth.)
Dans le cas de la Nasa, toute la difficulté consiste à découper les images pour que le bas de l’article se « fonde » pour devenir le haut-dégradé de l’article suivant, et qu’on ait ainsi une impression de passage d’un article à l’autre avec une même grande image dégradée vers le haut et vers le bas. C’est pas évident à faire graphiquement, ça demande des images très spécifiques, le choix des couleurs se complique d’autant, mais le résultat est assez bluffant.
Super !
Au niveau technique (je fais ce que je sais hein :p) il y aurait sûrement moyen de rendre ça générique pour l’activer (avec une config) sur n’importe quel type de contenu (objet SPIP). Le stockage est dans un sous-dossier « article123 » donc on devrait pouvoir avoir la même chose pour « rubrique123 » ou « patate123 ».
(D’ailleurs je ne vois pas pourquoi l’id est répété dans le nom des fichiers, puisqu’on stocke déjà tout dans un sous-dossier dédié à tel contenu précis.)
Pour les images, effectivement je ne vois pas ce qu’on pourrait automatiser de plus, et donc il faut forcément des compétences graphiques, c’est sûr.
À la limite, avec une interface plus complète dans l’admin avec du JS, on pourrait imaginer faire le découpage, définir la ligne où va commencer le dégradé, et créer le dégrader (pas auto, avec un outil graphique pour définir l’amplitude, etc)… il y a des librairies JS qui permettent de manipuler ce genre de choses. Mais bon ça demande un sacré gros boulot en plus…
– oui sur la généralisation, très juste, juste faire attention que ça stocke trois petites infos en base de donnée de l’objet (intitulé des images, et dimensionnement quand image de fond) ;
– ne me demande pas pourquoi je répète le numéro dans un dossier déjà numéroté :-))
– une évolution que j’envisage, effectivement, c’est de ne plus demander deux images pour gérer l’endroit où commence le texte, mais d’utiliser directement un curseur à gérer par glisser-déposer sur l’image dans l’interface privée ; parce que c’est un des points les plus bloquants pour les usagers ;
– une autre difficulté : mon plugin image_reponsive ne fabrique pas de timestamp, et comme il faut souvent s’y reprendre à plusieurs fois, hé ben c’est pas pratique parce que l’usager lambda se fait planter par son cache quand il veut voir ses nouvelles images…
Je viens de mettre en ligne la documentation illustrée de mon #plugin #SPIP Insertion avancée d’images :
►http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images
Le plugin est, comme toujours, là :
►https://zone.spip.org/trac/spip-zone/browser/_plugins_/medias_responsive_mod
Chouette Arno*. Merci.
Juste une remarque : l’habillage irrégulier ne semble pas fonctionner sur l’exemple de ton article ? (Firefox 53 / OSX)
Yep : pas Firefox. (Mais ça se dégrade bien : ça fait un habillage « normal » selon le bord « rectangulaire » de l’image.)
Juste un retour d’expérience d’une novice : 4 utilisations pour votre plugin Insertion avancée d’images (particulièrement le slide) : 2 utilisations « telles quelles » => 1) en espace public ; 2) espace privé, pour afficher des slides de copies écran des fantaisies typographiques (exergue, épigraphe et autres qui ne « passent » pas autrement dans l’espace privé (et l’affranchissement de Java est un gros « plus » dans l’espace privé) ; et 2 utilisations « hors-normes » (ou "hack si vous voulez !) dans l’espace public : 3) création de slide façon « vrai slide javascript », avec les poignées précédent/suivant sur le côté et les bulles de positionnement en haut (ça marche super, le seul hic c’est qu’évidemment la bulle de positionnement ne se met pas à jour - ne change pas de couleur - quand on choisit la slide avec les poignées de côté, mais bon, les visiteurs s’en accomoderont !) et 4) un super petit truc pour afficher les articles suivant/précédent façon « Monde Diplomatique » (les flèches en Java du haut de l’article), en jouant à nouveau sur le CSS uniquement (ce qui fait que, en affichant une double flèche en haut de l’article, ce qui s’affiche en-dessous est initialement « rien » puis si on clique dessus, on fait venir le titre de l’article suivant à l’intérieur du système « slide » (invisible) et de même pour le « précédent ». Je suis très contente de ma trouvaille de débutante et voulais vous en faire part, ça fonctionne à merveille. Merci beaucoup.
Grosse nouveauté dans mon #plugin #SPIP Insertion avancée d’images :
►https://zone.spip.org/trac/spip-zone/browser/_plugins_/medias_responsive_mod
Outre le raccourci <imgXXX> et ses tripotées de variables (zoom, habillage automatique, image dans un rond, « flip »…), il y avait donc le raccourci <ligneXXX> pour placer plusieurs images l’une à côté de l’autre, éventuellement sur plusieurs lignes bien alignées, en fonction des dimensions des images et de l’écran.
Il y a désormais un raccourci super-méga-trop-la-classe : <slideXXX>, qui fabrique automatiquement un slider horizontal quand on en met plusieurs à la suite. Par exemple :
<slide970>
<slide971>
<slide972>provoque l’affichage suivant :
Je suis très content, c’est totalement responsive, multilingue (même en direction rtl) et ça fonctionne entièrement sans Javascript. (Attention, limitation : on ne peut mettre que 8 images à la suite.)
L’intérêt c’est de mettre ces petits spiders (idéalement 2 ou 3 images pas plus) directement dans le corps du texte, et donc d’en mettre plusieurs dans différents endroits du texte si on veut.
Pour la suite (cette semaine j’espère), j’ajouterai un petit script pour gérer le swipe du doigt pour faire défiler les images sur écran tactile.
Et je viens d’ajouter le javascript qui gère le swipe gauche-droite sur écran tactile, pour faire défiler horizontalement le slider. Du coup je passe en translate3d pour que l’animation soit plus fluide. (D’après caniuse, désormais translate3d a grosso modo le même taux de compatibilité que translate.)
