Avatar auteur blog

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

Résolu Avatar auteur blog

Message par Kumo le Ven 11 Mar 2016 - 14:59

Bonjour.

Je suis nouvelle sur le forum, j'espère ne pas me tromper d'endroit où poster.

Je cherche à savoir s'il serait possible d'insérer l'avatar de l'auteur d'un blog dans la liste des blogs. Je voudrais qu'il soit positionné juste à gauche du titre du blog (là où se trouve normalement l'icône du calendrier que j'ai retiré du template de mon forum).

Spoiler:
Sur la capture d'écran ci-dessus, l'idée serait donc d'avoir l'avatar juste à gauche de "Test de note 2" et "Test de note".

Merci d'avance pour vos réponses.


Dernière édition par Kumo le Jeu 17 Mar 2016 - 13:16, édité 1 fois

Kumo
*

Messages : 48
Inscrit(e) le : 11/03/2016

http://test-dessineux.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Kumo le Sam 12 Mar 2016 - 14:15

Up.

Si vous avez ne serait-ce qu'une piste pour le code je suis preneuse, je pense trouver où le placer après Smile

Kumo
*

Messages : 48
Inscrit(e) le : 11/03/2016

http://test-dessineux.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Kumo le Lun 14 Mar 2016 - 17:54

Up.

Kumo
*

Messages : 48
Inscrit(e) le : 11/03/2016

http://test-dessineux.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Kumo le Mer 16 Mar 2016 - 8:03

Up.

Est ce que c'est seulement possible selon vous ?

Kumo
*

Messages : 48
Inscrit(e) le : 11/03/2016

http://test-dessineux.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Miettes le Mer 16 Mar 2016 - 16:30

Coucou Smile

Comme tu as modifié le template, tu pourrais nous le montrer stp ? Smile

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Kumo le Jeu 17 Mar 2016 - 8:31

Bonjour Miettes !

Alors voici mon template topics_blog_box:

Code:
<!-- BEGIN topics_blog_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">

      function check_uncheck_main_{topics_blog_box.row.header_table.BOX_ID}()
      {
         alert('MAIN');

         var all_checked = true;

         for (i = 0; (i < document.{topics_blog_box.FORMNAME}.elements.length) && all_checked; i++)
         {
            if (document.{topics_blog_box.FORMNAME}.elements[i].name == '{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.header_table.BOX_ID}')
            {
               all_checked = document.{topics_blog_box.FORMNAME}.elements[i].checked;
            }
         }

         document.{topics_blog_box.FORMNAME}.all_mark_{topics_blog_box.row.header_table.BOX_ID}.checked = all_checked;
      }

      function check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}()
      {
         alert('ALL');

         for (i = 0; i < document.{topics_blog_box.FORMNAME}.length; i++)
         {
            if (document.{topics_blog_box.FORMNAME}.elements[i].name == '{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.header_table.BOX_ID}')
            {
               document.{topics_blog_box.FORMNAME}.elements[i].checked = document.{topics_blog_box.FORMNAME}.all_mark_{topics_blog_box.row.header_table.BOX_ID}.checked;
            }
         }
      }

      </script>
   <!-- END multi_selection -->

   <div class="forumbg announcement">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dt>
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  <div class="Sujets {topics_blog_box.row.L_TITLE}" sytle="display: none;">
               </dt>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
<!-- END header_table -->

<!-- BEGIN header_row -->
      <strong>{topics_blog_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->

   <!-- BEGIN table_sticky -->
         </ul>
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dd class="dterm" style="padding-left:0">
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  {topics_blog_box.row.topic.table_sticky.L_TITLE}
               </dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
   <!-- END table_sticky -->

      <li class="row {topics_blog_box.row.ROW_ALT_CLASS}" style="margin-top:<!-- BEGIN line_sticky -->5px<!-- END line_sticky --> ;">
         <dl class="blog icon" style="background-image:url('{topics_blog_box.row.TOPIC_FOLDER_IMG}')">
            <dd class="blog dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_blog_box.row.ICON}>
               <!-- BEGIN single_selection -->
               <input type="radio" name="{topics_blog_box.FIELDNAME}" value="{topics_blog_box.row.FID}" {topics_blog_box.row.L_SELECT} />
               <!-- END single_selection -->
               <div class="blog_cal-border" style="display: none;">
                  <div class="blog_cal-content">
                     <span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS0}">{topics_blog_box.row.FIRST_POST_DMY_VALUE0}</span>
                     <span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS1}">{topics_blog_box.row.FIRST_POST_DMY_VALUE1}</span>
                     <span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS2}">{topics_blog_box.row.FIRST_POST_DMY_VALUE2}</span>
                  </div>
               </div>
               <div class="blog_title">
                  {topics_blog_box.row.NEWEST_POST_IMG}
                  {topics_blog_box.row.PARTICIPATE_POST_IMG}&nbsp;
                  {topics_blog_box.row.TOPIC_TYPE}
                  <div class="topic-title-container">
                     <h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_blog_box.row.U_VIEW_TOPIC}">{topics_blog_box.row.TOPIC_TITLE}</a></h2>
                  </div>

                  <!-- BEGIN switch_description -->
                  <span class="genmed">
                     <br />
                     {topics_blog_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
                  <!-- END switch_description -->
               </div>
               <div class="clear"></div>
               <div class="blog_message">
                  {topics_blog_box.row.FIRST_POST_TEXT}
               </div>
               <br />
               <!-- BEGIN nav_tree -->{topics_blog_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
               <div class="blog_comments">
                  <span class="span-tab">{topics_blog_box.row.L_BY} <strong>{topics_blog_box.row.TOPIC_AUTHOR}</strong>&nbsp;-&nbsp;
                  <a href="{topics_blog_box.row.U_VIEW_TOPIC}#comments">{L_COMMENTS}</a>: {topics_blog_box.row.REPLIES}&nbsp;-&nbsp;
                  {L_VIEWS}: {topics_blog_box.row.VIEWS}</span>
               </div>
            </dd>
            <!-- BEGIN multi_selection -->
            <input onclick="check_uncheck_main_{topics_blog_box.row.BOX_ID}();" type="checkbox" name="{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.BOX_ID}" value="{topics_blog_box.row.FID}" {topics_blog_box.row.L_SELECT} />
            <!-- END multi_selection -->
         </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
   <dl>
      <dt><strong>{topics_blog_box.row.L_NO_TOPICS}</strong></dt>
   </dl>
</li>
<!-- END no_topics -->

<!-- BEGIN bottom -->
</ul>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_blog_box -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.blog_message', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->


Kumo
*

Messages : 48
Inscrit(e) le : 11/03/2016

http://test-dessineux.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Miettes le Jeu 17 Mar 2016 - 12:06

Coucou Smile

J'ai donc la solution. Dans le template, on va ajouter un élement html "receptacle" de l'avatar.

On va remplacer ça :
Code:
<div class="blog_title">
                  {topics_blog_box.row.NEWEST_POST_IMG}
                  {topics_blog_box.row.PARTICIPATE_POST_IMG}&nbsp;
                  {topics_blog_box.row.TOPIC_TYPE}
                  <div class="topic-title-container">
                    <h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_blog_box.row.U_VIEW_TOPIC}">{topics_blog_box.row.TOPIC_TITLE}</a></h2>
                  </div>

                  <!-- BEGIN switch_description -->
                  <span class="genmed">
                    <br />
                    {topics_blog_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
                  <!-- END switch_description -->
              </div>
par ça :
Code:
<div class="blog_title">
                  {topics_blog_box.row.NEWEST_POST_IMG}
                  {topics_blog_box.row.PARTICIPATE_POST_IMG}&nbsp;
                  {topics_blog_box.row.TOPIC_TYPE}
                  <figure class="posteur-avatar"></figure>
                  <div class="topic-title-container">
                    <h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_blog_box.row.U_VIEW_TOPIC}">{topics_blog_box.row.TOPIC_TITLE}</a></h2>
                  </div>

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

Ensuite, on va ajouter du javascript pour récupérer l'avatar du posteur :
Code:

$(function () {
  // On parcourt chaque blog pour récupérer le lien vers le profil du posteur
    $('.blog_comments .span-tab > strong:first-child a').each( function(){
      var receptacle = $(this).parents('.blog').find('.blog_title .posteur-avatar')
      ,  link = $(this).attr('href')
      ,  recup_info = document.createElement('div')
      ,  url_avatar ;

      // On va sur le profil du membre pour récupérer l'avatar
      $(recup_info).load(''+ link +' #profile-advanced-right .module .h3 + div > img:first-child', function(){
        url_avatar = this.innerHTML;
        // On ajoute l'avatar dans notre balise "réceptacle"
        receptacle.html(url_avatar);
      });

    });
});
Idea A afficher sur toutes les pages.

Et enfin, j'ai ajouté un peu de CSS à adapter selon tes besoins Smile
Code:
.blog .blog_title .posteur-avatar,
.blog .blog_title .topic-title-container{
  display: inline-block;
}

.blog .blog_title .posteur-avatar img{
  height: 50px;
  display: block;
}

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Kumo le Jeu 17 Mar 2016 - 12:31

Merci beaucoup de m'aider !

Après avoir suivie toutes les instructions, aucune modification.

Dans le doute voilà mon CSS:

Code:
/***Pied de page***/
#page-footer ul.linklist li.rightside { float:none; }
ul.linklist li.footer-home { float:none; }
 
ul.linklist li.footer-home:after { content:" | "; }

#page-footer, div.navbar, div.navbar ul.linklist {text-align:center;}

.bouhautbas {
bottom: 10px;
right: 5px;
position: fixed;
z-index: 100;
        }


/***NavBar***/
.navbar ul{ border-bottom:none; }

#search-box{ display:none; }

.topic-actions .search-box { display:none }

.header { text-align: center!important; font-size: 10pt; }

/***Redimension des images***/
div.postbody img { max-width: 800px; max-height: 1000px; }


/***Colonne profil***/
.postprofile { width:210px; }
.postprofile strong a { font-size:13px; }
.postprofile img { margin-bottom: 5px; }


/***Corps des sujets***/
.postbody
        {
        clear: both;
        background-color: #ffffff;
        float: right;
        line-height: 1.48em;
        padding-top: 20pt;
        padding-right: 8pt;
        padding-bottom: 20pt;
        padding-left: 8pt;
        width: 78%;
        }

.postbody img { vertical-align: bottom; }

.signature_div img { max-height:200px; }

.doublepost { border-top: 3px dotted #E4EFF5; margin-top: 25px; }

/***Marge entre post***/
div.post{ margin: 10px; padding-top: 6px; }


/***Chatbox***/
.chatbox_row_1,
.chatbox_row_2,
.chatbox_row_3,
.chatbox_row_1 a,
.chatbox_row_2 a,
.chatbox_row_3 a { background-color: #ffffff; }

#chatbox_members .cb-avatar > img { height:30px; width:30px; vertical-align: middle; }


/***Boutons***/
a.button1,
input.button1,
a.button2,
input.button2,
button.button2 { font-size: 8.5pt }

/***Blog***/
.blog_message {display: none}

.blog .blog_title .posteur-avatar,
.blog .blog_title .topic-title-container{
  display: inline-block;
}
 
.blog .blog_title .posteur-avatar img{
  height: 50px;
  display: block;
}
/***Index***/
dd.posts, dd.topics, dd.views { display: none!important; }
 .forabg dd.dterm { width: 80%! important; }
 .forabg dd.lastpost { width: 17%! important; }

span.color-groups {float:none!important;}
.lastpost {text-align:center!important;}
.lastpost span {display:inherit!important;}



J'ai bien publié les modifs du template et appliqué le javascript sur toutes les pages.

Kumo
*

Messages : 48
Inscrit(e) le : 11/03/2016

http://test-dessineux.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Miettes le Jeu 17 Mar 2016 - 12:36

Tu aurais un compte de test à me passer ? Je pense que c'est ici que ça pose souci dans le javacript :

Code:
$(recup_info).load(''+ link +' #profile-advanced-right .module .h3 + div > img:first-child', function(){

En fait, il faut qu'on arrive à cibler ce qui correspond à l'avatar dans le profil. Mais là, j'ai l'impression qu'on ne le trouve pas Sad

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Kumo le Jeu 17 Mar 2016 - 12:41

Je t'envoie ça par mp ^^

Kumo
*

Messages : 48
Inscrit(e) le : 11/03/2016

http://test-dessineux.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Miettes le Jeu 17 Mar 2016 - 13:13

Ah donc effectivement, c'est bien ça le problème Smile

J'ai regardé avec une mauvaise version. Voici le bon js :


Code:

$(function () {
  // On parcourt chaque blog pour récupérer le lien vers le profil du posteur
    $('.blog_comments .span-tab > strong:first-child a').each( function(){
      var receptacle = $(this).parents('.blog').find('.blog_title .posteur-avatar')
      ,  link = $(this).attr('href')
      ,  recup_info = document.createElement('div')
      ,  url_avatar ;
 
      // On va sur le profil du membre pour récupérer l'avatar
      $(recup_info).load(''+ link +' .column1 .h3 + .left-box.details > dd > img', function(){
        url_avatar = this.innerHTML;
        // On ajoute l'avatar dans notre balise "réceptacle"
        receptacle.html(url_avatar);
      });
 
    });
});

(je te laisse le modifier dans ton pa ^^ J'avais juste besoin de voir la page Smile)

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar auteur blog

Message par Kumo le Jeu 17 Mar 2016 - 13:15

Ca marche \o/ merci énormément à toi, je met le sujet comme résolu !

Kumo
*

Messages : 48
Inscrit(e) le : 11/03/2016

http://test-dessineux.forumactif.org/
Kumo a été remercié(e) par l'auteur de ce sujet.

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


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