Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

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


2 participants

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

avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Lun 8 Fév 2021 - 21:53

  • Version du forum :
    PHPBB3
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour à tous les milouziens,

Un moment que je n'avais pas fait de demande, faute de nouvelles idées pour mon forum.
En espérant que celle-ci soit réalisable.

Serait-il possible d'ajouter un bouton sur la page d'accueil au niveau du forum phototest?
Spoiler:

Ce bouton aurait pour fonction lorsque l'on clique dessus de faire apparaitre sur une page les photos de ce forum ayant reçu au moins 1 j'aime (baptisé Best sur mon fofo).

Les photos présentées feraient 300px maxi de haut sur 300px de large maxi.

L'image du bouton:
[PHPBB3] Photos ayant reçu 1 j'aime (Best) 27357311

Au passage de la souris sur ce bouton, l'infobulle serait: "Voir les photos ayant reçu un Best".

Merci pour votre aide.


Dernière édition par photoclic le Mer 10 Fév 2021 - 11:32, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 9 Fév 2021 - 17:25

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.


avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Fév 2021 - 17:28

Bonjour Philippe,

Ravi de revenir par ici.

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

https://www.milouze14.net/

MessageMilouze14 Mar 9 Fév 2021 - 17:51

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

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é:

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

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 Valid

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 Valid

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 [PHPBB3] Photos ayant reçu 1 j'aime (Best) Sans_t10

Et voilou
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Fév 2021 - 18:34

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.
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Fév 2021 - 18:47

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 :-)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 9 Fév 2021 - 19:00

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

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 MdR1
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Fév 2021 - 19:28

Impec l'ajout du nombre de like  Merci

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  tape la
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 9 Fév 2021 - 19:31

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

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 .
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Fév 2021 - 19:40

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.
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Fév 2021 - 19:52

J'ai édité.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 9 Fév 2021 - 19:52

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.
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Fév 2021 - 20:01

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.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 10 Fév 2021 - 4:19

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 hinhin

avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mer 10 Fév 2021 - 11:31

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 super
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 10 Fév 2021 - 18:16

De rien Serge impeccable .


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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