In the comments, automatic create a color image (img) with first two letters of Author name [RÉSOLU]

kamon

How can I use Pluxml or a plugin to automatically create an img image (without using gravatar) with the first two letters of the comment author's name, e.g. for the author Franky (class=“comment__author”) - inside a colored box (using simple colors, no more than 7) create a green image: [ Fr ], then a blue Alex: [ Al ], etc. ??? It is desirable that the color of the image be fixed for the author of the message so that there is no color confusion.

This would look stylish and modern. Because no one registers on the blog, people just write to each other in the comments below the article.

Unélio

Hello,

On my website I use this :

commentaires.php

<?php if(!defined('PLX_ROOT')) exit; ?>

  <div id="comments">

    <?php if($plxShow->plxMotor->plxRecord_coms): ?>

    <div id="show">

      <?php
        $i=rand(1, 15);
        $tableau=array();
      ?>

        <div id="paginate_container">
            <ul class="paginate_content">
            <?php while($plxShow->plxMotor->plxRecord_coms->loop()): # On boucle sur les commentaires ?>

            <li>
                    <div class="a_comment">
                        <?php
                      $nom=$plxShow->comAuthorName();

                      $couleurs = array(
                          '#5BBBC6', /* turquoise clair */
                          '#C58E8C', /* olive clair */
                          '#F27982', /* rouge clair */
                          '#52A79C', /* vert foncé clair */
                          '#749CF0', /* bleu clair */
                          '#F68F6C', /* orange clair */
                          '#9A99AF', /* gris coloré clair */
                          '#8DC9EC', /* jaune clair */
                          '#B8B0A5', /* marron pâle clair */
                          '#9FA37B', /* vert armé clair */
                          '#A3A6F5', /* violet clair */
                          '#F29D86', /* rose clair */
                          '#D08AA7', /* mauve clair */
                          '#5A1A22', /* marron foncé */
                          '#D49A2C', /* jaune orangé clair */
                          '#ED9BF2', /* violet rose clair */
                          '#1A6DAF', /* bleu foncé clair */
                          '#4FA3D1', /* bleu azur */
                          '#A86FD3', /* violet moyen */
                          '#6FBF8E', /* vert doux */
                          '#E2A14A', /* ocre */
                          '#E06C9F', /* rose soutenu */
                          '#7C8A95', /* gris bleuté */
                          '#C4D04F', /* vert jaune */
                          '#D45F3A', /* terracotta */
                      );

                      $i++;
                      if($i > count($couleurs)) $i=1;

                      if(!array_key_exists($nom, $tableau)){
                        $tableau[$nom]=$couleurs[$i];
                        $couleur=$couleurs[$i];
                      }else{
                        $couleur=$tableau[$nom];
                        $i--;
                      }

                      if(empty($couleur)) $couleur='#555555'; /* Bug quand on valide le html de la page */
                    ?>

                    <div class="info_comment">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
                            <circle fill="<?php echo strtolower($couleur) ?>" cx="32" cy="20" r="12" />
                            <path fill="<?php echo strtolower($couleur) ?>" d="M8 56c0-13.255 10.745-24 24-24s24 10.745 24 24" />
                        </svg>
                        <div class="text_info">
                            <p class="author_comments"><?php $plxShow->comAuthor(); ?></p>
                            <p class="message_date"><?php $plxShow->comDate2(); ?></p>
                        </div>
                    </div>
                    <div class="content_com"><?php $plxShow->comContent2(); ?></div>

                    </div>
            </li>

            <?php endwhile; ?>
            </ul>
            <div class="paginate_navigation"></div>
        </div>

    </div>

    <?php endif; ?>

    <?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>

    <div id="form">

      <div id="form_comment">
        <form action="<?php $plxShow->artUrl(); ?>#form" method="post">
          <textarea id="id_content" name="content" cols="35" rows="6" placeholder="<?php $plxShow->lang('COMMENT') ?>" required><?php $plxShow->comGet('content',''); ?></textarea>

          <input id="id_name" name="name" type="text" size="20" placeholder="<?php $plxShow->lang('NAME') ?>" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" required />

          <p><?php
            if($plxShow->plxMotor->aConf['capcha']):
            $plxShow->capchaQ();
          ?></p>

          <input id="id_rep" name="rep" type="text" size="30" placeholder="<?php $plxShow->lang('CAPCHA') ?>" maxlength="1" required />

          <?php endif; ?>

          <?php $plxShow->comMessage('<p id="com_message" class="#com_class">#com_message</p>'); ?>

          <input type="submit" value="<?php $plxShow->lang('SEND') ?>" />
        </form>
      </div>
    </div>

    <?php endif; ?>

  </div>

And in class.plx.show.php I add :

public function comAuthorName() {
    $name = $this->plxMotor->plxRecord_coms->f('author');
    return $name;
}

after public function comAuthor($type='') {}

Also, you need to replace comDate2(); with comDate();, same thing with comContent2...

May be it can help you,

Regards.

kamon

Added JavaScript client code using the first two letters of the username. Insert this at the footer of commentaires.php template.

Define the class for the div elements in advance, using the template as an example. The replyto class is used for img elements, and the comment__author class is used for the username comAuthor. Make the changes to the js code.
The array of html color codes can be changed, but each unique first letter of a name will correspond to one of the 8 colors in the array, cycling through them. The color will always be the same for a username.

Example:

If the username is "Franky", the first character is F → code = 102 → 102 % 8 = 6 → color at index 6 #ec4899.
If the name is "Admin", the first character is A → code = 97 → 97 % 8 = 1 → color at index 1 #0ea5e9.

gcyrillus-nomade

Thank you @kamon

▼ click here ▲ mirror of the code if link becomes obsolte

<script>
<!-- AVATAR AUTOR COMMENT - First Two Letters Username -->
document.addEventListener('DOMContentLoaded', () => {
const COLORS = [
    '#7744dd','#0ea5e9','#10b981',
    '#ef4444','#8b5cf6','#ec4899',
];
function getColor(name) {
    const code = name.toLowerCase().charCodeAt(0) || 0;
    return COLORS[code % COLORS.length];
}
function makeAvatar(initials, bgColor, size = 50) {
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, size, size);

    // Text
    ctx.fillStyle = '#ffffff';
    ctx.font      = ` bold ${size * 0.38}px sans-serif`; // text bold or remove bold
    ctx.textAlign    = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(initials.charAt(0).toUpperCase() + initials.charAt(1).toLowerCase(), size / 2, size / 2);
    return canvas.toDataURL('image/png');
}
document.querySelectorAll('.comment').forEach(li => {
    const authorEl = li.querySelector('.comment__author');
    const imgEl    = li.querySelector('img.replyto');
    if (!authorEl || !imgEl) return;
    const name     = authorEl.textContent.trim();
    const initials = [...name].slice(0, 2).join(''); // correct for Unicode
    const color    = getColor(name);
    imgEl.src = makeAvatar(initials, color);
    imgEl.alt = initials;
});
});
</script>