Alter the Appearance

Modify the Script

The comment.hbs script is responsible for creating the overall HTML for each comment.

To not display the avatar next to each posted comment:

  1. Copy comment.hbsfrom libsto apps

    1. Select /libs/social/commons/components/hbs/comments/comment/comment.hbs
    2. Select Copy
    3. Select /apps/social/commons/components/hbs/comments/comment
    4. Select Paste
  2. Open the overlaid comment.hbs

    • Double-click on node comment.hbs in /apps/social/commons/components/hbs/comments/comment folder
  3. Find the following lines and either delete or comment them out:

  <aside class="scf-comment-author">
        <img class="scf-comment-avatar {{#if topLevel}}withTopLevel{{/if}}" src="{{author.avatarUrl}}"></img>

Either delete the lines, or surround them with <!-- and --> to comment them out. Also, the characters ‘xxx’ are being added as a visual indicator of where the avatar would have been.

   xxx
   <!-- do not display avatar with comment
    <aside class="scf-comment-author">
        <img class="scf-comment-avatar {{#if topLevel}}withTopLevel{{/if}}" src="{{author.avatarUrl}}"></img>

Replicate the Overlay

Push the overlaid comments component to the publish instance using the Replication Tool.

NOTE

A more robust form of replication would be to create a package in Package Manager and activate it. A package can be exported and archived.

From the global navigation, select Tools > Deployment > Replication and click Activate Tree.

For the Start Path enter /apps/social/commons and select Activate.

verify-content-template

View Results

If you login to the publish instance as an administrator, e.g., https://localhost:4503/crx/de as admin/admin, you can verify the overlaid components are there.

If you logout and re-login as aaron.mcdonald@mailinator.com/password and refresh the page, you will observe that the posted comment no longer displays with an avatar, instead a simple ‘xxx’ is displayed.

create-template-component

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now