Best approach for Including assets in a revealjs theme extension (not a logo or slide background)

[coatless]

What are the best practices surrounding embedding an asset like an image or sound file inside of a revealjs theme extension?

In the case of the image, the use case is not for either a company logo nor a background image. In particular, the image would appear with a specific CSS class (think yolo: true in xargninan). So, the usual uses of the logo and data-background-image under title-slide-attributes fields are not viable.

Continuing on in this line of thought, placing the image asset directly under _extensions gives:

_extensions/
└── karl-say-hi
    ├── _extension.yml
    ├── custom-theme.scss
    └── karl.png

where the _extension.yml is:

title: karl-say-hi
author: First Last
version: 1.0.0
quarto-required: ">=1.3.0"
contributes:
  formats:
    revealjs:
      theme: [default, custom-theme.scss]
      resources: 
        - karl.png

Then, the custom-theme.scss would have:

.reveal.karl h2:after {
    position: absolute;
    content: "";
    background-image: url(karl.png); /* not ideal.*/
    background-repeat: no-repeat;
    background-size: contain;
}

Running quarto render would yield:

  /demo_files/libs/revealjs/dist/theme/karl.png (404: Not Found)

Thus, the custom-theme.scss is unable to access karl.png as it is not copied to the theme *_files/libs/revealjs/dist/theme location.

Trying the resources field (set to karl.png) and resource-path field (set to _extension/karl-say-hi) also seems to lead to the image not being copied. Only the format-resources field (not documented in the revealjs spec) seems to copy the image to be at the same level as the Quarto document and rendered output but still is inaccessible to the custom-theme.scss stylesheet.

[cderv]

This seems to be a scss compilation with sass layer issue. When we compile scss file the resource is not found.

@dragonstyle do you know more about how our sass processing works for that ? How can a custom theme contains resources to use ?

I am not sure if this is possible right now.

[nicebread]

Same issue here - I wanted to add highlighting with SVGs. Adding a local SVG file does not work (same problem as original poster described)

[dragonstyle]

The issue with this is really a path resolution issue. There are two ways to inject styles- using SCSS (theme) or with straight CSS files. When injecting into SCSS, the CSS you provide is merged into the overall theme css, which means that any paths you include with url will be resolved using that generated CSS file as the base. This theme file is buried within our _files directory so it is a little annoying / potentially fragile to form a relative path from there. That said, something like:

custom.scss

/*-- scss:rules --*/
h2:after {
    position: absolute;
    content: "";
    background-image: url(../../../../../who.jpg); /* not ideal.*/
    background-repeat: no-repeat;
    background-size: contain;
    height: 100px;
    width: 100px;
}

along with:

_extension.yml

title: test123
author: First Last
version: 1.0.0
quarto-required: ">=1.3.0"
contributes:
  formats:
    revealjs:
      theme: [default, custom-theme.scss]
      format-resources: 
        - who.jpg

should work.

It is much simpler to make these references from a css file that you provide, as that file is just linked to from within the header and left in its current location (meaning that you can simply use relative references and it should work). For example:

test123.css

h2:after {
    position: absolute;
    content: "";
    background-image: url(who.jpg); /* not ideal.*/
    background-repeat: no-repeat;
    background-size: contain;
    height: 100px;
    width: 100px;
}

_extension.yml

title: test123
author: First Last
version: 1.0.0
quarto-required: ">=1.3.0"
contributes:
  formats:
    revealjs:
      css: test123.css

Both of these should work and it's really a question of which is preferable. HTH!

[nicebread]

Great, that solved it! Thank you.