pythonhtmlquarto

How to display a logo using brand.yml within a Quarto html document?

Using python kernel and running in vscode to render quarto html document with logo in it but its failing to display the logo in it even after successful rendering of the document. Quarto supporting docs I am referring is link

qmd header section I am using:

title: "Test Report"
author: "HQ"
format: 
  html:
    fontsize: 10pt
    code-overflow: wrap
embed-resources: true
smooth-scroll: true
code-tools:
    source: false
    toggle: false
    caption: none
toc: true
toc-location: right
echo: False
warning: False
message: false
jupyter: python3
theme:
  light: lux
  dark: slate
brand: brand/_brand.yml
include-in-header:
  - text: |
      <style>
      .cell-output-stdout code {
        word-break: break-wor !important;
        white-space: pre-wrap !important;
      }
      </style>

I have brand folder in this project where it is running and within that I am keeping the _brand.yml file and the logos png files enter image description here

_brand.yml file content:

color:
  palette:
    blue: "#ddeaf1"
  background: blue
logo:
  medium:
    light: brand/logo-HQ.png
    dark: brand/logo-HQ-dark.png

Terminal log:

pandoc --output Test_branding.html
  to: html
  standalone: true
  embed-resources: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  toc: true

metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: Test Report
  author: HQ
  smooth-scroll: true
  toc-location: right
  message: false
  jupyter: python3
  theme:
    light: lux
    dark: slate
  brand: brand/_brand.yml
  fontsize: 10pt

Output created: Test_branding.html

I am not sure what is wrong with this as I am trying it for 1st time and have followed the documentation.

Update: Adding screenshot of the rendered document top page enter image description here

Update After implementing Answer:

showing the navbar header but not the logo

enter image description here

Update:

About progress on logo/branding on standalone html documents in Quarto: https://github.com/quarto-dev/quarto-cli/issues/11627

Solution

  • You need to define html document content where the logo shall appear. A possibility is that you set up a _quarto.yml defining a project which has type: website and that you define a navbar. Then the logo will appear on the top left of the page. Below is an example building on top of your provided code where the brand definition is contained within the _quarto.yml and additionally there is a sidebar which also makes use of the logo.

    enter image description here

    _quarto.yml

    project:
  type: website

website:
  title: "Simple Brand Example"
  navbar:
    title: "Demo for Brand and Logo"
  sidebar:
    search: true

brand: brand/_brand.yml

    _brand.yml

    color:
  palette:
    blue: "#ddeaf1"
  background: blue
logo:
  medium:
    light: brand/logo-HQ.png
    dark: brand/logo-HQ-dark.png

    index.qmd

    ---
title: "Test Report"
author: "HQ"
format: 
  html:
    fontsize: 10pt
    code-overflow: wrap
embed-resources: true
smooth-scroll: true
code-tools:
    source: false
    toggle: false
    caption: none
toc: true
toc-location: right
echo: False
warning: False
message: false
jupyter: python3
theme:
  light: lux
  dark: slate
include-in-header:
  - text: |
      <style>
      .cell-output-stdout code {
        word-break: break-wor !important;
        white-space: pre-wrap !important;
      }
      </style>
---

## Overview

This is a document themed using [**brand.yml**](https://posit-dev.github.io/brand-yml/)

## Subheading

{{< lipsum 1 >}}

::: {.content-visible when-format="dashboard"}



:::