How can I create a carousel of pictures in my quarto About page?

[dionnecargy]

Description

I am currently writing my own website about page following the instructions from the following resource, using the broadside template: https://quarto.org/docs/websites/website-about.html

This works perfectly as intended, but I wish there was a way that the image on the left-hand side (of the broadside template) could show a carousel of images using a similar code that works, where images 1, 2 and 3 could be anything (see random attached images).

E.g. using the following code:

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="Profile Picture 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="Profile Picture 2">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="Profile Picture 3">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

I have tried changing this:

about:
  template: broadside
  image: image1.jpg

to

about:
  template: broadside
  image: carousel.html

but it doesn't appear to work as the image parameter appears to need a .jpg or image file.

I am using quarto in RStudio v2024.09.0+375 (2024.09.0+375) with R v4.4.0 on MacOS 14.6.1.

Thank you so much!!

[mcanouil]

You can't use the about template for this.
You likely need to define your own HTML template and use it.

• https://quarto.org/docs/journals/templates.html#template-partials

An alternative would be to use JavaScript to replace the HTML node with yours.

Note that the YAML options don't take arbitrary content.
For instance, including an image in HTML is completely different from including a whole HTML code block.
There was no way it was going to work.

Could you share the version of Quarto you are using instead of RStudio version? quarto --version in a terminal.

[mcanouil]

FYI, the Broadside template is https://github.com/quarto-dev/quarto-cli/blob/00249a46bab6e3e45adb9900677a33e599cb10d3/src/resources/projects/website/about/broadside.ejs.html

Contrary to the template/partials, I mentioned which use Pandoc templating, the above code uses EJS, so you can't use it as is.