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

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

Un message, un commentaire ?
modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides.