[PHPBB3] Photos ayant reçu 1 j'aime (Best)

Hello Serge,

tu peux me donner le lien du forum concerné stp.


On va juste créer une page html et insérer le lien autour de l'image.
L'avantage de procéder avec une page html est que la requête ne se fera pas sur l'index mais bel est bien sur cette page html.

Bonjour Philippe,

Ravi de revenir par ici.

Le lien du forum phototest:
https://photoclic.forum-pro.fr/f4-phototest#M14

Ravi de te revoir aussi sur le fofo,
je m'ennuyais de tes photos   .

En espérant qu'il n'y ait qu'une photo sur le premier message car j'ai fait mes essais ainsi.

Alors par contre, on va importer les photos ayant reçu au moins 1 Best
mais juste sur la première page de cette liste de sujets:

https://photoclic.forum-pro.fr/f4-phototest

Comme on importe avec un get:

Code:

$.get('/f4-phototest' , function(data){

la deuxième page étant ainsi:

https://photoclic.forum-pro.fr/f4p30-phototest

On ne pourra pas faire autrement Serge .

Le résultat imagé:



Chaque widget aura le titre et son lien et au survol affichera le titre du sujet car j'ai pensé a ajuster le titre en fonction de sa longueur.


Alors il faut créer une page html :
Titre * : Importation Photos best ( ou autre chose)
Voulez-vous utiliser le haut et le bas de page de votre forum ? Oui
Utiliser cette page en tant que page d'accueil ? Non

Déposes tout ce contenu:

Code:

<div class="M14_best_like">Les bests ayant reçu un Best</div>

<style>
  /*Le titre en haut de page*/
.M14_best_like{width:100%;text-align:center;color:#20aec8;font-size:18px;display: inline-block;height: 30px;line-height: 30px;margin: 15px 0px 15px 0px;}
#main-content{height:auto;}
  /*le bloc recevant les widgets*/
  .M14_importation{width:100%;min-height:750px;max-height:3000px;height:auto;text-align:center;}
  /*Les widgets*/
div.M14_importation_widget{float:left;width:350px;height:370px;margin:2px;text-align:center;border:2px solid #20aec8;}
  /*Les titres de sujet*/
a.M14_link
  {
  color:#20aec8!important;
  font-size:12px!important;
   width:300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  }
  /*les photos*/
img.M14_photo{max-width:300px;max-height:300px;margin-top: 20px;}
  /*les pseudos*/
span.M14_auteur{color:#20aec8!important;font-size:12px!important;top: 15px;position: relative;}
  /*la fenetre patienter*/
  .M14_load{color:#20aec8;font-size:24px;}
</style>

<script>
  $(function(){
  var $this=$('.M14_importation');
$.get('/f4-phototest' , function(data){
$(data).find('ul.topiclist.topics.bg_none li').each(function(){
  var a=$(this).find('a.topictitle').attr('href');
$.get(a, function(data){
$(data).find('div[class*="post--"]:first').each(function(){
  var b=$(this).find('.postbody h2.topic-title a[href^="/t"]').text();
  var link=$(this).find('.postbody h2.topic-title a[href^="/t"]').attr('href');
  var c=$(this).find('.fa_like_list a[href^="/u"]').length;
  var photo=$(this).find('.postbody .content div:not(.M14_reception_photos) img:not([longdesc])').attr('src');
  var auteur=$(this).find('.postbody').find('p.author a[href^="/u"]').text();
 
  

  if(c&&photo)
  {
  $('.M14_load').fadeOut();
  $this.append('<div class="M14_importation_widget"><a class="M14_link"href="'+link+'" title="Voir le Best: '+b+'">'+b+'</a><br /><img class="M14_photo"src="'+photo+'"/><br /><span class="M14_auteur">Posté par: '+auteur+'</span></div>');
  }
  
});});});});
});
</script>
<div class="M14_importation"><span class="M14_load">Merci de patienter..</span></div>

Penses a valider la nouvelle page créée en cliquant sur

J'ai pensé aussi à écarter ta fameuse div ayant la class:(M14_reception_photos)

Repères ensuite l'url de la page html:
Exemple:
https://testphpbb3.1fr1.net/h35-importation-photos-best

Puis le script ou il faudra modifier le lien ci-dessus par le lien de ta page html:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches sur l'index.

Déposes ceci:

Code:


$(function(){
$('ul.topiclist.forums').each(function(){
var $this=$(this);
var a=$(this).find('.forumtitle[href="/f4-phototest#M14"]').length;
if(a)
{
$this.find('dd.dterm div').after('<a href="https://testphpbb3.1fr1.net/h35-importation-photos-best"><img class="M14_get_PhotOs" src="https://i.servimg.com/u/f31/19/32/37/01/27357311.png" title="Voir les photos ayant reçu un Best"/></a>');
}
});});


Penses a cliquer sur le bouton

Puis on place le bouton:


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


img.M14_get_PhotOs
{
margin-top: -26px;
position: absolute;
margin-left: 40%;
}



Penses a cliquer sur le bouton

Et voilou

Ravi de te retrouver aussi Philippe.

Toujours aussi rapide et efficace tu es.

Alors c'est en place et tu es en mode admin si tu veux voir.

Pas de souci pour ne prendre que sur la première page.
Il peut y avoir plusieurs photos sur le 1ier message, mais ne prendre que la première n'est pas génant.

Le css ne s'appliquait pas pour le bouton, il manquait le a pour la classe du bouton. Je l'ai ajouté.

Code:

a img.M14_get_PhotOs

Par contre, le bouton s'affiche sur tous les forums de la catégorie et pas seulement sur le forum Phototest.

Dans le html, le titre de la photo s'affiche en double.
Quand la photo est en mode paysage et celle d'à coté en mode portrait (plus haute que large), "Posté par; l'auteur" sort du cadre.

Voila Phil après mes 1ier essai, et un grand merci pour ce nouveau développement.

Je viens de comprendre pourquoi le lien en haut de la photo ne s'affiche pas.
Il faut écrire le mot best en minuscule car en majuscule le texte est transformé car il correspond à un smiley.

edit; Ah bin je viens de voir ta correction :-)

Re Serge,
alors j'ai corrigé le code permettant d'importer les widgets car
il y avait le lien d'une image de smileys .

La page html est de nouveau fonctionnelle serge et je t'ai rajouté le nombre de like a côté du sujet.

Quand la photo est en mode paysage et celle d'à coté en mode portrait (plus haute que large), "Posté par; l'auteur" sort du cadre.

Tu peux faire un best sur ce cas de figure Serge que je regarde

Ne touche pas à la page html

Je viens de comprendre pourquoi le lien en haut de la photo ne s'affiche pas.
Il faut écrire le mot best en minuscule car en majuscule le texte est transformé car il correspond à un smiley.

Ah ben merdouille je me disais aussi

Impec l'ajout du nombre de like  

Quand la photo est en mode paysage et celle d'à coté en mode portrait (plus haute que large), "Posté par; l'auteur" sort du cadre.

Je n'ai plus ce souci Philippe. Cela était provoqué par le problème sur le Best vu comme un smiley car le texte du lien était affiché et faisait déborder le div.

Tout me semble ok à présent Phil.

Je ferais d'autres tests dans la soirée avec plus de sujets likés et passerait ensuite résolu.

Un grand merci à nouveau l'ami pour tout ce superbe développement  

Oui j'avais bien vu et l'ai mentionné d'ailleurs pour ce satané smiley .

Ensuite dans la page html, j'ai ajouté ceci dans la feuille de style afin de masquer ce qui gêne plus ou moins l'affichage:

Code:

/*ON MASQUE CE QUI NOUS GENE SUR LA PAGE HTML*/
 
  #page-header, #widget-arrows,.M14_open_Panneau,.M14_close_Panneau{display:none;}

De rien mon ami et plus tard alors .

Bien vu cet ajout.
Rien ne t'échappe Phil.

Tiens, je n'ai pas le haut de page sur la page html ni la barre de navigation.

J'ai 5 photos mise en best et je n'en vois que 3. Bizarre ça.

J'ai édité.

Tiens, je n'ai pas le haut de page sur la page html ni la barre de navigation.

https://www.milouze14.com/t32939-phpbb3-photos-ayant-recu-1-j-aime-best#628282

J'ai 4 photos mise en best et je n'en vois que 3. Bizarre ça.

Je verrais cela demain Serge, mais assures toi avant que le best ajouté soit bien sur la première page de la liste des sujets.

Oui pas de souci, aucune urgence Phil.

Ah oui, j'ai vu pour le header.
J'ai corrigé le css (donc remis le haut de page) pour avoir la barre de navigation.
(ou alors ouvrir la page html dans une autre fenêtre, mais je préfère ainsi avec la barre de navigation.)
Ce serait peut-être le bas de page qui serait éventuellement à retirer.

Oui, il s'agit bien de photos de la première page. il y en a 4 ou 5 avec le like (best) et seulement 3 présentées.

edit;
Je crois avoir compris pourquoi il n'y en avait que 3 sujets de pris.
Les photos ne sont pas prises quand il y a un smiley avant la photo comme sur ce sujet par exemple:
https://photoclic.forum-pro.fr/t22902-noir_et_blanc-sur-le-chemin-ajout-ajout#289585

Quand j'enlève le smiley en haut avant la photo, elle apparait.


Par ailleurs, j'ai ajouté ça dans le JS pour ne pas présenter le bouton aux invités:

Code:

 if(!_userdata["session_logged_in"])return;

A demain l'ami. Bonne soirée.

Coucou Serge,
alors pour le bas de page ce sera:

Code:

#page-footer

et ajouter un hack !important au display none.

Effectivement le script choppe la première photo .
J'ai donc modifié dans le script de la page la recherche de la photo ainsi :

Code:

var photo=$(this).find('.postbody .content div:not(.M14_reception_photos) img:not([longdesc]):first').attr('src');

Tu as bien fait pour mettre le bouton juste pour la communauté Serge

Bonjour Philippe,

Tout est parfait.

Encore une belle réalisation je trouve.
Je l'ai même dupliqué pour le forum Les Best

Un grand merci  l'ami

De rien Serge .