Is there a way to add credits to the thumbnail image ?

[aksharasoman]

Description

In a quarto webpage, is there a way to add credits to the thumbnail image ? either as a caption or as overlayed text.

It would be really nice if the thumbnail image (on posts) could support an image credit and url field, sometimes important for licensing stuff etc.

An example header image : The Jekyll template Minimal Mistakes has implemented this quite nicely via YAML front matter.

[mcanouil]

Could you please provide some context? What format are you referring to? Which thumbnail, and where would it be used?

Without this information, it’s difficult to provide a precise answer.

[aksharasoman]

Thank you for the response. I have updated the question description.

[mcanouil]

Here is what you can do using JavaScript and adding attributes to your featured image.

quarto create project blog

I edited one post:

---
title: "Welcome To My Blog"
author: "Tristan O'Malley"
date: "2024-11-16"
categories: [news]
include-after-body:
  - text: |
      <script>
      document.addEventListener("DOMContentLoaded", function() {
        const images = document.querySelectorAll('img[data-credits]');

        images.forEach(image => {
          const creditsText = image.getAttribute('data-credits');
          if (creditsText) {
            const creditsDiv = document.createElement('div');
            creditsDiv.textContent = creditsText;
            creditsDiv.style.position = 'absolute';
            creditsDiv.style.bottom = '0';
            creditsDiv.style.right = '0';
            creditsDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
            creditsDiv.style.color = 'white';
            creditsDiv.style.padding = '5px';
            creditsDiv.style.fontSize = '12px';
            creditsDiv.style.pointerEvents = 'none'; // Ensure the text doesn't interfere with image interactions

            const wrapperDiv = document.createElement('div');
            wrapperDiv.style.position = 'relative';
            wrapperDiv.style.display = 'inline-block'; // Ensure the wrapper fits the image size
            image.parentNode.insertBefore(wrapperDiv, image);
            wrapperDiv.appendChild(image);
            wrapperDiv.appendChild(creditsDiv);
          }
        });
      });
      </script>
---

This is the first post in a Quarto blog. Welcome!

![](thumbnail.jpg){data-credits="Photo by John Doe"}

Since this post doesn't specify an explicit `image`, the first image in the post will be used in the listing page of posts.

You can set include-after-body in _metadata.yml or even in _quarto.yml.