Include images and fonts in themes and components

[featheredtoast (Jeff Wong)]

Oh wow, this is awesome! Themes keep getting better and better. For those of us experimenting with building remote repo themes, what is (or will be) the equivalent way to include assets in our repository?

[david (David Taylor)]

include assets in our repository

Create and share a font theme component

Discourse supports importing themes containing assets from a remote repository. This allows theme authors to share fonts and images. Create a new git repository with the font mkdir discourse-roboto-theme cd discourse-roboto-theme git init . vim about.json For about.json add a skeleton config file { "name" : "Roboto theme component", "about_url" : "", "license_url": "", "assets": { "roboto": "assets/roboto.woff2" } } Add a LICENSE file, I usually use MIT vim LICENSE D…

[sam (Sam Saffron)]

Can this be used to add additional javascript files as “assets”? Or is it just images/fonts?

Up to @sam but that sounds like a lot of scope creep to me. Plus added danger…

Yeah, this is not planned at the moment. My brain can think of a hack that could make this work, but it is horrid and I am not going to disclose how it could be done.

I think we can revisit this in a few more months when the system has fully stabilized and community themes and theme components have sprouted

[Pad_Pors]

Hi.

I tried to add google material design font-icons as posted above, but I couldn’t succeed. I just wanted to be sure if I’m doing anything wrong or this recipe is not for font-icons.

I did as followings:

• uploaded the icon font via the +add button of the theme,
• scss name is set to $Material
• added these lines in the body:

@font-face {
  font-family: Material Icons;
  src: url($MIwoff2) format('woff2')
}

• added these lines to css:

  .fa-gear::before{
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
    content: "settings";
}

[sam (Sam Saffron)]

Screenshot of upload section? Any errors when you save the sass?

[Pad_Pors]

all the font formats seem to be uploaded, without errors:

and this is the screenshot of the settings icon:

[sam (Sam Saffron)]

If the CSS saves with no error when you add the var it means it should have taken correctly. Maybe try explicitly to preview the component, then dig into CSS using dev tools.

[Pad_Pors]

the error was with the font icons, it seems that the way to use material design icons is to add this line to the head section, and not to attach them!

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

[downey (Michael Downey)]

Currently (as of 2018-08-18) after uploading three weights of a single font family, each with unique variable names:

1. If I use the full URL path to the uploaded font, things are fine, but
2. If I use the variable, the font does not render.

[alexs (Alex Sherwood)]

Is it possible to upload images in PNG format - to preserve their transparent background?

I’m trying to upload the logo & small logo for our site but it’s being converted to JPG.

becomes

I’m trying to create a dark theme for the site at the moment ( Mojave) & this giving the image a white background which doesn’t look that great.

[tshenry (Taylor)]

Try the instructions laid out in this topic:

PNG converted to JPG?

Set the “png to jpg quality” site setting to 100 to disable that behavior

And also note:

https://meta.discourse.org/t/how-to-actually-upload-files-to-a-new-discourse/40877/7?u=tshenry

[sam (Sam Saffron)]

Simpler workaround here would be to run png through tinypng.com and upload that

[fearlessfrog]

If I upload a font, I get a CORS policy for the No ‘Access-Control-Allow-Origin’ because our uploads are via a different subdomain on our ‘s3 cdn url’ setting e.g. forums.mudspike.com vs uploads.mudspike.com (for the CDN).

Is there a way to get around that for font files in themes?

[Nichalas_Petranek]

this makes me wonder…

i do love the Samsung Sans font. How would I go about changing my site’s font to Samsung Sans?

[awesomerobot (Kris)]

Is there a way to get around that for font files in themes?

In the site settings there’s an cors origins option — if you add your uploads url there it should allow it.

i do love the Samsung Sans font. How would I go about changing my site’s font to Samsung Sans?

All the instructions for adding a custom font are in the original post above. You need to upload the font file and then add the custom CSS.

[angus (Angus McLeod)]

Just a note here that I was playing around with images in themes, and found that I wanted to use a theme image url in a template. Perhaps there’s another way of doing this, but I found this nifty method using SASS functions and JSON: Making Sass talk to JavaScript with JSON | CSS-Tricks

about.json

"assets": {
  "balloons": "assets/balloons.png",
  "bike": "assets/bike.png"
}

common.scss

@function image-urls() {
  @return '{ "balloons" : "#{$balloons}", "bike" : "#{$bike}" }';
};

body::before {
  display: none;
  content: image-urls();
}

head.html

<script type='text/x-handlebars' data-template-name='components/categories-and-latest-topics'>
  ...
  <img src="{{imageUrls.balloons}}">
  ...
</script>

<script type="text/discourse-plugin" version="0.8">
const computed = require('ember-addons/ember-computed-decorators').default;

api.modifyClass('component:categories-and-latest-topics', {
  @computed()
  imageUrls(){
    let style = null;
    if (window.getComputedStyle && window.getComputedStyle(document.body, '::before')) {
      style = window.getComputedStyle(document.body, '::before');
      style = style.content;
    }
    return JSON.parse(JSON.parse(style));
  }
});
</script>

[david (David Taylor)]

Nice workaround! I think it would be good for us to make asset URLs available to javascript/templates. Easiest thing would be to make it work like

handlebars: {{theme-setting "assets.balloons"}}

javascript: settings.assets.balloons

Or with slightly more effort we could have

handlebars: {{theme-asset "balloons"}}

javascript: themeAssets.balloons

[david (David Taylor)]

@sam implemented this here:

FEATURE: treat theme_uploads as settings in JavaScript

You can now do

handlebars: {{theme-setting "theme_uploads.balloons"}}

javascript: settings.theme_uploads.balloons

cc @angus

[sharkey]

How do I use an uploaded asset in an image tag within the html in the theme editor (e.g. after header or header)? I have an image I want to add to the after header section, but I’m uncertain what the relative url is for an uploaded image. I’ve successfully used the scss variable for adding background images in the css file, but I want to add images within the html as well.

[awesomerobot (Kris)]

You can’t use an asset variable directly in HTML at the moment. You can either link to the asset directly, or use CSS to load the asset as a background-image of an element (I’ve added an example to the original post).