adobe-edgeVoici la procédure à suivre pour intégrer une animation Adobe Edge dans un site Joomla

Tout d’abord installer le plugin Sourcerer de NoNumber qui va permettre d’insérer le script dans la balise <head> de notre article.

Pour rappel Joomla ne permet pas de le faire nativement.

Ensuite une fois que notre animation est publiée avec Edge, il suffit de prendre l’entièreté du dossier et le placer à la racine du site (et non à la racine de notre template).

Voici à quoi ressemble un dossier Edge publié:

projet-edge1

Le fichier html généré peut être mis à la poubelle, car on ira le coller en partie dans un article Joomla.

projet-edge2

presentation edge joomla

Voici à quoi ressemble le fichier html généré par Edge, rien de bien compliqué:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="/nom-du-projet_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-124939132 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End--> </head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-124939132">
</div>
</body>
</html>

Il nous suffit de copier les balises <script> et <style> et d’aller les coller dans l’entête de notre article entre les balises {source}{/source} grâce au plug-in Sourcerer installé préalablement.

Petite remarque: l'adresse du script doit avoir un lien absolu, ce qui nous donnera une adresse du style:
<script type="text/javascript" charset="utf-8" src="http://www.votre-site.com/projet-edge/nom-du-projet_edgePreload.js"></script>

Autre chose importante: afin que JCE ne rende pas les liens absolus en liens relatifs il faut décocher la validation HTML dans JCE Administration/Panneau de contrôle/Configuration globale

jce-validation-html

Ensuite il ne faut pas oublier d'aller copier la balise
<div><div id="Stage" class="EDGE-124939132"></div>
dans le corps de notre article. Pour cela il est nécessaire de passer en mode code dans l'interface de JCE.

Les deux autres fichiers qui doivent être édités sont les suivants:
nom-du-projet_edge.js
nom-du-projet_edgePreload.js

Bon là ça va être un peu compliqué pour les afficher puisqu'ils sont minifiés (pour ceux qui ne le savent pas, minifier = supprimer tous les espaces et sauts de lignes superflus qui sont autant de données inutiles que l’on télécharge), pour cela il existe un service sur le web pour les déminifier http://jsbeautifier.org, il suffit de coller le code et d'appuyer sur le bouton prévu à cet effet pour déminifier.
Dans le sens inverse c'est ici: http://www.jsmini.com

Concernant le fichier nom-du-projet_edge.js on cherche la variable

var im = image/

et on la remplace avec l'adresse absolue du dossier image qui se trouve dans le dossier du projet Edge, on a donc ceci:

var im = 'http://www.votre-site.com/projet-edge/images/';

On enregistre est c'est fait.
Vous pouvez ne pas passer par une déminification, mais alors il faudra vous procurer des lunettes...

Concernant le fichier nom-du-projet_edge.js les lignes à changer se trouvent à la fin du charabia, vous pouvez ici aussi passer ou non par une deminification.

On cherche les lignes suivantes:

aLoader = [{
load: "edge_includes/jquery-1.7.1.min.js"
}, {
load: "edge_includes/edge.2.0.0.min.js"
}, {
load: "nom-du-projet_edge.js"
}, {
load: "nom-du-projet_edgeActions.js"
}];

et on les remplace comme auparavant avec les liens absolus de notre dossier du projet Edge qui se trouve à la racine de notre site, ce qui donne ceci:

aLoader = [{
load: "http://www.votre-site.com/projet-edge/edge_includes/jquery-1.7.1.min.js"
}, {
load: "http://www.votre-site.com/projet-edge/edge_includes/edge.2.0.0.min.js"
}, {
load: "http://www.votre-site.com/projet-edge/nom-du-projet_edge.js"
}, {
load: "http://www.votre-site.com/projet-edge/nom-du-projet_edgeActions.js"
}];

Concernant la méthode avec l'iframe, il n'y a rien de bien compliqué, on place le dossier du projet Edge à la racine du site comme on l'a fait auparavant et on place la balise <iframe> dans notre article Joomla, ici pas besoin de lien absolu:

<iframe src="/projet-test-animate-oiseaux-web/this_is_responsive.html" width="100%" height="400px" frameborder="0" scrolling="no"></iframe>

... voilà, voilou, j'espère que cela sera utile à la communauté Joomla :)

A propos de l'auteur
Lorenzo
Nom: Lorenzo
Derniers articles de l'auteur