Image personnalisable (profil message)

[foxies]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Suite à la solution proposée par @Miettes il y a quelques temps en passant par le CSS, j'aimerais rendre "automatique" la personnalisation d'une image au niveau des messages postés par les membres cette fois-ci en utilisant du JS (si cela est possible, bien entendu). Cela m'évitera d'avoir à modifier le CSS à chaque fois qu'un membre souhaite modifier son image.

Screen :



Voici mon template viewtopic_body :

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };

$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
    try {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0) {
            $('.post--' + id).toggle(0, function() {
 if( $(this).is(":visible") ) {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 } else {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    } catch(e) { }

 return false;
};

//]]>
</script>

<div class="thread-title"><h2>{TOPIC_TITLE}</h2><div class="pagination">{PAGINATION}</div>
  <div class="thread-buttons">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}"><div class="thread-button1 masterTooltip" title="Créer un nouveau sujet"></div></a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><div class="thread-button2 masterTooltip" title="Répondre au sujet"></div></a>
 <!-- END switch_user_authreply -->
    <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <div id="thread-watch">{S_WATCH_TOPIC}</div>  
    <script type="text/javascript">
  document.getElementById('thread-watch').innerHTML = document.getElementById('thread-watch').innerHTML.replace(/Surveiller les réponses de ce sujet/, '<div class="thread-button3 masterTooltip" title="Suivre ce sujet"></div>');
 document.getElementById('thread-watch').innerHTML = document.getElementById('thread-watch').innerHTML.replace(/Arrêter de surveiller ce sujet/, '<div class="thread-button3-bis masterTooltip" title="Arrêter de suivre ce sujet"></div>');
    </script>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
  </div>
</div>

{POLL_DISPLAY}
<div class="thread">
<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <div style="position: relative; top:0px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
  <div class="thread-post wow fadeInUp"><div class="post-stats"><div class="post-user">{postrow.displayed.POSTER_NAME}<div class="post-rank">{postrow.displayed.POSTER_RANK_NEW}</div></div><div class="post-user-sep"></div>
    </div>
    <div class="post-header" data-info-posteur='{postrow.displayed.POSTER_NAME}'></div>
    <div class="post-desc"><div class="post-avatar">{postrow.displayed.POSTER_AVATAR}<div class="hidden">{postrow.displayed.ONLINE_IMG}</div>
      <script>$('.i_icon_online').closest('.post-avatar').addClass('pulse');</script></div>
      <div class="post-title"><a href="{postrow.displayed.POST_URL}">{TOPIC_TITLE}</a></div>
      <div class="post-date">{postrow.displayed.POST_DATE_NEW}</div>
      <script type="text/javascript">$('.post-date').each(function(){$(this).html($(this).html().replace(/le/g,""));});</script>
     <div class="post-buttons profile-icons">
       <a href="{U_POST_REPLY_TOPIC}"><div class="post-button1 masterTooltip" title="Répondre"></div></a>
       <a href="{postrow.displayed.QUOTE_URL}"><div class="post-button2 masterTooltip" title="Citer"></div></a>
        <a href="{postrow.displayed.EDIT_URL}"><div class="post-button3 masterTooltip" title="Éditer"></div></a>
      <a href="{postrow.displayed.DELETE_URL}"><div class="post-button4 masterTooltip" title="Supprimer"></div></a>
      
 <!-- BEGIN switch_vote_active -->
 <div class="vote">
                                              <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><div class="post-button5 masterTooltip" title="Liker"></div></a>
 <!-- END switch_vote -->

 <!-- BEGIN switch_bar -->
 <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
 <div class="vote-bar-desc">
 {postrow.displayed.switch_vote_active.L_VOTE_TITLE}
 </div>

 <div class="vote-bars">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 </div>
 <!-- END switch_bar -->

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
 <!-- END switch_no_bar -->
 </div>
 <!-- END switch_vote_active -->
  </div>
      </div>
    <div class="post-content">{postrow.displayed.MESSAGE}</div>
  </div>
 <!-- END displayed -->
<!-- END postrow -->
</div>

<!-- BEGIN switch_user_logged_in -->
<div class="thread-quick">{QUICK_REPLY_FORM}</div>
<!-- END switch_user_logged_in -->

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<script>
$(document).ready(function() {
 $('pre, code').each(function(i, block) {
 hljs.highlightBlock(block);
 });

 $('.post').each(function() {
 if (!$(this).find('.postprofile-avatar').html().length) {
 $(this).find('.postprofile-rank').css('border-bottom', 'none');
 $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
 }
 });
});
</script>

Merci et bonne journée

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[foxies]

Up

[no_way]

Bonjour, de ce que j'ai pu constater vous n'affichez pas les champs de profil dans votre template viewtopic_body hors c'est ce qu'il faudrait faire quitte à les cacher ensuite avec un code CSS, concernant l'image dont vous parlez, s'agirait-il d'une image de fond, d'une image de rang, d'une simple icône ... ?

Une capture d'écran faciliterait la compréhension et nous permettrait de vous aider plus efficacement.

[foxies]

Bonjour et merci de vous pencher sur mon sujet

Voici à quoi ressemble l'image dont je parle :



Il s'agit donc d'une image de fond. Par dessus si je puis dire, on retrouve le pseudo du membre ainsi que son rang.



Je viens de rajouter cette ligne dans mon template pour les champs de profil :

Code:

<div style="display:none;"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div>

[no_way]

Bien, remplacez :

Code:

    <div style="display:none;"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div>

par:

Code:

<div class="post-user-fields"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div>

N'oubliez pas de créer un champ de profil pour l'image qui doit être utilisée pour le fond, une fois que tout ceci sera fait je verrai pour le script.

[foxies]

Bonjour, voilà qui est fait ! L'id du champ que je viens de créer est "field_id5".

[no_way]

Je pense qu'il y a un souci avec configuration du champ, vérifiez que :
Afficher ce champ pour les utilisateurs ayant au moins le statut :
soit à :
Invités

Ainsi je pourrai visualiser en tant qu'invité le champ en question.

Si tel est déjà le cas il y a sans doute un souci avec votre template viewtopic_body, j'aimerais alors avoir le contenu de celui-ci et que vous me confirmiez que vous utilisez bien modernBB.

[foxies]

Je viens de configurer le champ comme demandé. Je suis bien sous ModernBB. Voici mon template viewtopic_body si besoin :

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };

$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
    try {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0) {
            $('.post--' + id).toggle(0, function() {
 if( $(this).is(":visible") ) {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 } else {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    } catch(e) { }

 return false;
};

//]]>
</script>

<div class="thread-title"><h2>{TOPIC_TITLE}</h2><div class="pagination">{PAGINATION}</div>
  <div class="thread-buttons">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}"><div class="thread-button1 masterTooltip" title="Créer un nouveau sujet"></div></a>
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><div class="thread-button2 masterTooltip" title="Répondre au sujet"></div></a>
 <!-- END switch_user_authreply -->
    <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <div id="thread-watch">{S_WATCH_TOPIC}</div> 
    <script type="text/javascript">
  document.getElementById('thread-watch').innerHTML = document.getElementById('thread-watch').innerHTML.replace(/Surveiller les réponses de ce sujet/, '<div class="thread-button3 masterTooltip" title="Suivre ce sujet"></div>');
 document.getElementById('thread-watch').innerHTML = document.getElementById('thread-watch').innerHTML.replace(/Arrêter de surveiller ce sujet/, '<div class="thread-button3-bis masterTooltip" title="Arrêter de suivre ce sujet"></div>');
    </script>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
  </div>
</div>

{POLL_DISPLAY}
<div class="thread">
<!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 </div>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <div style="position: relative; top:0px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
  <div class="thread-post wow fadeInUp"><div class="post-stats"><div class="post-user">{postrow.displayed.POSTER_NAME}<div class="post-rank">{postrow.displayed.POSTER_RANK_NEW}</div></div>
  <div class="post-user-fields"><!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div>
    <div class="post-user-sep"></div>
    </div>
    <div class="post-header" data-info-posteur='{postrow.displayed.POSTER_NAME}'></div>
    <div class="post-desc"><div class="post-avatar">{postrow.displayed.POSTER_AVATAR}<div class="hidden">{postrow.displayed.ONLINE_IMG}</div>
      <script>$('.i_icon_online').closest('.post-avatar').addClass('pulse');</script></div>
      <div class="post-title"><a href="{postrow.displayed.POST_URL}">{TOPIC_TITLE}</a></div>
      <div class="post-date">{postrow.displayed.POST_DATE_NEW}</div>
      <script type="text/javascript">$('.post-date').each(function(){$(this).html($(this).html().replace(/le/g,""));});</script>
    <div class="post-buttons profile-icons">
      <a href="{U_POST_REPLY_TOPIC}"><div class="post-button1 masterTooltip" title="Répondre"></div></a>
      <a href="{postrow.displayed.QUOTE_URL}"><div class="post-button2 masterTooltip" title="Citer"></div></a>
        <a href="{postrow.displayed.EDIT_URL}"><div class="post-button3 masterTooltip" title="Éditer"></div></a>
      <a href="{postrow.displayed.DELETE_URL}"><div class="post-button4 masterTooltip" title="Supprimer"></div></a>
     
 <!-- BEGIN switch_vote_active -->
               <div class="vote">
                                              <!-- BEGIN switch_vote -->
                     <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><div class="post-button5 masterTooltip" title="Liker"></div></a>
                  <!-- END switch_vote -->

                  <!-- BEGIN switch_bar -->
                  <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                     <div class="vote-bar-desc">
                        {postrow.displayed.switch_vote_active.L_VOTE_TITLE}
                     </div>

                     <div class="vote-bars">
                        <!-- BEGIN switch_vote_plus -->
                           <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                           <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                  </div>
                  <!-- END switch_bar -->

                  <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                  <!-- END switch_no_bar -->
               </div>
               <!-- END switch_vote_active -->
  </div>
      </div>
    <div class="post-content">{postrow.displayed.MESSAGE}</div>
  </div>
 <!-- END displayed -->
<!-- END postrow -->
</div>

<!-- BEGIN switch_user_logged_in -->
<div class="thread-quick">{QUICK_REPLY_FORM}</div>
<!-- END switch_user_logged_in -->

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<script>
$(document).ready(function() {
 $('pre, code').each(function(i, block) {
 hljs.highlightBlock(block);
 });

 $('.post').each(function() {
 if (!$(this).find('.postprofile-avatar').html().length) {
 $(this).find('.postprofile-rank').css('border-bottom', 'none');
 $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
 }
 });
});
</script>

[no_way]

Voici un code à placer sur les sujets, n'oubliez pas de remplir le champ dans votre profil sans quoi vous ne verrez rien, remplacez test par le nom que vous avez choisi pour le champ en question :

Code:

$(function(){
    $(".post-user-fields").each(function(i,e){
        if(($p=$(".label:contains('test')",e),$p.length))$(".post-stats").eq(i).css("background-image","url('"+$p[0].nextSibling.nodeValue+"')");
    })
});

[foxies]

Bonjour, je vous remercie pour votre aide ! Je suis parvenue à afficher l'image selon ma convenance