Full page-width image on website and table of contents after it

[jpmorr]

Description

I'm building a website using Quarto and on one sub-page I'm trying to use a full screen image as the page title rather than text. To achieve this, I've used the following code:

---
pagetitle: "Test Page" 
---

::: {.column-screen}
![**Here's a really wide full screen image that shouldn't be affected by the ToC!**](https://placehold.co/4000x1000)
:::


## What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

## Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

## Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

## Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

project:
  type: website

website:
  title: "testing site"
  back-to-top-navigation: true
  navbar:
    background: primary
    left:
      - text: "Home"
      - text: "Page 2"
      - text: "Page 3"

format:
  html:
    theme: zephyr
    toc: true 

This almost works perfectly except for one small thing - the table of contents. When I use a full width image before any page text, the table of contents on the right is between the navbar and the image when the page loads like this:

And then hovers over the image as you scroll:

Is there anyway to specify that the table of contents doesn't appear until after the full width image on this page?

Or is is possible to specify a title image for the page in the front matter so that the table of contents loads after it?

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[mcanouil]

It's just a case of the image always being a little smaller than the title-banner background

Again, I am afraid you'll have to learn and play with CSS which can handle those cases.

When you want intermediate to advanced HTML stuff, there is no way around getting it done using HTML/CSS.

[jpmorr]

The image is there because if I put the path into []() the image renders. But it must be related to the path as you say.

[mcanouil]

See other discussion very much related to this one:

• Website Hero/Banner Image #1986

[jpmorr]

So a little bit more testing shows that the amount of the image rendered is dependent on the size of the title string. Since I was trying to pass in an title with an empty or small string I would get no title banner. So just pass in a few line breaks and it works perfectly.

This is a hack, but works as I want it to.

---
pagetitle: "Test Page" 
title: |
  <br>
  <br>
  <br>
  <br>
title-block-banner: image.jpg
---

# Here's a really wide full screen image that shouldn't be affected by the ToC!

The image path is a problem for some reason though. Image in the root works fine, but any other path the image fails to render for some reason.

[mcanouil]

Without knowing the structure of your project hard to see what's the issue, but it works at the root, it must work anywhere within the project (assuming the right path is provided).

[jpmorr]

Yes, it was the path: it should have been title-block-banner: files/img/banner.jpg and not title-block-banner: /files/img/banner.jpg

Strangely both ![](files/img/banner.jpg) and ![](/files/img/banner.jpg) will render the image, so I'm not sure why title-block-banner doesn't, but resolved.

[jpmorr]

Just to note, this hack is not responsive because of the fixed number of line breaks. CSS and partials would be the way to go to make it work properly for all screen sizes.