[Problème] Lien dynamique vers un article qui contient une iframe

[fynhooft]

Bonjour,

Actuellement, dans mon site http://www.gimpons.net, si on clique sur l'image présentant un tutoriel, un nouvel onglet s'ouvre dans le navigateur internet avec le tutoriel choisi.
Je voudrais modifier la façon d'atteindre le tutoriel. Je souhaiterais qu'au clic, un article "Votre tutoriel" s'affiche contenant une iframe avec le contenu du tutoriel de façon à rester dans GIMPons.

Pour obtenir cela, voici ce que j'ai fait :

creation d'une position "positioniframe" dans fichier templateDetails.xml du template

creation module wrapper :
- position = positioniframe
- URL = url d'un site existant
- Nom de la cible = ton-tutoriel
- assignation du module à tous les menus

creation d'un article "Votre tutoriel" :
- contenu =

{loadposition positioniframe}

Si je fais un lien vers l'article "Votre tutoriel" dans un autre article, tout est OK : l'article "Votre tutoriel" s'affiche avec le contenu du site (celui dans paramètre URL) dans l'iframe.

Je prends un lien contenu, par exemple, dans la page http://www.gimpons.net/effets-photo.html . On a par exemple :

<a target="_blank" href="lien-vers-le-tutoriel">

Si je modifie par :

<a target="ton-tutoriel" href="lien-vers-le-tutoriel">

cela ne fonctionne pas : un nouvel onglet avec le tuto s'affiche : c'est comme si le target était inactif.


Comment atteindre cette page "Votre tutoriel" pour chaque lien du site conformément au code d'une iframe ?

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

Merci d'avance à ceux qui répondront.

[Rajoz]

Re : Lien dynamique vers un article qui contient une iframe

Bonjour fynhooft,

Dans la balise <a> l'attribut target indique le cadre (frame) de destination du lien (http://www.w3schools.com/tags/att_a_target.asp).

Les valeurs possibles de target sont :
_blank : affiche le lien dans une nouvelle fenêtre
_self : affiche le lien dans le cadre courant (par défaut)
_parent : affiche le lien dans le cadre parent (de niveau supérieur)
_top : affiche le lien dans la totalité de la fenêtre (par dessus le frameset)
[nom du cadre] : affiche le lien dans le cadre (frame) indiqué

Attention, ne pas confondre frame et iframe :

• frame : permet dans un frameset de diviser l'écran en frames (cadres) http://www.w3schools.com/tags/tag_frame.asp
• iframe : conteneur pouvant afficher une page web à l'intérieur de la page en cours http://www.w3schools.com/tags/tag_iframe.asp

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

Ce code est erroné : le target ne peut pas être un iframe.

Actuellement, dans les articles de présentation des tutoriels du site, les liens ont un target _blank donc ils s'ouvrent dans une nouvelle fenêtre (ou nouvel onglet) du navigateur.

Dans ces articles de présentation pour avoir un lien vers un autre article (avec iframe) qui reste dans le site, il faut mettre l'attribut target="_self" ou bien supprimer l'attribut target puisque la valeur par défaut est _self. Dans les éditeurs (TinyMCE, JCE, etc.) le paramètre target est habituellement traduit par "Cible".

Le souci que je vois dans cette méthode c'est qu'il va falloir créer autant d'articles avec iframe qu'il y a de liens dans les articles de présentation (beaucoup d'après ce que j'ai vu sur le site).

Il serait peut-être plus simple d'utiliser un plugin modal qui ouvre l'iframe en popup. Par exemple avec Modals (http://extensions.joomla.org/extensi...a-iframes/4277). Il suffirait alors d'éditer les liens de la page de présentation :

le code utilisé actuellement sur le site

<a href="http://joomla.fr" target="_blank"><img title="Joomla!Fr" alt="Joomla!Fr" src="images/joomla_logo_black.jpg"></a>

devient

{modal http://joomla.fr}<img title="Joomla!Fr" alt="Joomla!Fr" src="images/joomla_logo_black.jpg"/>{/modal}

Note : il y a d'autres plugins qui ont la même fonctionnalité dans http://extensions.joomla.org/extensi...pups-a-iframes

Amicalement,
Rajoz

[fynhooft]

Re : Lien dynamique vers un article qui contient une iframe

Merci Rajoz pour ta réponse.

Quelques remarques :

_self : affiche le lien dans le cadre courant (par défaut)

J'ai testé : le site avec son tutoriel s'affiche dans l'onglet courant mais plus de trace de GIMPons sauf en cliquant sur page précédente du navigateur !

Ce code est erroné : le target ne peut pas être un iframe.

C'est faux : regardes sur ce site à la rubrique "Use iframe as a Target for a Link" et sur cette page pour tester
J'ai testé dans Joomla et cela fonctionne très bien sauf que l'iframe et le lien doivent apparemment se trouver dans le même article !
Pb comment faire pour utiliser un lien dans un article et l'iframe dans un autre. C'est exactement ce que je veux faire.

Il serait peut-être plus simple d'utiliser un plugin modal qui ouvre l'iframe

J'ai regardé le module concerné. Effectivement cela devrait fonctionner. Mais comme je suis en train d'adapter le site avec Joomla3 et de le faire responsive, il me semble que les pop-up, ce n'est peut-être pas top.
Est-ce que les outils fournis par Joomla ne sont pas suffisants ?

[Rajoz]

Re : Lien dynamique vers un article qui contient une iframe

Bonjour fynhooft,


Remarque 1

Pour que cela fonctionne, il faut créer un article avec l'iframe sur le site du tutoriel, et dans l'article de présentation faire le lien sur cet article avec un target _self. En cliquant sur le lien de présentation cela affichera la page avec le tutoriel en restant sur GIMPons.

page présentation :
<a href="index.php/tuto1" target="_self">Tuto 1</a>

page Tuto 1
<iframe src="http://www.w3schools.com"></iframe>

La difficulté c'est qu'avec cette méthode il faut autant d'articles avec iframe que de tutos.

Il est faisable de n'avoir qu'un seul article de tuto à condition de créer le code permettant de transmettre de l'article de présentation à cet article de tuto un paramètre avec l'url du tuto à afficher dans l'iframe.
Un peu comme je fais pour le site d'aide de l'administration où j'ai créé un plugin qui permet de passer la clé de référence de l'aide à la page à afficher.

Remarque 2

Effectivement, j'en étais resté aux définitions de base de target (w3school ne parle pas de cette possibilité dans la page sur l'attribut target).
Je te remercie de m'avoir montré cette utilisation de target que je ne connaissais pas.

J'ai essayé de mettre plusieurs liens dans le même article et cela fonctionne sans problème :
<iframe src="index.php/tuto0" name="iframe_a"></iframe>
<p><a href="index.php/tuto1" target="iframe_a">Tuto 1</a></p>
<p><a href="index.php/tuto2" target="iframe_a">Tuto 2</a></p>
<p><a href="index.php/tuto3" target="iframe_a">Tuto 3</a></p>

L'inconvénient c'est que l'iframe doit être dans la même page que les liens. Je n'ai pas vu de possibilité que le target pointe sur un name qui soit dans une autre page.

Remarque 3

Le plugin Modals adapte le pop-up à son ouverture à la dimension de la fenêtre. Il n'y a pas de problème ni avec Joomla 3 ni avec le mode responsive.
Voir la démo sur http://www.nonumber.nl/extensions/modals en cliquant sur "External url".
L'éditeur JCE avec MediaBox permet aussi de faire des pop-ups en les adaptant à la fenêtre. Il a aussi pour lui la grande facilité pour créer un lien modal sur un article du site (ou sur un autre élément).

Remarque 4

Est-ce que les outils fournis par Joomla ne sont pas suffisants ?

Il ne s'agit pas d'un problème de Joomla mais d'un problème html qui aurait été le même sur un site statique. Au moins avec Joomla, il y a des solutions via les extensions.

Au fait, voici une solution se servant des outils natifs de Joomla 3 :

• créer des catégories en cascade, par exemple : niveau 1 = Tutoriels, niveau 2 = Arrières-plans.
• créer des articles dans ces catégories, avec une introduction ressemblant à ce qu'il y a sur la page de présentation et un corps de texte incluant l'iframe.
• créer un affichage en blog des articles de la catégorie Tutoriels/Arrières-plans sur 6 colonnes.
• quand on clique dans la page blog sur l'introduction d'un article, cet article s'affiche complètement avec l'iframe et en restant sur le site.
• avantages :
  • très simple d'ajouter un article avec un nouveau tuto à une catégorie, le blog est actualisé automatiquement.
  • pour conserver la structure de l'article il suffit de le dupliquer et de ne modifier que ce qui est nécessaire (titre, image et texte d'intro, lien d'iframe, catégorie, etc.).

Amicalement,
Rajoz

[fynhooft]

Re : Lien dynamique vers un article qui contient une iframe

Il est faisable de n'avoir qu'un seul article de tuto à condition de créer le code permettant de transmettre l'article de présentation à cet article de tuto un paramètre avec l'url du tuto à afficher dans l'iframe.

C'est donc ce que j'ai besoin : le code pour transmettre le lien à l'iframe

Voir la démo sur http://www.nonumber.nl/extensions/modals en cliquant sur "External url".

... et si tu vas jusqu'en bas de la page, "external link" = payant. Zut, alors !

Il ne s'agit pas d'un problème de Joomla mais d'un problème html qui aurait été le même sur un site statique.

J'en suis bien conscient. Ce que je voulais dire c'est que je préfère utiliser rien que Joomla avec du css ou du jquery éventuellement. Je préfèrerais me dispenser d'extensions tierces (quand elles disparaissent avec les versions de Joomla, on est bien ennuyé).

Au fait, voici une solution se servant des outils natifs de Joomla 3 : ...

Là, je n'ai pas tout compris : pourquoi six colonnes ?

Il y a peut-être une autre voie : puisque l'iframe et les liens doivent, à priori, être dans le même article, on met l'iframe au début et les liens ensuite.
Il faudrait alors ne pas afficher l'iframe quand on affiche l'article (on affiche donc que les liens).
Quand l'utilisateur clique sur un lien, on affiche l'iframe mais plus les liens.
Est-ce possible avec du css et/ou du javascript et/ou du jquery ?

[Rajoz]

Re : Lien dynamique vers un article qui contient une iframe

Bonjour fynhooft,

C'est donc ce que j'ai besoin : le code pour transmettre le lien à l'iframe

C'est soit créer des articles soit développer du code...

... et si tu vas jusqu'en bas de la page, "external link" = payant. Zut, alors !

La fonction "external link" qui est payante c'est celle qui est dans la partie "Convert links by"
La création des modals avec un lien externe fait partie de "Create modal links anywhere" qui est dans les fonctions gratuites.
C'est confirmé dans la doc (http://demo.nonumber.nl/index.php/12-modals) voir les différents onglets Syntax & Explanation (quand la fonction est payante c'est clairement indiqué).
J'ai souvent utilisé cette extension avec des codes du type {modal mon-url}Cliquez ici{/modal} pour être sûr qu'il n'y a pas besoin de la version payante (sauf pour remercier le développeur).

Même si cela avait été payant, JCE+MediaBox est gratuit et il est installé sur de très nombreux sites (au moins pour ses qualités d'éditeur).

Je préfèrerais me dispenser d'extensions tierces (quand elles disparaissent avec les versions de Joomla, on est bien ennuyé).

Je comprends ton soucis surtout que passer de 1.5 à 3.3 c'est un grand saut et que tu dois déjà avoir rencontré le problème. Ici, je dirais que ce ne me paraît pas un souci :

• NoNumer et JCE sont des fournisseurs connus de longue date et de très nombreux utilisateurs se servent de leurs extensions.
• En cas de problème (vraiment très peu probable), il existe de nombreuses extensions de popup qui pourront facilement prendre le relais.

Là, je n'ai pas tout compris : pourquoi six colonnes ?

L'article d'un tuto va se présenter sous la forme :

• introduction comme dans la page de présentation des tutoriels de GIMPons : image + lien dans un div de 110x145 px.
• lien "Lire la suite..."
• corps de l'article avec l'iframe

En affichage blog on peut choisir pour les articles en introduction le nombre de colonnes. J'ai indiqué six colonnes pour reproduire ce qu'il y a sur le site GIMPons où les tutos sont rangés en six colonnes (ex: page Arrières-plans).
En affichage complet de l'article ne s'affiche que le corps de l'article qui occupe toute la page.

Est-ce possible avec du css et/ou du javascript et/ou du jquery ?

Bien sûr c'est possible, mais là encore il va falloir développer du code.

Amicalement,
Rajoz

[fynhooft]

Re : Lien dynamique vers un article qui contient une iframe

Bonjour,

J'ai testé modals .
Effectivement, cela fonctionne avec les liens externes.
Seul souci, le responsive que j'ai testé avec la vue adaptative de Firefox.
Supposons que je suis en 320x480, en format vertical. Si on clique sur un lien, la fenêtre modale s'affiche correctement (centrée en hauteur et largeur).
Si on bascule en horizontal, la fenêtre modale conserve les dimensions qu'elle avait en vertical et si on rebascule en vertical elle ne se place plus correctement au centre !
De même, si on modifie la taille de la fenêtre écran, la fenêtre modale conserve la taille qu'elle avait dans le premier écran.
Ces soucis sont les mêmes avec le site de nonumber (donc ce n'est pas mon site qui est en cause).

Quant à JCE-mediabox, il fonctionne également avec les mêmes soucis de redimensionnement et un code plus lourd.
Je pense que je vais utiliser modals car le code à insérer est simple.

Je laisse le sujet non réglé car je n'ai pas la solution avec les iframes et j'aimerais bien savoir comment faire par cette méthode.