Extraire une image du sujet le plus récent d'une catégorie

[alv]

Bonsoir,
Je souhaiterais savoir comment extraire une image du sujet le plus récent d'une catégorie pour la mettre dans la description de la catégorie.
Le principe serait que le membre ayant posté le plus récemment dans une catégorie ait l'image de son forum qui apparaisse dans la description de la catégorie.

Comment faire ?

Merci d'avance.

[alv]

Up

[alv]

Up

[alv]

Up svp

[alv]

Up

[alv]

Up !

[alv]

Up

Personne ne peut m'aider ?

[[Nihil]]

Bonjour alv,

Pour nous aider à mieux comprendre serait il possible de nous donner le lien de ton forum s'il te plait ? Ensuite, il faudrait préciser à quel endroit (quelle description) devrait s'afficher l'image. Ainsi que à quoi ressemble le sujet dont on doit extraire l'image.

Pourrais tu également ouvrir aux invités (rendre visible) les parties concernant ta demande ? Comme ça on peut regarder directement à quoi ressemble la structure actuelle et plus facilement voir comment t'aider !

[alv]

Bonjour,
Voici le forum : lien
La catégorie concernée est celle-ci : lien (sur l'index, c'est la catégorie "Affichage"). Le sujet dont on doit extraire l'image n'est pas encore prévu. Carte blanche pour que ça marche.

[[Nihil]]

Nickel !
Je vois que tu as modifié ton template index_box, pourrais tu nous le mettre aussi s'il te plait ?

[alv]

En fait, je suis en train de refaire entièrement l'apparence sur un forum test.
Le template n'aura plus rien à voir. Pour l'instant, j'ai à peine touché ce template sur le forum test.

S'il y a des modifications à faire sur le template pour extraire l'image du sujet le plus récent, j'adapterai ce que j'aurai fait.

[[Nihil]]

Alors on y va !

Normalement dans le template de base, les descriptions sont affichées comme ça :

Code:

<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>

Ici on va rajouter une classe à la balise autour :

Code:

<span class="genmed description-container">{catrow.forumrow.FORUM_DESC}</span>

Cette classe nous permettra de nous repérer avec le JS ensuite.

Pour détecter le dernier sujet où un membre a posté, on va utiliser l'affiche des dernier message :

Code:

<span class="genmed description-container">
    {catrow.forumrow.FORUM_DESC}
    <span class="last-post-hidden" style="display:none">{catrow.forumrow.LAST_POST}</span>
</span>


Je rajoute une span avec un display none (comme ça elle n'apparaitra pas), qui nous servira juste parce qu’elle contient un lien qui nous intéresse.
Dans ton panneau d'admin, il faut impérativement afficher le titre du dernier sujet. PA > Affiche > Généralités > Structure et hiérarchie > Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui (sachant que si nécessaire, on peut ensuite le masquer en CSS).
On va ensuite utiliser ce lien avec le javascript pour aller dans le dernier sujet où quelqu'un a posté et récupérer l'image.

On va donc créer un nouveau javascript en mettant dedans :

Code:

$(function(){
 
    $('.replace-img').each(function(){ 
        var $this = $(this);
        /* on récupère le lien du dernier sujet */
        var urlSujet = $this.closest('.description-container').find('.last-post-hidden a').eq('0').attr('href');
     
        /* on va dans le dernier sujet */
        $.get(urlSujet, function(data){
            /* On récupère l'image puis on la remplace au bon endroit */
            $this.attr('src', $('#image-description', data).attr('src') || "url_image_par_défaut");
        });
    });
 
});

En remplaçant "url_image_par_défaut" par l'image à afficher par défaut s'il y a une erreur.

Ensuite, dans une description de forum tu mets ceci :

Code:

<img src="http://placehold.it/350x150" class="replace-img" />

Dans un sujet quand tu veux ajouter ton image à afficher, tu mets ceci :

Code:

<img src="http://lorempixel.com/output/fashion-q-c-640-480-10.jpg" id="image-description">

Sur mon forum test ça fonctionne bien, si tu rencontres le moindre problème, pense à laisser le code en place sur ton forum pour qu'on puisse regarder directement ce qui bug :p

A toi ensuite de jouer avec le HTML et le CSS pour lui donner la taille que tu veux

[alv]

Merci beaucoup d'avoir pris le temps de réaliser tout ça.

Ça ne marche pas
- J'ai affiché le titre du sujet du dernier message d'un forum sur l'index.

- J'ai mis le code javascript dans "Modules" > "Gestion des codes Javascript" sur toutes les pages.

Code:

$(function(){
         
            $('.replace-img').each(function(){ 
                /* on récupère le lien du dernier sujet */
                var urlSujet = $(this).closest('.description-container').find('.last-post-hidden a').eq('0').attr('href');
             
                /* on va dans le dernier sujet */
                $.get(urlSujet, function(data){
                    /* On récupère l'image puis on la remplace au bon endroit */
                    $(this).attr('src', $('#image-description', data).attr('src') || "http://servactif.net46.net/Nos%20partenaires.png");
                });
            });
         
        });

- J'ai mis ceci dans la description de la catégorie concernée :

Code:

<img src="http://placehold.it/350x150" class="replace-img" />

- J'ai modifié le template avec ceci :

Code:

<span class="genmed description-container">
   {catrow.forumrow.FORUM_DESC}
   <span class="last-post-hidden" style="display:none">{catrow.forumrow.LAST_POST}</span>
</span>

- J'ai posté un message dans la catégorie avec ceci :

Code:

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/f/f2/Core_Image_icon.png/96px-Core_Image_icon.png" id="image-description">

[[Nihil]]

Pour me permettre de voir d'où vient le problème, il faudrait que le code soit installé sur ton forum

Pourrais tu le mettre en place s'il te plait ? ^^

[alv]

Bonjour,
Excuse-moi, j'ai oublié de te dire que j'ai fait ça sur le forum test.
Voici le lien.

[[Nihil]]

Oups, j'avais misà jour le JS sur mon forum test et j'ai oublié dans ce topic là... ><

Voici le bon code JS :

Code:

$(function(){
 
    $('.replace-img').each(function(){ 
        var $this = $(this);
        /* on récupère le lien du dernier sujet */
        var urlSujet = $this.closest('.description-container').find('.last-post-hidden a').eq('0').attr('href');
     
        /* on va dans le dernier sujet */
        $.get(urlSujet, function(data){
            /* On récupère l'image puis on la remplace au bon endroit */
            $this.attr('src', $('#image-description', data).attr('src') || "url_image_par_défaut");
        });
    });
 
});

Par contre attention dans ta page tu as une petite erreur de JS :

Code:

document.getElementById('derniere_visite').innerHTML=document.getElementById('derniere_visite').innerHTML.replace(/ - /," à ");

Il n'y a pas d'élément avec l'id "derniere_visite" ^^

[alv]

J'ai changé le code JS et ça ne marche pas non plus
J'avais fait quelque modifications dans le template index_box. J'ai copié le template avant de tout supprimer et j'ai remis ceci :

Code:

<span class="genmed description-container">
    {catrow.forumrow.FORUM_DESC}
    <span class="last-post-hidden" style="display:none">{catrow.forumrow.LAST_POST}</span>
</span>

mais ça ne marche pas.

Par contre attention dans ta page tu as une petite erreur de JS :

Code:

document.getElementById('derniere_visite').innerHTML=document.getElementById('derniere_visite').innerHTML.replace(/ - /," à ");

Il n'y a pas d'élément avec l'id "derniere_visite" ^^

Il n'y a pas d'erreur
L'id "derniere_visite" n'est visite que pour les membres :

Code:

<!-- BEGIN switch_user_logged_in -->
<font size="2" id="derniere_visite">{LAST_VISIT_DATE}</font>
<!-- END switch_user_logged_in -->

J'ai corrigé en mettant la ligne de js entre ces balises "... switch_user_logged_in".

[[Nihil]]

As tu vérifié que le javascript était bien activé ? Sur ton forum test je ne le vois pas

[alv]

Euh... oups
C'était pas activé

Maintenant, ça marche
Désolé de t'avoir fait perdre ton temps.

Mille merci pour ton aide précieuse et t'as patience.