PragmaMx | France

Bon nombre d'utilisateurs sont rebutés par les mises à jour car ils ont peur de perdre des modifications personnelles (notamment graphiques) effectuées sur leurs sites. Dans ce tutorial nous allons étudier la façon de changer très facilement tous les icônes ou images intégrés dans le système pragmaMx, ces nouveaux icones/images seront ainsi complètement indépendante du système en lui même, plus précisément ils seront intégré dans votre thème.

C'est une fonctionnalité très intéressante de pragmaMx qui permet de différencier complètement le système du thème.

L'intérêt est double puisque vous avez vos propres icones ou images indépendament du système car inclusent dans votre thème, de plus, les futurs mises à jours ne seront pas un problème dans le cas de remplacement d'images ou d'icones du système, en effet, vous garder celles de votre thème.
Plus qu'un simple écrasement d'image, il s'agit ici d'une option très avancée.

Déroulement du tutorial:

• Localisation des images à modifier
• Placement des images de remplacement dans votre thème
• Création du code pour le remplacement des images

ATTENTION: Documentation réservée aux thèmes Mx.

Localisation des images à modifier:

Cette première étape consiste à choisir les images à remplacer dans le système pragmaMx.

Nous allons prendre un exemple, j'ai choisi de remplacer les étoiles pour les votes articles:

Commencez par visionner sur votre site l'images représentant les cinq étoiles  

Nous allons voir ou est placée cette image dans le système. Pour cela sur la page, faire clic/droit sur l'image puis propriétés.





    <-- Voici dans quel répertoire se trouve notre image.
          Notez bien le nom de notre fichier image, dans notre cas : "stars-5.gif"



     - Vous pouvez vérifier la présence de cette image dans votre système
       Rendez-vous dans le répertoire /images/articles/ de pragmaMx.



    






Voila, nous savons maintenant le nom de l'image que nous allons remplacer + son emplacement (chemin) dans le système pragmaMx.

Pour notre tutorial, nous allons maintenant remplacer cette images par une nouvelle que nous aurons choisi.

  --------Sera remplacée par -----------> 

Cette nouvelle image peut porter un nom identique ou différent.  Pour notre exemple, la nouvelle image a un nom différent et s'appelle  "5.gif"


Placement des images de remplacement dans votre thème

Rendez-vous dans le répertoire /themes/ de votre pragmamx. C'est dans ce répertoire que sont placés les thèmes :



  Pour notre exemple j'ai choisi d'utiliser le thème "mx-default"






Ouvrez ce répertoire /mx-default/
Voici ci-dessous l'arborescence du thème en question:



  ----> Nous allons maintenant créer un nouveau répertoire que vous nommerez obligatoirement "sys_images"

     



      Voici notre nouveau répertoire "sys_images" qui contiendra les images de remplacement.













Placement de notre image de remplacement dans ce nouveau répertoire.

Pour des soucis de lisibilité et de structure, vous devez garder la même arborescence que les images du système.

Rappelez-vous du chemin de notre image initiale "star-5.gif"dans pragmaMx, celle-ci se trouve dans:  /images/articles/

Ouvrez le répertoire /sys_images/ que vous avez crée dans votre thème.
Créer un nouveau répertoire "images" et dans ce nouveau répertoire créer encore un nouveau répertoire "articles"

Ce qui vous donnera : /votre_thème/sys_images/images/articles/

Placez maintenant notre image de remplacement "5.gif"   dans ce dernier répertoire.
Au final, voici le chemin ou se trouve votre image de remplacement:

/votre_thème/sys_images/articles/5.gif

Votre image n'est pas encore prise en compte, pour cela nous allons créer un petit code en php pour faire le remplacement de l'image.

Création du code pour le remplacement des images


-> Ouvrir votre éditeur de texte
-> Créer un nouveau fichier
-> Coller le code ci-dessous

<?php
/****************************************/
/* pragmaMx  Content Management System  */
/****************************************/
if (!defined('mxMainFileLoaded')) die ('You can\'t access this file directly...');

$part[] = array('images/articles/stars-5.gif', 'themes/NOM_DE_VOTRE_THEME/sys_images/images/articles/5.gif');

?>

Explication du code :




-> Sauvegardez le fichier en le nommant "sys_images.php"


-> Placez ce fichier "sys_images.php" dans le répertoire /sys_images/ de votre thème.




-> Voila c'est terminé pour cette première image.


Pour remplacer d'autres images, la manipulation sera la même:

• Placement de la nouvelle image dans un répertoire respectif de  /sys_images/

Il faudra seulement rajouter une ligne de code supplémentaire pour la liaison de la nouvelle image

ex: star-4gif remplacée par 4.gif

Le code à rajouter dans sys_images.php sera:

$part[] = array('images/articles/stars-4.gif', 'themes/NOM_DE_VOTRE_THEME/sys_images/images/articles/4.gif');

Rajouter une ligne de code pour chaques nouvelles images que vous voulez remplacer.

Note: Je vous invite à étudier le thème mx-rainbow qui est un très bon exemple pour le remplacement des images.

Ce tutorial peut paraitre compliqué mais une fois que vous aurez remplacé une dizaine d'images vous ne le regarderez même plus :-)

Liens connexes:

• Tutorial de création d'un thème pour pragmaMx
• Tutorial sur les Css dans pragmaMx