[RÉGLÉ] Problème insertions iframe

[Matgo]

Bonjour à tous,

Je me décide à faire appel à la communauté joomla.fr car je n'arrive pas à résoudre mon problème et je suis très embêté.
Je ne suis pas un joomla expert, mais je suis arrivé à faire ce que je souhaitais avec un template, mais j'ai un problème gênant :

Avec le template "st magazine" pour joomla 3.x (dispo ici), lorsque j'insère un code HTML dans un article, l'objet apparait correctement dans l'éditeur de l'admin, mais au rendu, l'objet ressort comme "écrasé".

Par exemple, une simple vidéo youtube insérée dans mon article (avec le code embed <iframe...) ressort toute petite : impossible de l'avoir en taille normale (alors qu'elle ressort en taille réelle sur mon apercu dans l'admin). Exemple :



Du coup j'ai le même problème avec d'autres types d'insertions iframe. J'ai d'autres codes iframe à insérer, pour afficher par exemple un tableau qui vient d'ailleurs, et là un petit ascenseur apparait et oblige à scroller pour voir le tableau en entier, il ressort tout riquiqui.
Pour l'instant, le plus embêtant c'est pour les vidéo youtube, mais je pense que le problème est totalement lié.

Il doit y avoir un truc à modifier, mais je ne vois pas où...!
J'ai aussi essayé les insertions avec des modules comme Sourcerer ou Jumi, mais ça ne change rien au problème.

Je vous serais vraiment très reconnaissant de m'aider... vraiment !

Merci d'avance à tous !

[ghazal]

Re : Problème insertions iframe

Salut et bienvenue sur le forum,
ton iframe, tu passes par un module (style "wrapper") ou tu l'insères directement via ton éditeur ?

As-tu recherché dans les fichiers .css du template si il y a des spécifications attribuées aux iframes ?

Utilises-tu Firebug pour Firefox ?
Ce qui permet de voir quelles specs CSS sont attribuées aux différentes balises HTML.
Il existe de nombreux tutos pour ca sur le web.

[Matgo]

Re : Problème insertions iframe

Merci pour ta réponse.

Alors, j'insère mon code directement dans le bloc HTML via l'éditeur.

Pour les fichiers .css, c'est une piste intéressante, mais comment voir si il y a effectivement des spécifications attribuées aux iframe...?

Je viens d'installer Firebug et j'essaye d'examiner l'endroit où se situe mon insertion mais je ne vois rien que je sache décrypter.

Merci encore de ton aide, c'est rassurant !

[ghazal]

Re : Problème insertions iframe

Prenons les pb les uns après les autres.

* video youtube ou autres vimeo
comme tu débutes, aide-toi plutôt d'une extension spécialisée :

Video Channels - Joomla! Extensions Directory

http://extensions.joomla.org/extensions/social-web/social-media/video-channels

qui permet de calibrer l'affichage d'un lien vers une video sans te soucier de la dimension de l'iframe ( l'extension peut même ne pas utiliser d'iframe).

* firebug
aide-toi d'un tuto. Celui-là par ex.

Firebug : une merveille de plus pour Firefox

http://fr.openclassrooms.com/informatique/cours/firebug-une-merveille-de-plus-pour-firefox

*

J'ai d'autres codes iframe à insérer, pour afficher par exemple un tableau qui vient d'ailleurs,

Il existe le module Fenêtre intégrée (mod_wrapper) qui permet d'inclure une page extérieure via une iframe.

Mais un tableau ? Pourquoi l'insérer dans une iframe ?

[Matgo]

Re : Problème insertions iframe

Merci beaucoup pour tes réponses.

Alors,
En effet en passant par Video Chanels, j'arrive à afficher une vidéo youtube à la taille d'origine. Mais, cela va m'obliger à créer un module utilisant Video Chanels avec un loadposition à chaque fois que je voudrais insérer une vidéo youtube dans un article... ce qui risque de ne pas être très pratique à la longue.

Pour le coup du "tableau", c'est un insert de code qui m'est donné par un organisme et que je dois afficher dans un article. En l'insérant tel quel, par le bloc HTML de l'éditeur, ça me créé le petit ascenseur qui oblige à dérouler pour voir le tableau en question en entier, ce qui est très peu pratique (voir capture), alors que ce "tableau" n'est vraiment pas grand.


En fait, j'ai l'impression que tout mes inserts de code HTML quels qu'ils soient (et donc les vidéos youtube en direct dans le code de l'article) sont cantonnés aux mêmes petites dimensions par mon template, c'est vraiment le même problème.
C'est tout de même dingue que je puisse pas intégrer mes vidéos en direct aux dimensions originales...

[ghazal]

Re : Problème insertions iframe

Est-ce que tu sais comment faire une recherche d'un terme (en d'autres termes d'un string) sur tous les fichiers de ton template ?
Par ex. via un éditeur de code ... correct ?
En OpenSource pour Mac et Windows, je recommande Sublime Text 3
Un peu austère pour la prise en main, mais tres efficace. Plein de tutos sur le web.

Donc, en faisant une recherche, on trouve ceci dans template.css dans le dossier css du template st magazine:

iframe {
height: auto;
max-width: 100%;
}

ce qui peut eventuellement expliquer ton souci.

Astuce :
dans le backend, dans la Gestion de ton template st_magazine, tu devrais avoir un onglet 'Utilities",
dans Customize CSS, tu peux ajouter un fichier CSS, nommé par ex., mycustom.css

Une fois cette fonctionnalité sauvegardée, tu vas dans le dossier css/customize/ de ton template et tu crées un fichier mycustom.css

Tu pourras ainsi modifier les css dans toucher aux fichiers originaux.

[Rajoz]

Re : Problème insertions iframe

Bonjour Matgo,

Pour ajouter une vidéo YouTube dans un article, j'utilise le plugin AllVideos (http://extensions.joomla.org/extensi...-a-gallery/812). La taille est paramétrable et il existe même un template adaptatif (responsive).

Le texte à insérer dans l'article peut être aussi simple que {youtube}VCQw4UdbHYE{/youtube}

Je l'ai essayé rapidement avec le template ST Magazine et j'ai eu une vidéo de bonne hauteur.

Comme l'indique ghazal qui vient de me griller dans templates/st_magazine/css/template.css (ligne 44) il y a :

iframe {
    height: auto;
}

Pour aller plus loin il faudrait :

• avoir un lien sur ton site pour voir ce qui se passe (firebug, code source, etc.)
• avoir une idée du code HTML que tu insères et de comment tu l'insères dans l'article

En attendant, un premier essai rapide peut être de mettre ce code en commentaire (ajout en rouge), j'ai essayé avec AllVideos en template "classic" avec une une dimension de 400x400 px et j'ai bien obtenu un carré :

[COLOR=#ff0000][B]/*[/B][/COLOR]
iframe {
    height: auto;
}
[COLOR=#ff0000][B]*/[/B][/COLOR]

Amicalement,
Rajoz

[MODIF]
Le code que j'indique est celui de la version gratuite du template. Sur la démo qui doit correspondre à la version payante, il y a le code indiqué par ghazal avec max-width: 100%;
[/MODIF]

[Matgo]

Re : Problème insertions iframe

Les gars, franchement MERCI !!

En entrant directement {youtube}VCQw4UdbHYE{/youtube}, ma vidéo s'affiche parfaitement.
Ça c'est bon.

Reste mon code iframe.
Mon site est encore en local pour l'instant.
Voici le code que j'insère dans le bloc HTML via l'éditeur WISIWIG d'un article (je le colle simplement dans le code HTML entre deux <p> </p>) :

<IFRAME marginwidth="0" marginheight="0" vspace="0" hspace="0"
style="overflow:visible; " scrolling="auto" frameborder="0" SRC="http://www.marches-publics.info/avis/index.cfm?aff=marchesP.listeM&IDS=112&affLogo=true &affLien=true" width=550 height=400> </IFRAME>

A l'édition, ça s'affiche d'un seul tenant, mais ensuite, ça ressort avec un ascenseur sur les côtés qui m’empêche d'afficher l'ensemble d'un seul bloc.

J'ai essayé dans template.css de mettre en commentaire la partie en question (iframe) comme indiqué, mais cela ne change rien malheureusement.

[Rajoz]

Re : Problème insertions iframe

Bonjour Matgo,

D'abord j'ai mis en commentaire le height: auto; de la classe iframe dans template.css :

iframe {
    /* height: auto; */
    max-width: 100%
}

Ensuite, j'ai utilisé le plugin Percha Iframe (http://extensions.joomla.org/extensi...-iframes/16450).

Enfin dans un article dans ST Magazine, j'ai mis le texte suivant :

{iframe width="550" height="400"}http://www.marches-publics.info/avis/index.cfm?aff=marchesP.listeM&IDS=112&affLogo=true&affLien=true{/iframe}

Le résultat me semble correct, cad que la hauteur est bien réglée par les paramètres du plugin (j'ai essayé plusieurs hauteurs et plusieurs cibles). L'ascenseur n'apparaît que si la hauteur paramétrée pour l'iframe est inférieure à la hauteur de la page cible.

Au fait, pour afficher un Iframe il y a aussi un lien de menu de type contenu externe dont on peut paramétrer la hauteur. Même chose que précédemment, pour que ça marche il faut mettre en commentaire le height: auto; de la classe iframe.

[MODIF]
Je viens d'essayer avec ton code (un peu simplifié) et ça marche avec la mise en commentaire.

<p><iframe width="550" height="400" src="http://www.marches-publics.info/avis/index.cfm?aff=marchesP.listeM&amp;IDS=112&amp;affLogo=true&amp;affLien=true"></iframe></p>

Note : pour que TinyMCE accepte la balise iframe et ses paramètres, il faut dans le plugin enlever iframe de Eléments prohibés et ajouter iframe[*] dans Eléménts autorisés. Cela peut être à un autre endroit en fonction de ton éditeur.
[/MODIF]

Amicalement,
Rajoz

[ghazal]

Re : Problème insertions iframe

Juste un conseil général, si tu inseres du html genre
<script ou <iframe ou du meme acabit,
utilise un éditeur non WYSIWYG,
comme CodeMirror
ou Rokpad

[Matgo]

Re : Problème insertions iframe

Ça marche, MERCI !!
Au final j'ai l'impression que ça marche avec la première mise en commentaire que tu m'as donnée. Ce coup-ci tout sort bien, ce qui est dingue c'est que finalement je n'ai pas eu besoin d'enlever iframe de Eléments prohibés ni d'ajouter iframe dans Eléménts autorisés de TinyMCE...
(J'ai juste "applet" dans éléments prohibés et rien dans autorisés).

Je sais pas comment vous remercier.

Je vous tiendrais au courant si jamais j'ai ce problème qui ressort.

Merci !!