Changements techniques dans Piwigo 2.2

Cette page liste les changements techniques qui sont à connaître par les développeurs de plugins et de thèmes pour rendre leurs extensions compatibles avec Piwigo 2.2.

URL propre pour l'administration des plugins

Si la page principale d'administration de votre plugin est plugins/plugin_directory/admin.php, alors vous pouvez simplifier l'URL de votre plugin dans main.inc.php.

Piwigo 2.1 :

add_event_handler('get_admin_plugin_menu_links', 'localfiles_admin_menu');
function localfiles_admin_menu($menu)
{
  array_push(
    $menu,
    array(
      'NAME' => 'LocalFiles Editor',
      'URL' => get_admin_plugin_menu_link(LOCALEDIT_PATH . 'admin.php')
      )
    );
 
  return $menu;
}

Piwigo 2.2 :

add_event_handler('get_admin_plugin_menu_links', 'localfiles_admin_menu');
function localfiles_admin_menu($menu)
{
  array_push(
    $menu,
    array(
      'NAME' => 'LocalFiles Editor',
      'URL' => get_root_url().'admin.php?page=plugin-'.basename(dirname(__FILE__))
      )
    );
 
  return $menu;
}
  • admin.php?page=plugin&section=LocalFilesEditor%2Fadmin.php (pas très beau) dans Piwigo 2.1
  • admin.php?page=plugin-LocalFilesEditor (superbe) dans Piwigo 2.2

Encore plus fort, si vous avez plusieurs onglets dans l'administration de votre plugin, vous pouvez ajouter ”-nomOnglet” dans la variable “page” de l'URL :

  • admin.php?page=plugin&section=LocalFilesEditor%2Fadmin.php&tab=css (vraiment laid) dans Piwigo 2.1
  • admin.php?page=plugin-LocalFilesEditor-css (quelle beauté !) dans Piwigo 2.2

N'utilisez plus "en dur" le répertoire ./local/

A partir de la version 2.2 de Piwigo, il est possible de faire tourner plusieurs galeries sur la même installation de Piwigo, c'est une fonctionnalité de “multisite” basique et chaque site a son propre $conf['local_dir'].

Si vous utilisez le répertoire ”./local” pour stocker la configuration de votre thème ou plugin, je suggère de déplacer cette configuration dans la table “config” qui fait un boulot sur mesure et parfaitement adapté à ce besoin. Si vous souhaitez garder votre configuration dans un fichier séparé, n'utilisez plus en dur le répertoire “local” mais la constante PWG_LOCAL_DIR à la place.

Piwigo 2.1:

include(PHPWG_ROOT_PATH.'local/config/my_plugin.inc.php');

Piwigo 2.2:

include(PHPWG_ROOT_PATH.PWG_LOCAL_DIR.'config/my_plugin.inc.php');

Suppression du mode conseillé (Adviser)

Parce qu'il n'était pas très utile, compliqué voire dangereux, et qu'il avait de l'impact sur de nombreux fichiers, nous avons décidé de supprimer le mode “conseiller” (adviser).

Dans vos fichiers PHP, supprimez :

if (is_adviser())

dans vos fichiers TPL, supprimez :

{$TAG_INPUT_ENABLED}

La fonction is_adviser() est obsolète mais pas encore supprimée : elle retourne systématiquement false.

Protection contre les enregistrements par les robots

Dans votre fichier register.tpl, ajoutez :

<input type="hidden" name="key" value="{$F_KEY}" >

Voir exemple dans themes/default/template/register.tpl

combine_css

Pour réduire le nombre de requêtes HTTP entre le navigateur web du visiteur et le serveur web, nous utilisons la nouvelle méthode “combine_css” qui fusionne plusieurs fichiers CSS en un seul, minifié (suppression de tous les caractères inutiles).

Piwigo 2.1

{html_head}<link rel="stylesheet" type="text/css" href="{$LOCALEDIT_PATH}locfiledit.css">{/html_head}

Piwigo 2.2

{combine_css path="plugins/LocalFilesEditor/locfiledit.css"}

Pour la phase de développement, avant de publier votre thème/plugin, vous pouvez désactiver cette fonctionnalité :

$conf['template_combine_files'] = false;

get_combined_css

Si vous avez un header.tpl spécifique dans votre thème, ajoutez get_combined_css.

Piwigo 2.1

{foreach from=$themes item=theme}
  {if $theme.load_css}
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}themes/{$theme.id}/theme.css">
  {/if}
  {if !empty($theme.local_head)}{include file=$theme.local_head}{/if}
{/foreach}

Piwigo 2.2

{get_combined_css}
{combine_css path="themes/simple/content.css" order="-10"}
{foreach from=$themes item=theme}
  {if $theme.load_css}
{combine_css path="themes/`$theme.id`/theme.css" order=-10}
  {/if}
  {if !empty($theme.local_head)}{include file=$theme.local_head load_css=$theme.load_css}{/if}
{/foreach}

Veuillez ne pas mettre d'espace avant {get_combine_css} Cette balise doit donc commencer sur une nouvelle ligne.

get_combined_scripts

Si vous avez un header.tpl spécifique dans votre thème, dans la balise HTML head, ajoutez :

{get_combined_scripts load='header'}

Si vous avez un footer.tpl spécifique dans votre thème, avant la fin du body HTML, ajoutez :

{get_combined_scripts load='footer'}

Veuillez ne pas mettre d'espace avant {get_combined_scripts} Cette balise doit donc commencer sur une nouvelle ligne.

combine_script remplace known_script

Pour réduire le nombre de requêtes HTTP entre le navigateur web du visiteur et le serveur web, nous utilisons la nouvelle méthode “combine_script” qui fusionne plusieurs fichiers javascript en un seul, minifié (suppression de tous les caractères inutiles).

{combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
{combine_script id='rating' load='async' require='core.scripts' path='themes/default/js/rating.js'}
{combine_script id='jquery' path='themes/default/js/jquery.min.js'}
{combine_script id='jquery.cluetip' load='async' require='jquery' path='themes/default/js/plugins/jquery.cluetip.js'}
 
{combine_script id="jquery" load="async"}
{combine_script id="jquery.ui" load="async"}
{combine_script id="jquery.ui.draggable" load="async"}
  • id : une chaîne de caractère qui rend le fichier javascript unique
  • load : header/footer/async. Les valeurs header et footer signifient que le fichier javascript doit être chargépar le navigateur web pour l'affichage initial de la page. Essayez d'utiliser la valeur async aussi souvent que possible, pour accélerer l'affichage initial de la page. Par exemple, le code javascript de Google Analytics peut être chargé en async.
  • require : l'id du fichier javascript parent. Vous pouvez en donner plusieurs, séparés par des virgules : “jquery, jquery.ui,mon_script”
  • path : chemin relatif la “root url” (url racine, et pas chemin racine) de votre galerie

Note : l'argument “require” est optionnel pour jquery, jquery.ui, jquery.effects et tous les jquery .ui.xxxx ou jquery.effects.xxxx que Piwigo pourra trouver dans themes/default/js/ui.

Pour écrire du code javascript dans votre template (avec en dépendance un ou plusieurs fichiers javascript)

{footer_script require='jquery.ui.xxxx'}{literal}
jQuery(document).ready(function() {
  alert("This is a test");
});
{/literal}{/footer_script}

Pas forcément besoin d'avoir un “require” dans votre footer_script. Vous pouvez écrire du code javascript sans dépendance :

{footer_script}{literal}
alert("Ceci est un test inutile");
{/literal}{/footer_script}

Veuillez ne pas mettre d'espace avant {combine_script} Cette balise doit donc commencer sur une nouvelle ligne.

Exemple 1, jquery.fcbkcomplete

Piwigo 2.1:

{known_script id="jquery.fcbkcomplete" src=$ROOT_URL|@cat:"themes/default/js/plugins/jquery.fcbkcomplete.js"}
{literal}
<script type="text/javascript">
  $(document).ready(function() {
    $("#tags").fcbkcomplete({
      json_url: "admin.php?fckb_tags=1",
      cache: false,
      filter_case: false,
      filter_hide: true,
      firstselected: true,
      filter_selected: true,
      maxitems: 100,
      newel: true
    });
  });
</script>
{/literal}

Piwigo 2.2:

{combine_script id='jquery.fcbkcomplete' load='footer' require='jquery' path='themes/default/js/plugins/jquery.fcbkcomplete.js'}
 
{footer_script require='jquery.fcbkcomplete'}{literal}
jQuery(document).ready(function() {
  jQuery("#tags").fcbkcomplete({
    json_url: "admin.php?fckb_tags=1",
    cache: false,
    filter_case: false,
    filter_hide: true,
    firstselected: true,
    filter_selected: true,
    maxitems: 100,
    newel: true
  });
});
{/literal}{/footer_script}

Exemple 2, jquery.ui.sortable

Piwigo 2.1:

{known_script id="jquery" src=$ROOT_URL|@cat:"themes/default/js/jquery.packed.js"}
{known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js" }
{known_script id="jquery.ui.sortable" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.sortable.packed.js" }
 
{literal}
<script type="text/javascript">
jQuery().ready(function(){
  jQuery(".catPos").hide();
  jQuery(".drag_button").show();
  jQuery(".categoryLi").css("cursor","move");
  jQuery(".categoryUl").sortable({
    axis: "y",
    opacity: 0.8
  });
});
</script>
{/literal}

Piwigo 2.2:

{footer_script require='jquery.ui.sortable'}{literal}
jQuery(document).ready(function() {
  jQuery(".catPos").hide();
  jQuery(".drag_button").show();
  jQuery(".categoryLi").css("cursor","move");
  jQuery(".categoryUl").sortable({
    axis: "y",
    opacity: 0.8
  });
});
{/literal}{/footer_script}

Inutile ici d'utiliser combine_script car Piwigo chargera automatiquement jquery.ui.sortable, qui va automatiquement provoquer le chargement de jquery.ui, qui lui-même provoque le chargement automatique de jquery. Cela fonctionne car jquery.ui.sortable est présent dans themes/default/js/ui

Convertissez vos fichiers d'icônes en un unique "sprite"

Les CSS sprites sont une technique pour réduire le nombre de requêtes HTTP. Les images sont combinées dans un unique fichier plus gros. Au lieu d'une requête HTTP par icône sur la page, le navigateur ne réalise qu'une seule requête pour récupérer tous les icônes à la fois. En savoir plus : Les sprites CSS sur alsacreations.com. Pour réaliser votre sprite, nous vous proposons deux méthodes :

Méthode un : génération automatique en ligne et implémentation à la main

Vous pouvez utiliser les outil en ligne comme http://fr.spritegen.website-performance.org/ afin de générer un Spite CSS : il vous suffit de mettre vos icones (quelle que soit leurs dimensions!) dans un zip, de l'envoyer et vous récupérerez votre sprite ET le CSS nécessaire à son utilisation. 1) (uniquement si votre thème ne comporte pas de .tpl, ni ne redéfinit les noms des icones) Assurez vous que les noms de fichiers de vos icônes soient les suivants (comme les noms changent par rapport à avant, pour s'assurer de la correspondance nom/image, il est conseillé de regarder les sprites par défaut dans themes/default/s26/outline_xxxxxx.png car la liste qui suit est par ordre d'apparition dans les sprites par défaut ):

help, home, camera[optionnel, n'existe pas encore], save, cloud, letters, calendar, camera-calendar, arrow-n, arrow-e, arrow-s, arrow-w, arrowstop-n [optionnel, n'existe pas encore], arrowstop-e, arrowstop-s [optionnel, n'existe pas encore], arrowstop-w, close, category-edit, category-view-normal, category-view-flat, caddie, caddie-add, caddie-del, favorite, favorite-add, favorite-del, camera-info, representative, edit, register, lost-password, slideshow, play, pause, stop, clock-plus, clock-minus, repeat-play, repeat-stop, map [optionnel, n'existe pas encore], globe [optionnel, n'existe pas encore]

ou alors si vous n'aviez pas changé les noms de fichiers des icônes (fort probable) suivez ce schéma de changement de nom (ancien→nouveau) :

help->help, home->home, camera[nouveau et optionnel, n'existe pas encore], save->save, tag_cloud->cloud, tag_letters->letters, calendar->calendar, calendar_created->camera-calendar, up->arrow-n, right->arrow-e, arrow-s[nouveau et optionnel, n'existe pas encore], left->arrow-w, arrowstop-n [nouveau et optionnel, n'existe pas encore], last->arrowstop-e, first->arrowstop-w, exit->close, category_edit->category-edit, normal_mode->category-view-normal, flat->category-view-flat, caddie[nouveau et optionnel, n'existe pas encore], caddie_add->caddie-add, caddie-del[nouveau et optionnel, n'existe pas encore], favorite[nouveau et optionnel, n'existe pas encore], favorite->favorite-add, del_favorite->favorite-del, metadata->camera-info, representative->representative, preferences->edit, register->register, lost_password->lost-password, start_slideshow->slideshow, play->play, pause->pause, stop[nouveau et optionnel, n'existe pas encore], dec_period->clock-plus, inc_period->clock-minus, start_repeat->repeat-play, stop_repeat->repeat-stop, map [nouveau et optionnel, n'existe pas encore], globe [nouveau et optionnel, n'existe pas encore]

Vous n'êtes pas obligé d'avoir toutes ces icônes, ni d'intégrer celles qui sont optionnelles.

2) Une fois proprement nommée, mettez vos icônes dans une archive zip

3) Allez sur http://fr.spritegen.website-performance.org/ et indiquer dans “Fichiers sources” votre archive zip

4)En bas, dans les réglages, mettez dans “Préfixe de classe”, le préfixe “pwg-icon-”

5) cliquer sur “Créer le sprite et le CSS

6) Enregistrer le sprite et copier/coller le code CSS donné

Voilà, il ne reste plus qu'à intégrer tout ça dans votre thème. Vous pouvez aussi compresser d'avantage le sprite généré, jouer sur les options (l'espacement entre les icônes notamment) et même y inclure les icônes pour le :hover (le sélecteur css sera .pwg-state-disabled .pwg-icon-NOMDEL'ICONE ) !

Méthode deux : génération à la main via GIMP et implémentation automatique

Vous pouvez aussi ajouter à la main vos icônes en vous calquant sur les sprites par défaut. Vous pourrez ainsi redimensionner vos icônes en 26×26 1) démarrez Gimp

2) ouvrez themes/default/s26/outline_ff3363.png (avec les icônes roses)

3) passez en mode RVB : Image > Mode > RVB

4) dans le panneau “Boîte à outils”, sélectionnez l'outil “Sélection rectangulaire”

5) créez un nouveau calque “Nouveau calque”, par dessus le calque “Arrière-plan” (celui qui inclus les icônes) et sélectionnez le

6) ouvrez votre fichier home.png, Sélection > Tout (Ctrl+a), Edition > Copier (Ctrl+c)

7) sélectionnez la fenêtre avec le sprite

8) Edition > Coller (Ctrl+v) et déplacez la sélection flottante avec la souris, votre icône “home” doit être par dessus celui du calque Arrière-plan

9) cliquez en dehors de la sélection flottante, la sélection est alors fusionnées dans le “Nouveau calque”

10) reproduire les étapes 6 à 9 pour chaque icône du sprite

11) sélectionnez le calque Arrière-plan dans le panneau des “calques” (mais ne cachez pas le “Nouveau calque”)

12) dans la fenêtre de l'image, sélectionnez chaque icône “remplacé” et appuyez sur la touche “Suppr” de votre clavier, cela supprime la sélection du calque “Arrière-plan” (l'icône par défaut)

13) sauvegardez le fichier en tant que themes/votreTheme/icon/icons_sprite.png (utilisez l'option “Fusionner les calques visibles” pendant la sauvegarde)

Maintenant que vous avez un sprite avec tous vos icônes, déclarons le theme.css de votre theme. Ouvrez theme.css et écrivez :

.pwg-icon {
  background-image: url(icon/icons_sprite.png);
}
 
A:hover .pwg-icon {
  background-image: url(icon/icons_sprite.png);
}

Ouvrez votre navigateur web et vérifiez que vos icônes sont correctement affichés. Si vous avez des problèmes d'alignement, réouvrez le fichier icons_sprite.png, sélectionnez l'icône avec l'outil de sélection rectangulaire, Edition>Couper (Ctrl+x), Edition>Coller (Ctrl+v) et déplacez le avec les flèches de votre clavier, puis sauvegardez et vérifiez dans votre navigateur web le résultat.

Optionnel : créer un sprite spécifique pour les "a:hover"

Une amélioration notable du système de sprite, c'est la possibilité d'avoir un icône différent pour le a:hover (quand le curseur de la souris est sur l'icône). Ainsi vous pouvez soit intégrer vos icônes “hover” dans le sprite que vous avez créé auparavant et alors utiliser le sélecteur css ”.pwg-state-disabled .pwg-icon-NOMDEL'ICONE” (cette méthode est à privilégier afin d'éviter la disparition de l’icône lors du chargement du sprite uniquement hover) ou alors créer un sprite uniquement pour les icônes hover.

Pour illustrer comment faire selon la 2° méthode, j'ai décidé d'avoir mes icônes gris par défaut et colorés quand le curseur est dessus.

1) copiez icons_sprite.png en tant que icons_sprite_hover.png

2) modifiez votre themes.css comme suit

.pwg-icon {
  background-image: url(icon/icons_sprite.png);
}
 
A:hover .pwg-icon {
  background-image: url(icon/icons_sprite_hover.png);
}

3) ouvrez icons_sprite.png avec the Gimp

4) Image > Mode > Niveaux de gris

5) sauvegardez et voyez le superbe résultat dans votre navigateur web

 
Haut de page
projet/developpement/v22.txt · Dernière modification: 2011/05/10 17:20 par flop25
 
 
github twitter facebook google+ newsletter Faire un don Piwigo.org © 2002-2017 · Contact