Mettre en évidence les champs d’édition d’un nœud synchronisés d’une langue à l’autre (i18n_sync)

En multilingue, lorsque votre contenu contient un grand nombre de champs en tous genres, et que certains sont copiés d’une traduction à l’autre, il est souvent utile pour le contributeur de savoir que tel ou tel champ sera écrasé dans les autres langues. De même, il saura ainsi s’il doit aller dans chaque traduction modifier le champ ou s’il sera copié d’une traduction à l’autre.

C’est le rôle du module « i18n_sync » livré avec le module i18n, mais pas activé par défaut.

1. Utiliser un hook_form_<FORM-ID>_alter()

pour modifier les formulaires d’édition des nœuds, et ajouter une classe CSS aux champs concernés par la synchronisation.

/**
 * Implements hook_form_alter().
 * Pour pouvoir ajouter une classe CSS aux champs synchronisés d'une langue à l'autre
 * via i18n_sync.
 */
function MODULE_NAME_form_node_form_alter(&$form, &$form_state)
{
  // Liste des champs synchronisés d'une langue à l'autre
  $fieldsToSync = array();
  if (module_exists('i18n_sync')) {
    $fieldsToSync = i18n_sync_node_fields($form['#node']->type);
  }
  foreach ($fieldsToSync as $field_name) {
    if (isset($form[$field_name])) {
      $form[$field_name]['#attributes']['class'][] = 'i18n_sync';
    }
  }
}

 

2. Ajouter un peu de CSS…

Exemple à adapter selon les besoins (ici on ne fait que mettre une couleur au label) :

.i18n_sync label{
  color: orange;
}

Pour ma part, utilisant déjà « fontello« , j’ai ajouté une icone devant le label, via CSS.

Pour éviter d’avoir à modifier le DOM et d’ajouter un SPAN devant chaque label, j’utilise un style « :before » avec un attribut « content ».
Il faut également adapter très très légèrement le code généré par fontello.com dans le ZIP téléchargé.

La version « bourrin », sans utiliser LESS :

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?10776927');
  src: url('../font/fontello.eot?10776927#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?10776927') format('woff'),
       url('../font/fontello.ttf?10776927') format('truetype'),
       url('../font/fontello.svg?10776927#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

.i18n_sync label:first-child:before {
  content: '\e80a';

  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  padding-right: 5px;
  color: #666;
}

En utilisant LESS :

d’abord j’ajoute un sélecteur devant la définition générée par fontello :

[class^="icon-"]:before

remplacé par

.icons,  [class^="icon-"]:before

ça me permet d’utiliser « .icons » à l’intérieur d’une autre classe CSS :

.i18n_sync label:first-child{
  &:before{
    .icons;
    padding-right: 5px;
    color: #666;
  }
  content: '\e80a';
}