# Making custom changes to a raw template

**URL:** https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004
**Category:** Development
**Created:** [July 27, 2023, 4:33am UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004 "2023-07-27T04:33:03Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![boltronics](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/boltronics/32/122375_2.png) [@boltronics](https://meta.discourse.org/u/boltronics)
#### Post date: [July 27, 2023, 4:33am UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004/1 "2023-07-27T04:33:03Z")

</div>

Currently on our topic list pages, the avatars of the main participants in each topic are shown, along with a link to the user’s profile page. This can be seen here:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/d/21d165c9386f5a16cba282deeebf8f9ed7cf0413.png)  
When a user is not signed in, this link will not be clickable since it would otherwise return a redirect to the login page.

The issue is that our SEO consultant has determined that these are a problem for us, and wants that profile page link to not be visible to Google at all.

There are similar issues on things like topic posts, but these were all in widgets and have been relatively easy to resolve with `api.reopenWidge()` and the like.

Not so with the topic list pages, where we need to change the contents of [raw-templates/list/posters-column.hbr](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/raw-templates/list/posters-column.hbr)!

I’ll now describe the things I’ve tried. Feel free to skip to the end if you like and already know the answer.

At first, I tried mounting a widget as per the [Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648/1) instructions.

```plaintext
<script type="text/x-handlebars" data-template-name="list/posters-column">
    <td class='posters topic-list-data'>
        {{#each posters as |poster|}}
            {{#if poster.moreCount}}
                <a class="posters-more-count">{{poster.moreCount}}</a>
            {{else}}
              {{mount-widget widget="custom-list-avatar"}}
            {{/if}}
        {{/each}}
    </td>
</script>

```

None of this seemed to do anything at all. Eventually I found in a theme where someone was using a `.raw` extension in the `data-template-name` value, so I assume that the guide is just out of date. It didn’t say anything about _raw_ templates! Using `.raw` allows the above changes to render, except my custom widget refused to load.

This is weird, because `list/posters-column` is only referenced by `topic-list-item.hbr`, which is also a raw template, and is specifically one of the templates used in that guide. But… again I guess it’s just out of date? I eventually read somewhere that you can’t mount widgets in raw templates, so it seems that this was never going to work.

Next, discovered partials and tried using those. I figured that I might have more luck, now that those parts are not a raw template.

```plaintext
<script type="text/x-handlebars" data-template-name="components/custom-avatar">
    <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
</script>

<script type="text/x-handlebars" data-template-name="list/posters-column.raw">
    <td class='posters topic-list-data'>
        {{#each posters as |poster|}}
            {{#if poster.moreCount}}
                <a class="posters-more-count">{{poster.moreCount}}</a>
            {{else}}
                {{partial 'components/custom-avatar'}}
            {{/if}}
        {{/each}}
    </td>
</script>

```

Unfortunately, it seems that you can’t use partials in raw templates either, so that approach was a no go.

Then, I found [this](https://meta.discourse.org/t/override-template-only-on-specific-page/132288) thread which looked like it might contain what I needed. Based on that approach, and knowing that `list/topic-list-item` (that calls `list/posters-column`) is used by the [topic-list-item](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list-item.js) component, I came up with the following:

```plaintext
<script type="text/x-handlebars" data-template-name="list/posters-column.raw">
    <td class='posters topic-list-data'>
        {{#each posters as |poster|}}
            {{#if poster.moreCount}}
                <a class="posters-more-count">{{poster.moreCount}}</a>
            {{else}}
                {{#if hideFromAnonUser}}
                    <div data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</div>
                {{else}}
                    <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
                {{/if}}
            {{/if}}
        {{/each}}
    </td>
</script>

<script type="text/discourse-plugin" version="1.1.0">
    const settings = Discourse.SiteSettings;
    const user = api.getCurrentUser();
    const hideFromAnonUser = settings.hide_user_profiles_from_public && !user;
    const topicListItemComponent = require('discourse/components/topic-list-item').default;
    topicListItemComponent.reopen({
        hideFromAnonUser: function() {
            return hideFromAnonUser
        }.property()
    });
</script>

```

Sadly, `hideFromAnonUser` never appears to be visible to the raw template. Perhaps `hideFromAnonUser` needs to be calculated from inside the function assigned to `hideFromAnonUser` key? It doesn’t seem to matter. Even if I comment out the first three `const` assignments and just set it to return `False`, or add a `console.log()` call inside it before the return statement, I can see that the function is never executed by anything.

At this point I’m at a loss. Not having ever worked with any of this before, I feel that I’m in over my head. Maybe I’ve overlooked something, but it seems that a lot of the information is either misleading or out of date, or I’m looking in the wrong places, or otherwise just misunderstanding something.

How can I replace the `<a></a>` tags with `<div></div>` tags for avatars in the topic listing pages? Thanks.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [July 27, 2023, 6:23am UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004/2 "2023-07-27T06:23:13Z")

</div>

Hello @boltronics 👋

This will override the `list/posters-column` template. It’s probably better than override the `topic-list-item` template.

```xml
<script type="text/x-handlebars" data-template-name="list/posters-column.hbr">
  <td class='posters topic-list-data'>
  {{#if currentUser}}
    {{#each posters as |poster|}}
      {{#if poster.moreCount}}
        <a class="posters-more-count">{{poster.moreCount}}</a>
      {{else}}
        <a href="{{poster.user.path}}" data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</a>
      {{/if}}
    {{/each}}
  {{else}}
    {{#each posters as |poster|}}
      <div data-user-card="{{poster.user.username}}" class="{{poster.extraClasses}}">{{avatar poster avatarTemplatePath="user.avatar_template" usernamePath="user.username" namePath="user.name" imageSize="small"}}</div>
    {{/each}}
  {{/if}}
  </td>
</script>

```

And you have to add some CSS too because it target `a` and we want it to `div` for anon.

**Desktop / CSS**

```scss
html.anon {
  .topic-list {
    .posters {
      width: 146px;
      > div {
        float: left;
        margin-right: 4px;
        &:last-of-type {
          margin-right: 0;
        }
      }
      div:first-child .avatar.latest:not(.single) {
        box-shadow: 0 0 3px 1px rgba(var(--tertiary-rgb), 0.35);
        border: 1px solid rgba(var(--tertiary-rgb), 0.5);
        position: relative;
        left: -2px;
      }
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [July 27, 2023, 6:26am UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004/3 "2023-07-27T06:26:10Z")

</div>

It’s worth noting the raw template (and the widget!) system is going away soon, but of course that doesn’t solve your immediate problem.

Just be prepared for a refactor, potentially with more tools at your disposal as Glimmer Components are likely to replace them:

> [@Upgrading Discourse to Ember 4](https://meta.discourse.org/t/upgrading-discourse-to-ember-4/225032/9):
>
> Tentatively hoping to get to it in the next 3-6 months, but that’s not set in stone. Right now the primary focus for our “modernising JS” team is getting Discourse onto Ember 4.x+ (3.28 is now EOL).

---

<div class="post-metadata">

### Author: ![boltronics](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/boltronics/32/122375_2.png) [@boltronics](https://meta.discourse.org/u/boltronics)
#### Post date: [July 27, 2023, 6:50am UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004/4 "2023-07-27T06:50:35Z")

</div>

@Don you’re amazing. I’ve tested it and it addresses my issue perfectly.

It is cheating a little by addressing the problem in a different way (I wasn’t aware of the `currentUser` variable being accessible from there) but I can’t argue with the results. 😄

Thanks also @merefield for pointing out the upcoming refactor. I’ll set up a test to monitor our environment for potential regressions.

Thanks guys.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [July 27, 2023, 7:46am UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004/5 "2023-07-27T07:46:03Z")

</div>

I am glad it works for you, however I made some correction on the post above. 🙂  
The `posters-more-count` is appears on private message topic list so it is unnecessary for anon. I removed these from template and CSS too.

---

<div class="post-metadata">

### Author: ![boltronics](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/boltronics/32/122375_2.png) [@boltronics](https://meta.discourse.org/u/boltronics)
#### Post date: [July 27, 2023, 11:53pm UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004/6 "2023-07-27T23:53:55Z")

</div>

Thanks Don. I had initially suspected that might have been the case, as per my original attempts, but I hadn’t investigated it to confirm. Good to know.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [August 26, 2023, 11:54pm UTC](https://meta.discourse.org/t/making-custom-changes-to-a-raw-template/273004/7 "2023-08-26T23:54:33Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.