Search code examples
htmlcssquarto

Add images to sidebar of a quarto website

I'm building a quarto website and my for my homepage .qmd file looks like the following:

---
title: ""
about: 
  template: solana
  image: Headshot.jpg
---

# Hellow

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 

::: {#second-column}
![](images/image1.JPG)
:::

::: {#first-column}
![](images/image2.JPG)
:::

This works but the problem is I want to put images in the left and right sidebars where no text/objects can go. The below image shows where I want the images to go:

enter image description here

However my images remain centered in the page. I have not modified the css at all since I ma less familiar with its conventions, but I assume this may be necessary to do for a solution.

How can I move images to the side of the quarto website?

Solution

  • The left side is usually reserved for the sidebar, but I like to claim more of the space by modifying grid in the yaml below and specifying sidebar: style: docked (instead of default floating).

    The right margin is easy enough. You can specify a number of built in classes, such as .column-margin. See https://quarto.org/docs/authoring/article-layout.html#margin-content

    Here's an example:

    _quarto.yml

    project:
  type: website
  output-dir: _site

website:
  title: "Test Website"
  search: false
  reader-mode: false
  sidebar:
    title: "Test Website"
    style: docked
    collapse-level: 2
    contents:
      - section: "Sidebar Section"
        contents:
          - "index.qmd"

format:
  html:
    embed-resources: true
    theme:
      light: lumen
    toc: true
    toc-expand: true
    toc-depth: 4
    toc-location: right
    toc-collapsed: false
    grid:
      sidebar-width: 300px
      body-width: 1000px
      margin-width: 500px
      gutter-width: 1.5rem

    index.qmd

    ---
title: Home page
---

Text here

::: {.column-margin}
![](assets/my-image.png)
:::

    After a quarto render, here's the result: