Modify TopicExcerpt template?

Dev
1

I want to add the topic-creator avatar to topic-list excerpts, but there doesn’t seem to be anyway to modify the Topic Excerpt.

TopicExcerpt:

I think the only option is to hide .topic-excerpt with CSS and use my own component via the topic-list-main-link-bottom Plugin Outlet which is right under the TopicExcerpt area. The problem with that is the plugin outlet only gets the topic as an arg, so I have to duplicate all the logic in expandPinned to know if I should be showing it or not.

tl;dr; Could we get a PluginOutlet inside the TopicExcerpt and/or pass @expandPinned to the topic-list-main-link-bottom outlets?

1 Like
2

You have more options now, see:

1 Like
3

I’ve looked into all the options AFAIK. There is no surgical way to modify the just the excerpt that I can see.

4

yes there is, delete it and add your own

5

You mean replace the whole topic-list-item with my own? I’d like to avoid having to maintain all that when I only want to modify a small piece.

6

no, replace the excerpts cell, or add another one next to it and hide it.

7

The excerpt is not a cell. It’s used inside the topic-cell and in the mobile item

You can also see there that the nearby topic-list-main-link-bottom plugin-outlet only passes the @topic, but not @expandPinned.

1 Like
8

Ah yes you are right, apologies.

I saw the file in the topic-list components and made an assumption.

But in any case, there’s loads of tools to achieve what you want here, no?

Plugin outlet looks like a good option and then manipulate the layout with CSS?

9

As for the expandPinned, maybe replicate the logic in your new Component as much as you need to?

10

Yeah that’s the path i was going down. Which also means replicating

  get useMobileLayout() {
    return applyValueTransformer(
      "topic-list-item-mobile-layout",
      this.site.mobileView,
      { topic: this.args.outletArgs.topic }
    );
  }
  //and from discovery/topics.js
  get expandGloballyPinned() {
    !this.expandAllPinned();
  }
  get expandAllPinned() {
    const category = this.discovery.category?.id
    const tag = this.discovery.tag?.id
    return category || tag;
  }

I was hoping pleading to the gods might produce a cleaner option :pray: :sweat_smile:

1 Like
11

That’s what I’m usually doing on a Monday morning.

2 Likes
12

this seems reasonable, so I’ve done this here:

5 Likes