Personnalisation

Les personnalisations en version 1.7

Dans certains cas, il est possible de personnaliser PWG par l'intermédiaire de fichiers spécifiques.

Ces fichiers sont à créer. Le contenu de ces fichiers, constituant les personnalisations, viendra compléter ou remplacer le contenu des fichiers originaux de PWG.

Il est très fortement conseiller d'utiliser ces fichiers plutôt que de modifier tout fichier original. Cela pour éviter les erreurs, garder intacte une configuration saine, mettre à jour plus facilement vos galeries en cas de passage à une version supérieure.

Liste de ces fichiers actuellement utilisables :

  • ./include/config_local.inc.php : Une variable $conf, si elle doit être modifiée, devra figurer dans ce fichier (lequel respectera la syntaxe du langage php).
  • ./language/…./local.lang.php : Une variable $lang, si elle doit être modifiée, devra figurer dans ce fichier (lequel respectera la syntaxe du langage php).
  • ./template-common/local-layout.css : Toute modification générale de css devra être réalisée dans ce fichier en sachant que le thème pourra annuler celle-ci.
  • ./template/yoga/local-layout.css : Toute modification de css propre à ce template (yoga) devra être réalisée dans ce fichier en sachant que ./template-common/local-layout.css et le thème pourront annuler celle-ci.

Sans oublier :

  1. vos thèmes ( [css], [+/- MOD] )
  2. vos templates ( [MOD], la notion de [MOD] à l'encontre de code php tend à disparaître )
  3. et, vos plugins personnels ( [PLUGIN] ).

Mise en page générale

Tout est à faire et à réinventer… Copier toute astuce de la 1.6 qui marche dans cette page.
L'équipe s'occupera de la replacer au bon endroit si nécessaire.

Ajout d'une bannière

Ce besoin, récurrent à tout site, est l'occasion pour nous de vous montrer les différentes possibilités d'améliorations de votre galerie. Comprenez les différences, au travers de l'ajout de bannière, et votre approche de toute astuce présentée ici n'en sera que simplifiée.

[+/- MOD] Créer votre thème...

  • Niveau : Intermédiaire+
  • Description :

En théorie quand on commence à changer les couleurs, il faut les changer toutes. C'est pourquoi le template standard yoga propose depuis la 1.6 une gestion des couleurs regroupée par thèmes.

Vous souhaitez en changer, commencez par dupliquer un des répertoires des thèmes proposés. Par exemple, /clear/ ou /dark/.
Supposons que vous souhaitiez un thème plutôt vert et appelons ce nouveau thème «greenery».
Nous aurons donc un nouveau sous-répertoire /template/yoga/theme/greenery/.

Avec 3 fichiers :

  1. index.php ( ← redirige les petits curieux )
  2. theme.css ( ← les indications spécifiques à ce nouveau thème )
  3. themeconf.inc.php ( ← les redirections indispensables à ce thème )

Commençons par modifier themeconf.inc.php :

<?php
$themeconf = array(
  'template' => 'yoga',
  'theme' => 'greenery',
  'icon_dir' => 'template/yoga/icon',
  'admin_icon_dir' => 'template/yoga/icon/admin',
  'mime_icon_dir' => 'template/yoga/icon/mimetypes/',
  'local_head' => '<!-- no theme specific head content -->'
);
?>

Les explications sur les autres paramètres seront détaillés un peu plus loin mais déjà ce qui importe est de changer le nom du thème par celui que l'on désire (greenery dans notre cas).

Puis par modifier theme.css:
Tout l'art de savoir marier les nuances et couleurs réside dans ce fichier à vous de savoir l'adapter. Un extrait :

FIELDSET, INPUT, SELECT, TEXTAREA,
#content DIV.comment  A.illustration IMG, #infos,
#content DIV.thumbnailCategory {
  border: 1px solid silver;
}
 
#comments DIV.comment BLOCKQUOTE {
  border-left: 2px solid #060;
  background-color: #ded;
}
 
#content UL.thumbnails SPAN.wrap2 {
  border: 1px solid #9a9;	/* thumbnails border color and style */
  -moz-border-radius: 4px;	/* round corners with Geko */
  border-radius: 4px 4px;	/* round corners with CSS3 compliant browsers */
}
#content UL.thumbnails SPAN.wrap2:hover {
  border-color: green;		/* thumbnails border color when mouse cursor is over it */
}
 
/* links */
A, .rateButton {
    color: #00895e;
    background: transparent;
}
 
A:hover {
    color: #458420;
}

Pour ceux qui ne seraient pas encore des experts en css (Cascading Style Sheets) :

  • les balises html (exemple : SELECT)
  • les pseudo-formats (exemple : A:hover, balise <A dont le curseur est sur la zone>)
  • les attributs universels marqués par ”.” (exemple : .rateButton, une balise html avec l'attribut class=“rateButton” )
  • les attributs universels marqués par ”#” (exemple : #infos, une balise html avec l'attribut id=“infos”)
  1. id=“infos” ne doit figurer qu'une seule fois dans la page (c'est une zone de l'écran bien définie).
  2. class=“rateButton” pourra être utilisé plusieurs fois dans une même page.

C'est un peu délicat mais les informations ci-dessus devraient suffire à la grande majorité des webmestres pour se repérer et changer rapidement les couleurs de PWG.

Votre thème est au point et il vous plait, partagez-le en plaçant le zip de ce répertoire dans Extensions

8-)


Paramètres de themeconf.inc.php

<?php
$themeconf = array(
  'template' => 'yoga',
  'theme' => 'greenery',
  'icon_dir' => 'template/yoga/icon',
  'admin_icon_dir' => 'template/yoga/icon/admin',
  'mime_icon_dir' => 'template/yoga/icon/mimetypes/',
  'local_head' => '<!-- no theme specific head content -->'
);
 
// Éventuellement ...
$conf['level_separator'] = ' &raquo; ';
$conf['paginate_pages_around'] = 7;
 
?>

'template' = Répertoire de css à inclure dans le généré (en principe un sous-répertoire de template, et répertoire parent du répertoire /theme/ quoique les utilisateurs avancés pourraient imaginer un jeu de template sans css dont les thèmes reprendraient les css de yoga par exemple). En général donc, on ne changera pas la valeur 'yoga'.
'theme' = Nom du sous-répertoire dans lequel PWG doit prendre theme.css, donc si on laisse le répertoire d'origine le fichier .css de notre nouveau thème sera ignoré. En principe, on le changera.
'icon_dir' = indique où se trouve les icônes à afficher. Si vous avez votre propre jeu d'icônes, vous saurez ce qu'il vous reste à faire.
'admin_icon_dir' = idem, mais coté admin.
'mime_icon_dir' = indique où se trouve les fichiers mimes. En principe, on ne change pas de façon à bénéficier pour tous les thèmes de mimetypes de yoga.
'local_head' = ceci s'adresse aux concepteurs de templates, et va contenir du code HTML (les balises sont celles autorisées entre <head> et </head> uniquement. Par exemple, une balise Meta ou mieux une balise Script, inutile d'en dire plus cela servira par exemple à fabriquer des pages précisant les “tags” actifs de la page en cours.

Sans oublier que ce fichier (themeconf.inc.php) est un module php, il peut donc contenir d'autres choses comme des paramètres $conf liés aux changements d'apparence, et bien d'autres surprises sorties de l'imagination du créateur du template ou du thème.

Un exemple d'idée: L'alternance partielle de deux thèmes de couleurs.
Deux thèmes sont conçus (greenery et son sosie darkery, deux thèmes similaires au theme.css près), suivant l'heure du jour 'theme' pointera sur un css ou sur l'autre. Vous pourrez choisir l'un des deux thèmes, le résultat sera identique à une heure précise de votre serveur.

8-)

Mise en page de la page principale (index.php)

FIXME Inclure la table des matières (TOC) de la page fr:personnalisation:branche_1.7:index (Je ne sais pas faire)

FIXME : le titre du lien est égal au 1er titre de la page

Mise en page du Menu

Mise en page de l'image

  • Voir la personnalisation de l'image

Mise en page du diaporama

Mise en page des commentaires

Mise en page de l'Ajout d'images

Modifications de fonctionnalités

[PLUGIN] Miniatures qui débordent

  • Description :

Permet d'adapter la taille des miniatures à la configuration. Normalement, il est conseille de passer un fichier “local” css mais dans ce cas, le css est dynamique suivant la configuration.

  • Niveau : Avancé
  • Attention : Vous devez avoir fixé vos valeurs ($conf['tn_width'] & $conf['tn_height']) dans votre fichier config_local.inc.php
add_event_handler('loc_end_page_header', 'personal_large_thumbnail');
 
function personal_large_thumbnail()
{
  global $conf, $template;
  $W = $conf['tn_width'] + 2;
  $H = $conf['tn_height'] + 2;
  $M = $conf['tn_width'] + 10;
 
  $template->assign_block_vars('head_element', array('CONTENT' => '
<style type="text/css">
/* Set some sizes according to your maximum thumbnail width and height */
#content UL.thumbnails SPAN,
#content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL,
#content DIV.thumbnailCategory DIV.illustration {
  width: '.$W.'px			/* max thumbnail width + 2px */
}
#content UL.thumbnails SPAN.wrap2,
#content DIV.thumbnailCategory DIV.description {
  height: '.$H.'px		/* max thumbnail height + 2px */
}
#content DIV.comment BLOCKQUOTE {
  margin-left: '.$M.'px		/*maximum thumbnail width + ~10px */
}
</style>
  '));
}

[PLUGIN] Pour que l'adresse mail du Webmestre soit visible par tous sauf les bots

  • Description :

Pour éviter le spam et protéger votre adresse mail, il est possible de la crypter. Elle restera visible lors du survol de l’adresse mais dans le code source de la page elle sera cryptée.

  • Niveau : Facile
add_event_handler('loc_end_page_tail', 'personal_webmaster_mail_invisible_bot');
 
function personal_webmaster_mail_invisible_bot()
{
  global $user;
 
  if (!$user['is_the_guest'])
  {
    global $template;
 
    $email = get_webmaster_mail_address();
 
    $s = "";
    for ($i=0; $i<strlen($email); $i++)
    {
      $s .= "&#".ord($email{$i}).";";
    }
 
    $template->merge_block_vars(
      'contact',
      array(
        'MAIL' => $s
        )
      );
  }
}

[PLUGIN] Email obligatoire

  • Description :

Rend l'email obligatoire pour les utilisateurs lors de leur inscription ou de la mise à jour du profil. C'est une astuce en attendant la version 1.8 où la fonctionnalité est intégrée.

  • Niveau : Avancé
add_event_handler('init', 'personal_obligatory_user_mail_address');
 
function personal_obligatory_user_mail_address()
{
  global $page, $template;
 
  if (in_array(script_basename(), array('register', 'profile')))
  {
    if (isset($_POST['submit']) or isset($_POST['validate']))
    {
      if (empty($_POST['mail_address']))
      {
        $_POST['mail_address'] = '<A REMPLIR>';
      }
    }
  }
}

[PLUGIN] Utiliser la langue par défaut du navigateur pour les invités

  • Description :

Ce code permet de récupérer la langue par défaut du navigateur de l'utilisateur. Si cette langue est installée sur la galerie, elle sera alors utilisée à la place de la langue par défaut. Ce code est bien entendu compatible avec le plugin VD Language Switch

  • Niveau : Facile
add_event_handler('user_init', 'set_guest_language');
 
function set_guest_language($user)
{
  global $user;
 
  if ($user['is_the_guest'])
  {
    foreach (get_languages() as $language_code => $language_name)
    {
      if (substr($language_code, 0, 2) == 
         @substr($_SERVER["HTTP_ACCEPT_LANGUAGE"], 0, 2))
      {
        $user['language'] = $language_code;
        break;
      }
    }
  }
}

Personnalisation la partie administration

[PLUGIN] Décocher "simuler" lors de la synchronisation

  • Description :

Permet d'avoir la case à cocher “Simuler uniquement” non coché par defaut.

  • Niveau : Avancé
  • Fonctions nécessaires
  1. Utilisation de javascript
add_event_handler('loc_begin_page_tail', 'personal_sync_not_simulate');
 
function personal_sync_not_simulate()
{
  global $page, $template;
 
  if
  (
    is_admin() and 
    (script_basename() == 'admin') and
    ($page['page'] == 'site_update')
  )
  {
    personal_add_after_tpl_code('tail',
    '</div> <!-- the_page -->',
    '
<script type="text/javascript">
document.getElementsByName("simulate")[0].checked = false;
</script>
    '
    );
  }
}

[PLUGIN - 1.7.1] Ajouter des colonnes d'information supplémentaires dans la gestion des utilisateurs

  • Description :

Permet d'ajouter des informations supplémentaires (telles que la langue, le thème, la date d'enregistrement, etc…) dans le panneau de gestion des utilisateurs.

Attention ! Ce plugin ne fonctionnera en standard qu'avec la version 1.7.1 de PWG. Ceux qui sont pressés sauront récupérer la dernière révision svn des 2 fichiers user_list.php et user_list.tpl nécessaires. Les exemples ci-après ne sont pas exhaustifs et plusieurs combinaisons sont possibles sur le modèle de l'exemple #2 en fonction des informations présentes dans la table #_user_infos.

  • Niveau : Avancé
  • Fonctions nécessaires
  1. Utilisation de javascript
  • Exemple #1, ajout d'une colonne supplémentaire : Afficher la langue des utilisateurs. Dans Faire son plugin personnel, ajoutez le code suivant dans votre fichier main.inc.php après l'entête:
/* Ajout d'une colonne Langues pour la gestion des utilisateurs */
add_event_handler('loc_visible_user_list', 'personal_loc_visible_user_list');
add_event_handler('loc_assign_block_var_local_user_list', 'personal_loc_assign_block_var_local_user_list');
 
function personal_loc_visible_user_list($visible_user_list)
{
  global $template;
 
/* Mise en place du titre de la colonne */
  $template->assign_block_vars(
    'cpl_title_user',
    array(
      'CAPTION' => l10n('language')
      ));
 
  $user_ids = array();
  foreach ($visible_user_list as $i => $user)
  {
    $user_ids[$i] = $user['id'];
  }
  $user_nums = array_flip($user_ids);
 
  $languages = get_languages();
 
/* requête pour obtenir les infos */
if (!empty($user_ids))
  {
    $query = '
SELECT user_id, language
  FROM '.USER_INFOS_TABLE.'
  WHERE user_id IN ('.implode(',', $user_ids).')
;';
    $result = pwg_query($query);
    while ($row = mysql_fetch_array($result))
    {
      $visible_user_list[$user_nums[$row['user_id']]]['language'] = $languages[$row['language']];
    }
  }
  return $visible_user_list;
}
 
/* Génération du template */
function personal_loc_assign_block_var_local_user_list($local_user)
{
  global $template;
 
/* Les bonnes infos dans la bonne colonne */
  $template->assign_block_vars(
    'user.cpl_user',
    array(
      'DATA' => $local_user['language']
      ));
}
  • Exemple #2, ajout de 2 colonnes supplémentaires : Afficher la langue et le thème des utilisateurs. Dans Faire son plugin personnel, ajoutez le code suivant dans votre fichier main.inc.php après l'entête:
/* Ajout des colonnes Langues et Thème pour la gestion des utilisateurs */
add_event_handler('loc_visible_user_list', 'personal_loc_visible_user_list');
add_event_handler('loc_assign_block_var_local_user_list', 'personal_loc_assign_block_var_local_user_list');
 
function personal_loc_visible_user_list($visible_user_list)
{
  global $template;
 
/* Mise en place du titre des colonnes */
  $template->assign_block_vars(
    'cpl_title_user',
    array(
      'CAPTION' => l10n('language')
      ));
 
  $template->assign_block_vars(
    'cpl_title_user',
    array(
      'CAPTION' => l10n('theme')
      ));
 
  $user_ids = array();
  foreach ($visible_user_list as $i => $user)
  {
    $user_ids[$i] = $user['id'];
  }
  $user_nums = array_flip($user_ids);
 
  $languages = get_languages();
 
/* requête pour obtenir les infos */
    $query = '
SELECT user_id, language, template
  FROM '.USER_INFOS_TABLE.'
  WHERE user_id IN ('.implode(',', $user_ids).')
;';
    $result = pwg_query($query);
    while ($row = mysql_fetch_array($result))
    {
      $visible_user_list[$user_nums[$row['user_id']]]['language'] = $languages[$row['language']];
      $visible_user_list[$user_nums[$row['user_id']]]['template'] = $row['template'];
    }
 
  return $visible_user_list;
}
 
/* Génération du template */
function personal_loc_assign_block_var_local_user_list($local_user)
{
  global $template;
 
/* La langue dans la colonne "Langue" */
  $template->assign_block_vars(
    'user.cpl_user',
    array(
      'DATA' => $local_user['language']
      ));
 
/* Le thème dans la colonne "Thème" */
  $template->assign_block_vars(
    'user.cpl_user',
    array(
      'DATA' => $local_user['template']
      ));
}
  • Exemple #3, ajout d'un colonne supplémentaire et d'une icône d'action : Afficher la langue des utilisateurs et positionner une icône supplémentaire dans la colonne “Action”. Dans Faire son plugin personnel, ajoutez le code suivant dans votre fichier main.inc.php après l'entête :
/* Ajout d'une colonne Langues pour la gestion des utilisateurs */
add_event_handler('loc_visible_user_list', 'personal_loc_visible_user_list');
add_event_handler('loc_assign_block_var_local_user_list', 'personal_loc_assign_block_var_local_user_list');
 
function personal_loc_visible_user_list($visible_user_list)
{
  global $template;
 
/* Mise en place du titre de la colonne */
  $template->assign_block_vars(
    'cpl_title_user',
    array(
      'CAPTION' => l10n('language')
      ));
 
  $user_ids = array();
  foreach ($visible_user_list as $i => $user)
  {
    $user_ids[$i] = $user['id'];
  }
  $user_nums = array_flip($user_ids);
 
  $languages = get_languages();
 
/* requête pour obtenir les infos */
    $query = '
SELECT user_id, language
  FROM '.USER_INFOS_TABLE.'
  WHERE user_id IN ('.implode(',', $user_ids).')
;';
    $result = pwg_query($query);
    while ($row = mysql_fetch_array($result))
    {
      $visible_user_list[$user_nums[$row['user_id']]]['language'] = $languages[$row['language']];
    }
 
  return $visible_user_list;
}
 
/* Génération du template */
function personal_loc_assign_block_var_local_user_list($local_user)
{
  global $template;
 
/* La langue dans la colonne "Langue" */
  $template->assign_block_vars(
    'user.cpl_user',
    array(
      'DATA' => $local_user['language']
      ));
 
/* Une icône (étoile) dans la colonne "Action" - Lien non actif */
/* Complétez la balise <a href...> en fonction de l'action que vous souhaitez affecter à cette icône */
/* [Action prévue] doit être remplacé par un texte de votre choix pour décrire l'action */
  $template->assign_block_vars(
    'user.cpl_link_user',
    array(
      'DATA' => '<a href=""><img src="'.$template->get_themeconf('icon_dir').'/star_f.gif" class="button" style="border:none" alt="[Action prévue]" title="[Action prévue]" /></a>'
      ));
}

[CONF] Activez la fonction Adviser/Conseiller

  • Niveau : Débutant+
  • Description :

Qu'est-ce que la fonction Adviser/Conseiller ???

⇒ Le mode conseiller permet aux utilisateurs désignés de se connecter à la galerie et d'aller dans la partie administration simplement en consultation. Afin de conseiller le webmaster de la galerie notamment.

Par exemple: Le mode conseiller sera utilisé par quelqu'un du forum qui veut aider une personne à résoudre son problème.

Pour avoir l'option Conseiller actif dans votre panneau d'administration :

Si le fichier /include/config_local.inc.php existe

Recherchez:

<?php

Juste après, insérez :

// Activer la fonction Adviser/Conseiller
$conf['allow_adviser'] = true;
Si le fichier /include/config_local.inc.php n'existe pas
  1. Créez le.
  2. Ajoutez le code suivant à l'intérieur:
    <?php
    // Activer la fonction Adviser/Conseiller
    $conf['allow_adviser'] = true;
    ?>
  3. Enregistrez le.

Rendez-vous maintenant dans votre panneau d'administration > Identification > Utilisateurs.

Dans le cadre Statut apparait désormais la ligne Conseiller.

Documentation des Plugins

Les plugins un peu complexes peuvent nécessiter une aide pour débuter.
L'objectif de ces pages est donc de vous aider. Vous trouverez donc ci-dessous une nouvelle page pour chaque plugin nécessitant un petit coup de pouce.

Installation de la majorité des plugins

[Plugin] RV Maps & Earth

[Plugin] RV Akismet

[Plugin] Faire son plugin personnel

Pour aller plus loin...


Retrouvez le contenu de cette section grâce à ce mini sommaire :



 
Haut de page
ancien/pwg1.7/personnalisation.txt · Dernière modification: 2009/12/22 22:17 (modification externe)
 
 
github twitter newsletter Faire un don Piwigo.org © 2002-2022 · Contact