var Phenix = function () {
Troll du Web depuis 1996

SPIP

Truc et astuce autour du CMS SPIP. Je travail depuis 2012 avec ce CMS dont j’apprécie l’ouverture et la communauté.

Générer automatiquement des touch-icons avec #SPIP

Comme beaucoup de choses en développement web, les touch-icons [1] c’est le bordel.
Des formats différents en fonction des écrans, en fonction des résolutions d’écrans, des versions d’Android en vrac, et des développeurs perdus au milieu.

Bref, voici un petit squelette SPIP basé sur le travail Mathias Bynens.

L’idée est de placer un fichier apple-touch-icon.png dans le dossier squelettes/ de SPIP pour le décliner automatiquement dans toutes les autres versions.
Le fichier ne sera pas agrandi donc il vaut mieux utiliser un fichier de minimum 192px.

Dans certains cas, la gestion automatique n’est pas idéale.
On peut alors placer un fichier apple-touch-icon-VALEURxVALEUR.png pour remplacer celui générer automatiquement.
Par exemple, si je veux remplacer le fichier 72px : apple-touch-icon-72x72.png

  1. [(#REM)
  2. Favicon touch icon.
  3. Voir https://mathiasbynens.be/notes/touch-icons
  4.  
  5. Ce fichier va générer les favicons pour un maximum de device.
  6. Il n'est pas inutile de passer ce squelette dans le filtre supprimer_ligne_vide (https://gist.github.com/phenix-factory/1dc0195bd655a654b9ef)
  7. ]
  8.  
  9. [(#REM)
  10. Tableau des tailles, en px
  11. Pour le moment, ils n'ont pas encore pondu autre chose que des icônes carrées. On espère que cela ne change pas.
  12. ]
  13.  
  14. [(#SET{taille_device,
  15. [(#ARRAY{
  16. 192,192,
  17. 180,180,
  18. 152,152,
  19. 144,144,
  20. 120,120,
  21. 114,114,
  22. 76,76,
  23. 72,72,
  24. 60,60,
  25. 57,57})]})]
  26.  
  27. <BOUCLE_generateur_touch_icone(DATA){source tableau, #GET{taille_device}}>
  28. [(#REM)
  29. L'utilisateur fourni un fichier spécifique, on affiche directement
  30. ]
  31.  
  32. [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|oui)
  33. [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png})">]
  34. ]
  35.  
  36. [(#REM)
  37. Pas de fichier spécifique, on va créer l’icône si le fichier générique le permet.
  38. ]
  39. [(#CHEMIN{apple-touch-icon-#VALEURx#VALEUR.png}|non
  40. |et{#CHEMIN{apple-touch-icon.png}|hauteur|>={#VALEUR}|oui}
  41. |et{#CHEMIN{apple-touch-icon.png}|largeur|>={#VALEUR}|oui})
  42. [<link rel="[(#VALEUR|=={192}?{icon, apple-touch-icon-precomposed})]" sizes="#VALEURx#VALEUR" href="(#CHEMIN{apple-touch-icon.png}|image_reduire{#VALEUR,#VALEUR}|extraire_attribut{src})">]
  43. ]
  44. </BOUCLE_generateur_touch_icone>

Un Gist est disponible pour ce code.

[1Les icônes qui s’affichent quand un site web est ajouté dans la liste des app d’un smartphone par exemple


Modifier la génération des URLs de #SPIP

SPIP dispose de quelques « schémas » d’URL par défaut. Dans la majorité des cas, ils conviennent aux goûts de chacun.

Cependant, il peut arriver que l’on ait envie de modifier la façon dans les URLs sont créées.
Dans mon cas, j’avais envie de changer les URLs Arborescentes qui créée par défaut un schéma objet/titre.

Cela ne me convenait pas dans le cas des auteurs, auteur/nom_auteur ne signifiait rien, je voulais un visiteur/nom_visiteur.

Ce qu’il faut savoir

SPIP possède une table dans laquelle il place toutes les urls du site. Sans surprise, elle a pour nom... spip_urls.
Une fois qu’une url est ajoutée dans cette base, elle n’en bougera plus. Même si on change de schéma.
Si l’on change le schéma des URLs, les anciennes continueront de fonctionner, en plus des nouvelles.

C’est l’un des rares cas où vider le cache ne suffit pas pour faire des tests, il faut aussi supprimer les URLs de la table. Je vous déconseille fortement de faire cela avec un site en production...

Utiliser les bons pipelines

Il existe 2 pipelines pour modifier les URLs. Toutes ne sont pas modifiables :

  • propres_creer_chaine_url pour les URLs Propres, les URLs Propres+.html et les URLs Libres.
  • arbo_creer_chaine_url pour les URLs Arborescentes.

Ces pipelines retournent un tableau du style :

  1. $flux = array(
  2. "data" => "article/test",
  3. "objet" => array(
  4. "url" => null,
  5. "date" => null,
  6. "id_parent" => null,
  7. "perma" => null,
  8. "titre" => "test",
  9. "lang" => null,
  10. "parent" => '0',
  11. "type_parent" => '',
  12. "type" => "article",
  13. "id_objet" => 24
  14. )
  15. );

L’url se trouve dans la cellule data, il suffit de la modifier !
La cellule objet contient des informations que l’on peut exploiter.

Exemple

Par défaut, les url arbo créent une url auteur/nom_de_l’auteur. Or, j’ai envie de changer et d’utiliser « visiteur » à la place de "auteur’, voici à quoi devrait ressembler mon pipeline :

  1. /**
  2.  * On bricole les URLs dans ce pipeline
  3.  *
  4.  * @param mixed $flux
  5.  * @access public
  6.  * @return mixed
  7.  */
  8. function prefix_arbo_creer_chaine_url($flux) {
  9. // On chope les auteurs pour créer des urls "visiteur"
  10. if ($flux['objet']['type'] == 'auteur') {
  11. // On inclut les fonctions d'édition d'url par sécurité
  12. include_spip('action/editer_url');
  13.  
  14. // Créer une URL "visiteur"
  15. $flux['data'] = 'visiteur/'.url_nettoyer($flux['objet']['titre'],_URLS_ARBO_MAX,_URLS_ARBO_MIN,'-',_url_arbo_minuscules?'strtolower':'');
  16. }
  17.  
  18. return $flux;
  19. }

J’ai repris la fonction url_nettoyer telle qu’elle était utilisée par le core.


Utiliser le critère {recherche} de #SPIP avec PHP

Les boucles SPIP possèdent un mécanisme de recherche particulièrement utile. On utilise le critère recherche.

Cela permet de faire des recherches sur n’importe quel objet SPIP et d’avoir des résultats un peu plus précis qu’un simple LIKE sur une requête SQL.

J’ai découvert qu’on pouvait également utiliser ce système en dehors d’une boucle, avec un peu de PHP :

  1. <?php
  2. $prepare_recherche = charger_fonction('prepare_recherche', 'inc');
  3. list($rech_select, $rech_where) = $prepare_recherche(
  4. _request('recherche'), // Le terme recherché
  5. $objet // L'objet dans lequel on recherche
  6. );

$rech_where contient un WHERE sql qui peut être utilisé dans une requête. Il ne faut juste pas oublie la jointure sur la table spip_resultats :

  1. <?php
  2. // On fait la requête SQL qui va bien
  3. $recherche = sql_allfetsel('*', 'spip_articles INNER JOIN spip_resultats as resultats ON resultats.id=spip_articles.id_article', $rech_where);

Et voilà !


Ajouter une balise #CHERCHER_LOGO à #SPIP

Lorsque l’on veut récupérer le logo d’un objet SPIP, on est obligé de faire quelques choses qui ressemble à :

  1. <BOUCLE_logo(ARTICLES){id_article=1}>
  2. #LOGO_ARTICLE
  3. </BOUCLE_logo>

C’est assez ennuyant, d’autant que cela risque fort de faire une requête SQL alors que la récupération de logo n’en a absolument pas besoin, les fichiers sont stocker sous la forme objetId_objet.xx dans le dossier IMG.

On pourrait espérer que mettre simplement l’identifiant dans la balise récupère le logo, comme le font les balises URL. Malheureusement cela ne fonctionne pas.

Du coup, je me suis inspiré de la balise #INFO_ pour créer une balise #CHERCHER_LOGO :

  1. <?php
  2. /**
  3.  * #CHERCHER_LOGO{objet, id_objet}
  4.  * Retrouver le logo d'un objet sans avoir à lancer tout le système de boucle.
  5.  *
  6.  * @param mixed $p
  7.  * @access public
  8.  * @return mixed
  9.  */
  10. function balise_CHERCHER_LOGO_dist($p) {
  11. $objet = interprete_argument_balise(1, $p);
  12. $id_objet = interprete_argument_balise(2, $p);
  13.  
  14. // Faire la conversion pour la fonction chercher_logo
  15. $objet = "id_table_objet($objet)";
  16.  
  17. include_spip('inc/filtres');
  18. include_spip('public/quete');
  19. $p->code = "http_img_pack(_DIR_IMG.quete_logo($objet, 'on', $id_objet, '', true), '', 'class=\"spip_logos\"')";
  20. $p->interdire_scripts = false;
  21.  
  22. return $p;
  23. }

Voir mon gist : https://gist.github.com/phenix-factory/57cb993512d13fdfee88


Ajouter l’icône des blocs AJAX dans l’espace publics d’un site #SPIP

Parce que c’est mieux !

Petite astuce que j’ai trouvée il y a peu.

Lorsque l’ont AJAX des blocs SPIP, le comportement par défaut est de passer le bloc en opacité 50%.
Ce n’est pas forcément le plus explicite pour les visiteurs, plus habitués à avoir un signe de « pseudo-progression ».

Ce n’est le comportement de la partie admin, qui affiche une icône « Loading » dans le coin supérieur droit.

On peut facilement reproduire ce comportement dans l’espace publique avec une petite ligne de css :

  1. .loading {
  2. background: url(../../prive/themes/spip/images/searching.gif) no-repeat top right;
  3. }

Ici je suppose que le fichier css se trouve dans un sous-dossier du dossier squelettes de SPIP. Si ce n’est pas le cas, il faut adapter le chemin.

Bien entendu on peut mettre ce que l’on veut sur la class loading, ici je n’ai fais que reproduire le comportement de SPIP.