Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

Kumo
*

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

http://encre-seiche.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
avatar

Kumo
*

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

http://encre-seiche.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.
avatar

Kumo
*

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

http://encre-seiche.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 ?
avatar

Kumo
*

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

http://encre-seiche.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
avatar

Miettes
****

Féminin
Messages : 496
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 -->

avatar

Kumo
*

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

http://encre-seiche.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;
}
avatar

Miettes
****

Féminin
Messages : 496
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.
avatar

Kumo
*

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

http://encre-seiche.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
avatar

Miettes
****

Féminin
Messages : 496
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 ^^
avatar

Kumo
*

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

http://encre-seiche.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)
avatar

Miettes
****

Féminin
Messages : 496
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 !
avatar

Kumo
*

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

http://encre-seiche.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