How do I use images from assets in HTML of a Glimmer-based theme component?

Dev
1

Include assets (e.g. images, fonts) in themes and components seems to still refer to the handlebars way of doing things, if I’m grasping it correctly. Is the new Glimmer way already available for getting images from the theme component’s assets directory usable in an HTML(-template) of the same theme component?

My use case is to replace the now-broken legacy theme component described in Templating of my "component" broke. How do I fix it?.

What I've tried

I’ve generated a new theme component project with discourse_theme new discourse-tc-geowebforum-sponsors and then tried to replicate the previous plugin without the conditional logic and with an inline template, but that lead to

[THEME 6 'geowebforum-sponsors'] Error: [THEME 6 'geowebforum-sponsors'] Compile error: SyntaxError: /theme-6/discourse/api-initializers/geowebforum-sponsors.gjs: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-relative-url:

in the browser console.

I’ve also various combinations of:

  • pulling the template out into a constant
  • single (instead of double) curly braces
  • using a function call (themeRelativeUrl("asseco_berit.jpg")) within the curly braces
  • moving the template to javascripts/discourse/components/geowebforum-sponsors.gjs (and importing it from the initializer)
  • moving the template to javascripts/components/geowebforum-sponsors.gjs (and importing it from the initializer)
  • introducing a class GEOWebforumSponsorsComponent extends Component {} in that file and importing that in the initializer (while exporting the template from the same file as the class under name template, as an LLM had suggested to me – I’m still unsure whether that would make any sense.)

I either got

  • the same error (albeit from that other file)
    or
  • klass is not an Ember component
    or
  • literal template placeholders in the resulting DOM, naturally leading to 404s for the image sources
2 Likes
Templating of my "component" broke. How do I fix it?
2

Hmm, did you see this bit?

1 Like
3

Is it an “upload” if I put them in the assets directory of the theme component’s source code project?

4

Yes. You can put them directly in the assets/ directory.

1 Like
5

With the hints here and some help from the ask.discourse.com bot I’ve managed to get it working:

  • Here’s the relevant commit on top of what the discourse_theme CLI generated.
  • Here’s the difference to my previous unsuccessful attempt mentioned in the top post.

Thank you, @NateDhaliwal!

Key things I struggled with on the way here:

  • In the templates, neither arbitrary JavaScript expressions (such as function calls) nor filter expressions (of form some-transormation-function someVariableOrLiteral) work in the double curly braces. Only single variables can be interpolated there.
  • For one of the two assets, I had forgotten to include the directory name assets/ in the corresponding file path value in about.json. This failed silently, resulting in the corresponding setting to be undefined, which I guess caused the whole template to be silently omitted or something.
  • At one point during development, the theme component synched by discourse_theme watch ... had no effect, whether in preview or explicitly activated. Letting discourse_theme watch ... create a new copy of the component on the instance (and deleting the previous copy) rectified that. Not sure what exactly had happened there.
6

Did you check the browser console? Errors in your component are reported there, and if there are errors, your component will not show (or show completely).