Ben’s Gallery

Adding Images

Using Markdown

You can easily insert images using Quarto’s graphical interface (‘insert’ menu). Here’s an example with an image centered, with a caption, alt-text, and link:

# The Markdown code looks like this
[![This is a caption.](images/ben_gal_1.jpg){fig-alt="This is alternative text." fig-align="center"}](https://tierheim-gelsenkirchen.de/)

This is a caption.

If you click on an image in the visual editor, you will be given the option to change the image size.

Using HTML

You can also use HTML directly (in the Source editor). Here’s the same image using HTML:

# The HTML code looks like this
<a href="https://tierheim-gelsenkirchen.de/">

<figure style="text-align: center;">

<img src="images/ben_gal_2.jpg" alt="This is an alt-text." style="display: block; margin-left: auto; margin-right: auto;"/>

<figcaption>This is a caption.</figcaption>

</figure>

</a>

This is a caption.

Adding Effects via CSS

You can enhance the appearance of images with CSS. Here’s an example that enlarges the image and adds a shadow on hover:

# The HTML code looks like this
<a href="https://tierheim-gelsenkirchen.de/">
  <figure style="text-align: center;">
    <img src="images/ben_gal_1.jpg" alt="This is alternative text." class="hover-effect" style="display: block; margin-left: auto; margin-right: auto; transition: transform 0.3s, box-shadow 0.3s;">
    <figcaption>This is a caption.</figcaption>
  </figure>
</a>

<style>
  .hover-effect:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
</style>

This is a caption.

Add a class (“hover-effect”) to limit this effect to specific images. Note that the Quarto “insert” interface also includes a CSS field where you could enter CSS code.

Adding GIFs

Quarto supports other formats like GIFs. Here’s how you can insert a GIF using Markdown:

# The Markdown code looks like this
![This is a caption](images/ben_gal_5.gif){fig-alt="This is an alt-text" fig-align="center"}

This is a caption

Using HTML and CSS for GIFs

Here’s an example that applies a greyscale effect to a GIF, which vanishes on hover:

# The HTML code looks like this
<style>
  .gif-container {
    text-align: center;
  }

  .gif-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
  }

  .gif-container img:hover {
    filter: grayscale(0%);
  }
</style>

<div class="gif-container">
  <img src="images/ben_gal_5.gif" alt="This is an alt-text">
  <figcaption>This is a caption.</figcaption>
</div>

This is a caption.

Conclusion

Quarto makes it easy to insert images and videos. For advanced customization, you can use HTML and CSS directly.

Thanks!