Insérer une image dans la description d'un sujet

[melusine711]

Rappel du premier message :

Bonjour à tous,

Comme mon titre le souligne, j'aimerai insérer une image dans la partie "description" d'un sujet. J'ai fait des recherches sur votre forum d'aide et nombreux sujets disent qu'il est impossible de le faire. Hors il n'est pas impossible de le faire car je l'ai vu fait sur un autre forum de forumactif. J'ai demandé et ils m'ont dit qu'il faut insérer l'image dans la description du sujet. Dans l'arborescence des sujets d'une rubrique chacun d'eux à une image sous le titre du sujet.

Je sais qu'il faut utiliser ce code :

Code:

<td class="row1" onmouseover="this.className="row2"" onmouseout="this.className="row1"" width="100%"><div class="topictitle"><h2 class="topic-title"><a class="topictitle" href="URL du sujet"><span style="color:#6600FF; text-decoration:none;">Titre du sujet</span></a></h2></div><div class="description genmed"><div style="display: none;" class="topicImage"><img src="URL de l'image"></div></div><span class="gensmall"></span> <span class="gensmall"><br> [ <img src="URL Image 2" alt="Aller à la page" title="Aller à la page">Aller à la page: <a href="URL page du sujet">1</a>, <a href="URL page du sujet">2</a>, <a href="URL page du sujet">3</a>]</span></td>


C'est cette partie ci-dessous qui m'intéresse :

Code:

<div class="description genmed" >
      <div class="TopicImage" >
          <img src="URL de l'image" ></img>
      </div>
</div>

mais où l'insérer ? Faut-il du CSS en plus et lequel ou encore des scripts. Bref je cherche depuis 24h mais ne trouve pas et c'est en vain que je me tourne vers vous.

L'admin du forum en question ne peux pas plus m'aider dans le sens ou c'est son ancienne admin qui avait fait des manips. Elle, elle a juste à entrer l'URL de l'image dans la case "description" du sujet.

Merci à tous ceux qui pourraient éventuellement m'aider.

[Neptunia]

Coucou !

En attendant que l'ancienne fondatrice retrouve son script, je te propose une parade.

Il te faudra
- L'accès au compte fondateur.
- Etre évidemment en version PunBB ou phpBB2.
- Une sauvegarde de ton template topics_list_box

Direction le template topics_list_box :

Remplacer : (Ligne 89 sous PunBB / Ligne 64 en phpBB2 si templates non modifiés)

Code:

{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}

par :

Code:

<img src="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}"></img>

Le code se passe d'explications !
Tu peux évidemment encapsuler la bestiole dans un div ou un span pour lui attribuer un id et/ou une class, si tu souhaite pouvoir agir en plus via ta CSS.

Par contre ça reste du bricolage et demandera à être amélioré.
- Si tu met l'url d'une image en guise de description, ça passe impec.
- Si tu ne mets rien, aucun souci non plus.
- Par contre si tu met du texte autre qu'un lien d'image, là ça va coincer.

Cordialement.

[melusine711]

Oh merci Aof pour ta parade ! Je vais essayé ça ! C'est déjà un début.

- L'accès au compte fondateur = oui.
- Etre évidemment en version PunBB ou phpBB2 = version phpBB2 .
- Une sauvegarde de ton template topics_list_box = faite.

Si cela doit ête amélioré pas de soucis. Maintenant que j'ai un ebas et que tu dis que cela passe impec.

Par contre le petit hic que tu mentionnes me fais soucis. J'ai d'autres sujets avec en description du texte. Que va-t-il se passer pour ce texte ? Disparaître ? ça c'est pas bien grave. Me faire des erreurs ? Ouh la la !

Merci encore je vais de ce pas m'y atteler.

Edit : ça marche ! ça marche les enfants ! J'ai mon image qui s'affiche dans la description du sujet.
Maintenant je vais aller vérifier mes autres sujets où j'ai du texte pour voir si ça coince !
Merci Aof Neptune ! Je re.

Edit : Alors pour le texte dans la description il a disparu. Donc maintenant il faudrait essayé de "bidouiller" pour que ceux qui ont beaucoup de sujet avec description en texte puisse avoir les deux.
Je pense que le code que doit me faire passer l'admin doit contenir la solution pour avoir justement les deux car sur son forum il y a ou le texte ou l'image.

En attendant, je souhaite rajouter que dans ma description du sujet pour que mon image s'affiche j'ai entré non pas l'URL entre les balises [img][/img] mais tout simplement comme ceci :

Code:

http://img15.hostingpics.net/thumbs/mini_667338SilentNight.png

[Neptunia]

Oui c'était le but du jeu d'entrer l'URL brute vu que tu disais que c'était comme cela sur un forum.

Evidemment mon code va essayer d'afficher sous forme d'image tout texte et si ce n'est pas une URL il t'affichera l'icône des images indisponibles.

Pour le reste, je pense qu'il faudra recourir au javascript pour vérifier que le texte commence par http:// et finit par une extension graphique .png .gif .jpg.

Rien d'a priori insurmontable, mais Javascript et moi, on n'est pas très copains...

[melusine711]

Rassures-toi moi c'est pareil : le javascript pour moi aussi c'est du chinois. Je crois que je vais essayé d'apprendre le chinois ! Peut-être qu'après je comprendrais le javascript ! Non je rigole. J'essaierai bien de m'y mettre sérieusement au javascript mais il faut du temps et je n'en ai pas puis le peu que j'ai lu, ouh la la ! Cela m'a retourner le cerveau ou l'a fait fumer, bref je n'étais pas dedans.

Je ne désespère pas. Je script que j'ai posté plus haut je suis sûre qu'il me faut l'insérer quelque part mais je sais pas où. Et j'ose pas trop testé car j'ai peur de perdre mon fofo.

[Delire2scrap]

Bonjour !

La réponse se trouve ici, en bas de page
https://forum.forumactif.com/t273372-faire-apparaitre-une-image-sur-un-lien

Et cela marche très bien pour les forums aux templates non-modifiés.

Bonne journée

[melusine711]

Waouh merci Delire2scrap :youopi: Pourquoi t'es pas venue plus tôt ? :lol!: Oui je sais tu vas me dire que j'aurai dû t'en parler plus tôt. La prochaine fois je te demande dès que j'ai une idée ma belle et que j'y arrive pas. Cela m'évitera certainement de faire fumer mon cerveau et essayé de me battre avec le javascript.

J'ai vite fait survolé les réponse du sujet et apparemment c'est bien ce que je proposais en script. Mais ne savais pas où le placer. Et il y a du CSS je m'en doutais. Et en plus c'est l'admin en question dont je vous parlais. Apparemment tout y est. Maintenant à ce que j'ai compris il ne faut pas avoir ce template topics_list_box de modifié. Moi il n'est pas modifié sauf juste la ligne 64 que j'ai fait tout à l'heure.

Je vais testé ça après et je vous tiens au courant.

[Dragon12901]

Yep la foule,

Je vois que la solution à été trouver mais il me reste quand même moi le souci, le fait de mettre ce script la ne va pas coincer avec celui que j'ai déjà actuellement ? qu'il me sert à faire apparaître un menu déroulant ?

Ou faut t'il que une fois ce sujet fini il faut que j'ouvre un nouveau sujet ?
car je vois pas les personne lire tous se qu'il y a été écrit lol



EDIT : Bien ce que je pensai c'est mon menu déroulant qui prend le dessus, j'ouvrirais un nouveau sujet quand celui ci sera fermer pour ne pas tous mélanger

Encore bravo encore à tous.



RE-EDIT : SA marche J'ai tester en désactivent mon menu déroulant (la curiosité lol de voir si sa marche) mais il y as quand même un petit ic qui reste enfin 3 exactement

-L'image est partager entre le 1er et 2éme sujet, elle est sur 2 ligne quoi, et l'image n'est pas centrer, et enfin l'image n’apparait qu’uniquement au survol de la sourie, donc faut trouver pourquoi l'image est sur 2 ligne n'apparait que au survol de la sourie et comment la centrer

[melusine711]

Alors oui c'est la solution. Je donne la soluce Dragon et je suis à toi.

En fait au départ cela ne fonctionnait pas ! Encore que du texte. En fait j'ai juste changer le CSS .topicImage

Je vous met ce que j'ai fait exactement :

Donc le script à insérer au début du template topic_list_box :

Code:

<script type="text/javascript">
        jQuery(document).ready(function(){
        jQuery(".description").each(function(){
          var content = jQuery(this).html();
          var detector = /\[img\](.*)\[\/img\]/ ;
          var url = detector.exec(content );
          content = content.replace(url[0],"<div class='topicImage'><img src='"+url[1]+"'/></div>");
          jQuery(this).html(content);
        });
       
        jQuery("div.topictitle").mouseover(function(){
          jQuery(this).parent().find(".topicImage").fadeIn(200);
        });
        jQuery("div.topictitle").mouseout(function(){
          jQuery(this).parent().find(".topicImage").fadeOut(200);
        });
        });
        </script>


Toujours dans ce template donc à la place de :

Code:

<!-- BEGIN switch_description -->
          <span class="genmed">                    {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
          </span>
<!-- END switch_description -->


Mettre :

Code:

<!-- BEGIN switch_description -->
         <div class="description genmed">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
           </div>
<!-- END switch_description -->


Publier le template.
Puis dans le CSS :

Code:

.topicImage {
         style-display : none ;       
        }


position absolute me mettais l'image hors des cases. Display none seul me mettait du texte à la place et non l'image. Ensuite je pense qu'on peut rajouter des variables pour entourer l'image, la centrer (enfin je pense j'ai pas testé.)

Dragon pour ton script je sais pas. Essaie d'insérer celui-ci aussi dans ce template. Fais une sauvegarde de celui-ci avant bien sûr. Où peut-être que tu peux coordonner une partie de ton script dans celui-ci et en rajoutant dans cette partie :

content = content.replace(url[0],"<div class='topicImage'><img src='"+url[1]+"'/></div>")

tu peux rajouter avant ou après <div class='topicImage'><img src='"+url[1]+"'/></div> une autre class dans le CSS.

Je vais essayé de me pencher sur ton script car j'arrive là à presque déchiffrer le script actuel en ayant tous les éléments placés à leur place. Je dis presque car il y a encore quelques "mots" que j'arrive vaguement à comprendre.

Quand à savoir s'il te faux ouvrir un autre sujet de ça je ne peux pas te répondre.

[Dragon12901]

Heu avec tes code l'image n'est plus la il n'y plus que le lien

[melusine711]

Et si tu enlèves ton script ?

[Dragon12901]

Ba en fait javais carement désactiver les java donc..

[melusine711]

ça marche alors ?

[Dragon12901]

Ba non pour essayer tes codes j'ai désactiver mes java donc mes scripts qui me remplace la description par le menu déroulant et donc vu que tes code sont placer en Templates, il devrais marche car les autres marche avec les lacune que j'ai indiquer mes les tiens par contre ne marche pas du tous on ne vois que le lien au lieu de l'image

[melusine711]

Tu as tout mis comme moi ? Même le CSS ? Tu l'as mis dans la feuille de style ?

[Dragon12901]

Oui oui j'ai coller la premiere partie du topic_list_box, ensuite j'ai chercher la description et j'ai remplacer, et j'ai mis le petit morceau CSS comme l'autre en faite sauf que lui sa marche et toi non, mais lui

-pas centrer
-sur 2 lignes
-et uniquement au survol de la sourie

[melusine711]

Sur deux lignes parce qu'il te faut enlever : position absolute.
Pas centrer moi non plus mais ça on peut trouver et l'ajouter au CSS .topicImage
Uniquement au survol de la souris ? Que veux-tu dire ? Moi lorsque je suis sur le panneau où j'ai tout mes sujet, y a les images à chacun d'eux et oui ensuite quand je passe la souris sur l'image, elle disparait et quand je repasse sur le titre elle réapparait. C'est ça ce dont tu parles ? Je sais que ça c'est embétant mais je pense que c'est dans le script : j'y ai vu un truc du style "onmouseover" quelque chose comme cela. Je suis sûre que c'est cela. Mais je n'ose y toucher car je ne sais pas su tout si c'est LE rapport.

Si dans ton CSS cela marche avec juste display : none laisses-le tel quel. Moi cela ne fonctionnait pas j'ai mis style-display : none.

[Dragon12901]

Ba en fait je ne vois pas l'image elle apparais uniquement quand je passe la sourie dessus et ensuite se remet à disparaitre, mouarff

[melusine711]

Bizarre. Quand tu arrives sur ton panneau des sujets, tu n'as pas l'image juste le titre des sujets ? Et tu as l'image qui apparait que quand tu passe dessus puis plus rien c'est ça ? Moi j'ai l'image et tant que je passe pas ma souris dessus elle reste mais dès que je vais passer dessus youp elle disparait aussi.

Je vais essayer de chercher du côté du "onmouseover" sur le script.

[Dragon12901]

Oui oui c'est sa lol mais si toi sa te fait l'inverse de moi la je pige plus rien lool,
tu c'est quoi demain il fera jour, et je recommencerai tous à 0 pour voir et je te dirais sa .

[Dragon12901]

Bonsoir,

Alors on résume le tous,

De 1 : sa =>

Code:

<script type="text/javascript">
        jQuery(document).ready(function(){
        jQuery(".description").each(function(){
          var content = jQuery(this).html();
          var detector = /\[img\](.*)\[\/img\]/ ;
          var url = detector.exec(content );
          content = content.replace(url[0],"<div class='topicImage'><img src='"+url[1]+"'/></div>");
          jQuery(this).html(content);
        });
       
        jQuery("div.topictitle").mouseover(function(){
          jQuery(this).parent().find(".topicImage").fadeIn(1500);
        });
        jQuery("div.topictitle").mouseout(function(){
          jQuery(this).parent().find(".topicImage").fadeOut(1500);
        });
        });
        </script>

Et sa : =>

Code:

<!-- BEGIN switch_description -->
          <div class="description genmed">
              {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
          </div>
        <!-- END switch_description -->

Et aussi sa : =>

Code:

 .topicImage {
        position :  display : none ;
       
        background : #000000 ;
        border : solid 1px;
        padding : 10px ;
        }

sa le fait !

-Image centrer
-Sur la bonne ligne

-Mais le souci comme je l'ai dit et si moi sa me le fait je pense que toi sa doit être pareil, l'image est la ok ! mais au moment ou tu passe la sourie dessus et que tu l’enlève l'image s'enlève et reviens uniquement au passage de la sourie, c'est dommage car à part sa comme souci, le problème est régler.


EDIT : J'ai trouvé

dans ce code la :

Code:

<script type="text/javascript">
        jQuery(document).ready(function(){
        jQuery(".description").each(function(){
          var content = jQuery(this).html();
          var detector = /\[img\](.*)\[\/img\]/ ;
          var url = detector.exec(content );
          content = content.replace(url[0],"<div class='topicImage'><img src='"+url[1]+"'/></div>");
          jQuery(this).html(content);
        });
       
        jQuery("div.topictitle").mouseover(function(){
          jQuery(this).parent().find(".topicImage").fadeIn(1500);
        });
        jQuery("div.topictitle").mouseout(function(){
          jQuery(this).parent().find(".topicImage").fadeOut(1500);
        });
        });
        </script>

Et bien il faut enlever :

Code:

  jQuery("div.topictitle").mouseover(function(){
          jQuery(this).parent().find(".topicImage").fadeIn(1500);
        });


et pour 1500 qui sont des milliseconde c'est la disparition de l'image donc moi j'ai mis "9999999999"
comme sa plus de souci, donc le code ressemble à sa :

Code:

<script type="text/javascript">
        jQuery(document).ready(function(){
        jQuery(".description").each(function(){
          var content = jQuery(this).html();
          var detector = /\[img\](.*)\[\/img\]/ ;
          var url = detector.exec(content );
          content = content.replace(url[0],"<div class='topicImage'><img src='"+url[1]+"'/></div>");
          jQuery(this).html(content);
        });
        jQuery("div.topictitle").mouseout(function(){
          jQuery(this).parent().find(".topicImage").fadeOut(9999999999);
        });
        });
        </script>

-Image centrer
-Sur 1 ligne
-Ne disparais plus

voilas, maintenant faut voir comment je doit intégrer mon script java et ce code qui se trouve dans une template ^^ ouaa
tu peut mettre [RESOLU] si pour toi c'est bon, ou alors si souci on cherchera encore

[Dragon12901]

T'en est ou tu as essayer ?

[claudius39]

Bonsoir,


-Mais le souci comme je l'ai dit et si moi sa me le fait je pense que toi sa doit être pareil, l'image est la ok ! mais au moment ou tu passe la sourie dessus et que tu l’enlève l'image s'enlève et reviens uniquement au passage de la sourie, c'est dommage car à part sa comme souci, le problème est régler.


EDIT : J'ai trouvé

dans ce code la :

Code:


        jQuery(document).ready(function(){
        jQuery(".description").each(function(){
          var content = jQuery(this).html();
          var detector = /\[img\](.*)\[\/img\]/ ;
          var url = detector.exec(content );
          content = content.replace(url[0],"
[img]"+url[1]+"[/img]");
          jQuery(this).html(content);
        });
       
        jQuery("div.topictitle").mouseover(function(){
          jQuery(this).parent().find(".topicImage").fadeIn(1500);
        });
        jQuery("div.topictitle").mouseout(function(){
          jQuery(this).parent().find(".topicImage").fadeOut(1500);
        });
        });
       

Et bien il faut enlever :

Code:

  jQuery("div.topictitle").mouseover(function(){
          jQuery(this).parent().find(".topicImage").fadeIn(1500);
        });


et pour 1500 qui sont des milliseconde c'est la disparition de l'image donc moi j'ai mis "9999999999"
comme sa plus de souci, donc le code ressemble à sa :

Code:


        jQuery(document).ready(function(){
        jQuery(".description").each(function(){
          var content = jQuery(this).html();
          var detector = /\[img\](.*)\[\/img\]/ ;
          var url = detector.exec(content );
          content = content.replace(url[0],"
[img]"+url[1]+"[/img]");
          jQuery(this).html(content);
        });
        jQuery("div.topictitle").mouseout(function(){
          jQuery(this).parent().find(".topicImage").fadeOut(9999999999);
        });
        });
       

-Image centrer
-Sur 1 ligne
-Ne disparais plus

Tu n'as pas enlevé ce que tu dis, juste changer un in en out et mis 99999999 au lieu de 1500, enfin, si j'ai bien lu !!! ?

J'ai mal lu, je sorts !!!

[Dragon12901]

C'est sa que j'ai virer du script

Code:

jQuery("div.topictitle").mouseover(function(){
          jQuery(this).parent().find(".topicImage").fadeIn(1500);
        });

Tu vois pas qu'il est manquant

Car il étais composer comme sa :

Code:

 jQuery("div.topictitle").mouseover(function(){
          jQuery(this).parent().find(".topicImage").fadeIn(1500);
        });
        jQuery("div.topictitle").mouseout(function(){
          jQuery(this).parent().find(".topicImage").fadeOut(1500);
        });
        });
       

[claudius39]

Bonsoir,


-Mais le souci comme je l'ai dit et si moi sa me le fait je pense que toi sa doit être pareil, l'image est la ok ! mais au moment ou tu passe la sourie dessus et que tu l’enlève l'image s'enlève et reviens uniquement au passage de la sourie, c'est dommage car à part sa comme souci, le problème est régler.


EDIT : J'ai trouvé




-Image centrer
-Sur 1 ligne
-Ne disparais plus

Tu n'as pas enlevé ce que tu dis, juste changer un in en out et mis 99999999 au lieu de 1500, enfin, si j'ai bien lu !!! ?

J'ai mal lu, je sorts !!!

Oui, j'ai vu après avoir relu ! Excuse-moi !!!

[melusine711]

Oops désolé tout le monde j'ai dû m'absenter hier toute la journée.

Ben dis donc dragon12901 apparemment tu as trouver. Tu as bien travaillé ! Bon je vais mettre en place ta soluce. Et si moi cela fonctionne, je met en résolu.

[Dragon12901]

Ok nikel comme sa maintenant je vais pouvoir lancer le sujet comment couplé mes 2 scripts lol

[melusine711]

Alors je met le sujet en résolu car cela fonctionne nikel ! Merci à tout le monde qui est venu donné un coup de main.