Affichage premiers messages des posts à partir du flux rss

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Affichage premiers messages des posts à partir du flux rss

Message par photoclic Lun 27 Déc 2021 - 14:22

Bonjour,

J'utilise et partage ici ce script qui récupére les image du premier message des derniers sujets par l'intermédiaire du flux rss de mon forum;
Il intéressera je pense quelques membres.

Code:

//ne rien cocher dans pages des js
$(function(){
 var feed,f=GetParam("f");if(isNaN(f)||f==null)f='';
 else f=("?f="+f);
  feed="/feed";
  
  $.ajax({
    type:"GET",
    url: "/feed",
    dataType:"xml",
    success:function(xml){var c3=$(xml).find('image:first');
 $("#learn img").attr("src",c3.find('url').text());
 $("#update").text($(xml).find('lastBuildDate:first').text());
 $("#feedTitle").text(c3.find('title').text());
 $(xml).find('item').each(function(){var title=$(this).find('title').text();
 var link=$(this).find('link ').text();
 var creator=$(this).find('dc\\:creator,creator').text();
 var pubDate=$(this).find('pubDate').text();
 var category=$(this).find('category').text();
 var comments=$(this).find('comments').text();
 var description=$(this).find('description').text();
 if(description=="")description="(empty)";$("#itemsUl").append("<li><h2><a href='"+link+"'><b>"+title+"</b></a></h2><p>Sujet du : <b>"+pubDate+"</b></p><p class='creator'>Posteur : <b>"+creator+"</b></p><div>"+description+"</div><p class='cat'>Forum : <b>"+category+"</b></p><p><a class='newpost' href='"+comments+"'>Lire le sujet‘</a></p></li>"
 )})}})});
 
 function GetParam(name){var match=new RegExp(name+"=([^&]+)","i").exec(location.search);
 if(match==null){match=new RegExp(name+"=(.+)","i").exec(location.search)}if(match==null){return null}match=match+"";
 result=match.split(",");return result[1]}

Je les présente ensuite avec cette page html qui fait appel à ce js:
Code:
   
<meta http-equiv="content-type" content="text/html; charset=utf-8" />    <title>Les derniers sujets</title>    
<style type="text/css">
    html,body {
     margin:0;
     padding:0;
     border:0;
    }
    body {
     color:#ccc!important;
     background:#575757;
     text-align:center;
     font:normal normal .9em/1.5em sans-serif;
     padding:1.3em 0;
     text-decoration: underline;
    }
    body[class]:after {
     position:fixed;
     top:0;
     left:0;
     right:0;
     bottom:0;
     background:#6d900e;
     content:attr(class);
     text-transform:uppercase;
     padding-top:50%;
     text-align:center;
    }
    h1 {
     margin:0;
     font-size:1.5em;
     line-height:1.5em;
     display:inline;
    }
    h1:before {
     display:inline;
     overflow:hidden;
     vertical-align:middle;
     content:-o-skin('Mail Newsfeeds');
     margin-right:.2em;
     line-height:1.5em;
    }
    #learn {
     color:#6d900e;
     float:right;
     font-size:.75em;
     padding:0; margin:0;
     margin-right:2em;
    }
    #heading {
     margin-top:0px;
     background-color: #6d900e;
     background-image: -moz-linear-gradient(top, #333, #222);
     background-image: -ms-linear-gradient(top, #333, #222);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#222));
     background-image: -webkit-linear-gradient(top, #333, #222);
     background-image: -o-linear-gradient(top, #333, #222);
     background-image: linear-gradient(top, #333, #222);
     background-repeat: repeat-x;
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='#222222', GradientType=0);
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     color:#fff;
     text-align:left;
     padding:6px 20px 6px 30px;
    }
    #heading select,#heading button {
     margin:0 2ex;
     min-width:16ex;
    }
    a {
     text-decoration:none;
    }
    a:hover {
     text-decoration:underline;
    }
    #items {
     display:block;
     clear:both;
     text-align:center;
     margin:2em 0;
     padding:0;
     overflow:hidden;
    }
    #items>ul {
     position:relative;
     list-style:none;
     margin:0;
     padding:0;
     border:0;
     width:auto;
     display:inline-block;
     text-align:left;
    }
 #items>ul>li {
    vertical-align: top;
    font: normal normal .8em/1.6em sans-serif;
    display: inline-block;
    margin: 0 2.5%;
    padding: 0;
    width: 20%;
    position: relative;
 }
    #items>ul>li>h2 {
     font:normal lighter 1.66em/1.1em sans-serif;
     margin:0;
     color:#6d900e;
     border-bottom:1px solid #ccc;
    }
    #items>ul>li>h2>a {
     display:block;
     color:#f4f9ff;
     padding:0.5em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }
    #items>ul>li>h2>a:hover {
     background:#4d78a0;
     text-decoration:none;
    }
    #items>ul>li>p {
     color:#e7efc5;
     text-align:right;
     margin:1.1ex;
     font-size: 1em;
     line-height:1.3em;
     white-space:pre-wrap;
    }
    #items>ul>li a {
     color:#ffbcbc;
    }

#items>ul>li>div {
    text-align: justify;
    max-height: 370px;
    margin: 0;
    padding: 0 1ex;
    color: #C9C9C9;
    vertical-align: top;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
    
    #items>ul>li>div pre {
     font:.9em/.9em monospace;
     background:#eee;
     overflow:auto;
     border:1px solid #999;
     border-width:1px 0;
     padding:1em;
     clear:both;
    }
    #items>ul>li>div pre a {
     font-style:normal;
    }
    #items>ul>li>div p {
     clear:both;
     margin:0 0 2em 0;
    }
    #items>ul>li>div a {
     font-style:italic;
     margin-right:.25em;
    }
    #items>ul>li>div img {
     position:relative;
     display:inline-block;
     vertical-align:middle;
     max-width:100%;
     max-height:50ex;
     padding:.5ex;
     box-sizing:border-box;
     ;
    }
    #items>ul>li>div h1,#items>ul>li>div h2,#items>ul>li>div h3,#items>ul>li>div h4,#items>ul>li>div h5,#items>ul>li>div h6,#items>ul>li>div div {
     display:block;
     clear:both;
    }
    #footer {
     font-size:.85em;
    }
    #footer a {
     color:#b00;
    }
    @media handheld {
     body {
     font:normal normal 1em/1.5em sans-serif;
     padding:1em 0;
     }
     #heading>button {
     display:inline;
     width:auto;
     margin:0 .5em;
     height:auto;
     }
     #items {
     margin:1em 0;
     }
     #items>ul {
     display:block;
     }
     #items>ul>li {
     font:normal normal 1em/1.5em sans-serif;
     display:block;
     padding:1em;
     margin:0;
     width:auto;
     background:#fff;
     }
     #items>ul>li:nth-child(2n) {
     background:#eee;
     }
     #items>ul>li>h2 {
     font:normal bold 1.33em/1.2em sans-serif;
     }
     #items>ul>li>h2>a:hover {
     background:#ddd;
     }
     #items>ul>li>div {
     border:0;
     padding:0;
     margin:0;
     }
     #items>ul>li>div:after {
     clear:both;
     content:' ';
     display:block;
     }
     #items>ul>li>div pre {
     font:1em/1em monospace;
     background:#ddd;
     }
     #items>ul>li>div a {
     font-style:normal;
     }
     #footer a {
     font-size:1em;
     }
    }
    embed,img,table {
     max-width: 600px
    }</style>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script><script type="text/javascript" src="https://photoclic.forum-pro.fr/32379.js">
    </script>
 
<h1 id="feedTitle">
</h1>
    <br />
    
<div id="items">
<ul id="itemsUl">
</ul>                                                          
</div>

Le souci est que certaines images ne sont pas prises comme on peut le voir ici et je ne comprends pas pourquoi:
https://photoclic.forum-pro.fr/h3-lecture-du-premier-message-des-derniers-sujets

Merci pour votre aide.


Dernière édition par photoclic le Mar 28 Déc 2021 - 17:20, édité 4 fois
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Affichage premiers messages des posts à partir du flux rss

Message par Toryudo Mar 28 Déc 2021 - 0:07

Bonjour !
Première fois que je vois une utilisation du flux RSS pour faire des choses de la sorte, alors je ne vais pas forcément pouvoir répondre à toutes les interrogations. Il faudra que l'équipe des développeurs de Forumactif confirme éventuellement certaines choses.

Je remarque deux problèmes différents :

  • dans certaines conditions, le CSS peut masquer des images à cause des propriétés suivantes :
    Code:
    #items > ul > li {
        width: 20%;
    }
    #items > ul > li > div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    Ensemble, elles signifient qu'il ne faut pas aller à la ligne si le texte dépasse du cadre, c'est-à-dire du width: 20%; qui est appliqué à la balise <li>, et qu'il faut plutôt remplacer le reste de la phrase par "...". Sur ma résolution par exemple, le cumul de ces CSS rend impossible l'affichage de l'image sur le sujet [Animaux] Martin pêcheur qui a p..., parce que l'image se trouve à la suite du texte qui est coupé :

    Affichage premiers messages des posts à partir du flux rss Captur18

    Ça ne le fait pas partout parce qu'il faut vraiment que la phrase soit suivie de l'image, sans aucun retour à la ligne. Il aurait suffit d'un retour à la ligne pour que l'image s'affiche, ou il faudrait revoir le CSS de cette page pour prendre en compte ce genre d'éventualité.

  • dans la génération du RSS, il y a un fonctionnement particulier que je pense avoir deviné en vérifiant celui disponible sur votre forum. Le code JavaScript est bon, mais le RSS a deux comportements différents. Voici deux posts, un pour lequel l'image s'affiche et un pour lequel elle ne s'affiche pas.
    Affichage premiers messages des posts à partir du flux rss Captur19

    Affichage premiers messages des posts à partir du flux rss Captur20

    Je ne sais pas si c'est évident d'un coup d'œil, mais pour la première, on a du code HTML dans le <description> (un <a>, le <img>, etc.) alors que sur la seconde, on n'en a pas. Ça revient tout le temps pour le membre Bertidom, parfois pour le membre seb38360... et après plusieurs tests sur mon forum personnel, je pense avoir compris : si le texte du post est plus long que 500 caractères balises HTML comprises, alors les balises HTML sont supprimées... et si le texte sans balises HTML est toujours plus long que 500 caractères, alors on n'affiche que les 500 premiers caractères et on complète avec "...".
    Ce genre de chose n'est pas de votre fait et je ne pense pas qu'il soit paramétrable, c'est sans doute un choix de l'équipe technique (plutôt logique, le flux RSS proposant des résumés plutôt que des recopies de textes complets).


Conclusion :
Ce que je peux vous proposer, c'est de demander aux posteurs de votre forum une rigueur particulière qui permettra de toujours avoir un flux RSS propre, permettant de bien récupérer les informations dans votre page web. Il faudra donc que les posteurs commencent par l'image, complètent avec un petit texte après avoir sauté au moins une ligne, et n'écrivent pas trop pour que le tout ne dépasse pas les 500 caractères. Je dois préciser que le nombre de caractère présent dans le flux n'est pas forcément égal à ce que vous écrivez en bbcode, il est même souvent supérieur. Par exemple, ce code de 111 caractères :
Code:
[url=https://servimg.com/view/20340632/28][img]https://i.servimg.com/u/f48/20/34/06/32/panthz12.jpg[/img][/url]
Sera transformé en un code HTML de 155 caractères :
Code:
<a href="https://servimg.com/view/20340632/28" target="_blank" rel="nofollow"><img src="https://i.servimg.com/u/f48/20/34/06/32/panthz12.jpg" alt="" /></a>

C'est encore pire pour un smiley, puisque deux caractères se transforment vite en une longue balise <img> de 90 caractères... Mieux vaudrait les éviter également dans les posts.
Moins les gens écriront et mieux cela fonctionnera.

Ce sera ça ou demander une évolution/suggestion sur ce forum, qui mettra éventuellement du temps à être mise en place si tant est qu'elle est acceptée... mais même si elle l'est, il restera une limite à ne pas dépasser, parce qu'un flux RSS restera un résumé, sa fonction normale !
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1349
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Affichage premiers messages des posts à partir du flux rss

Message par photoclic Mar 28 Déc 2021 - 12:16

Bonjour Toryudo,

Un grand merci pour ton analyse détaillée.

Oui, l'utilisation du flux rss pour afficher une page présentant une synthèse des premiers messages des sujets images comprises est assez originale. Il y a surement une façon de faire en JS. Cela existe peut-être ailleurs.

C'est effectivement le texte associé à la photo qui semble poser problème. Je vais demander aux posteurs de suivre tes recommandations pour le texte, sans conviction car ils m'ont souvent dit que la technique n'était pas leur souci :-)

Pour une évolution/suggestion sur ce forum, il y a effectivement peu de chance qu'elle aboutisse étant probablement le seul concerné par ce souci.
Je vais réaliser la même chose autrement.

Grand merci encore pour ton travail et je vais voir avec les membres.

Bon réveillon à toi.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum