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

ViSa
December 24, 2024
26 views
1 vote
2 Answers

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

_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

Update After implementing Answer:

showing the navbar header but not the logo

Update:

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

Answers

Chosen as BEST ANSWER

I think Quarto team is not that helpful didn't receive any good reply on their page and SO is far more helpful so posting it here what I 'av tried with couple of alternatives and now using one of them. They are like a hack & messy but might be useful in certain situation until there is a official work release on this..

This is what I am using by adding a logo Image on the top, there are several ways to do it based on your needs:

---
title: BrandName
title-block-banner: true 
format: 
  html:  
    grid:
      sidebar-width: 10px
      body-width: 900px
    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>
---


:::: {layout="[30,-40,30]"}

::: {#first-column}
![](logo/brand-logo.png)
:::

::: {#second-column}
**Analytics Report**

Date: `{python} datetime.datetime.now().strftime("%d/%m/%Y")`

For: **user name**
:::

::::

---


Body text or any content you want

```{python}

```

This would place the logo on the very top

html:
    include-before-body: 
      text: |
        <img src="logo/brand-logo.png" width="180" height="100">
        <p style='text-align:center;font-size:80px;font-weight:900;'><u>BrandName</u></p>

(Edit)

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.

_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"}



:::

Please signup or login to give your own answer.

Click here to cancel reply.