How do I add image-placeholder to my .ipynb rendered in qmd?

[Pratichhya]

Description

How do I add image-placeholder to my .ipynb rendered in qmd?

I am rendering several notebooks as listing in my quarto markdown. However, I want to set an image-placeholder to be displayed in the placard. How can I set the title and image as I do in normal and files but for these listings? Currently, I have the following yaml in my qmd that load the first available image in the document and the title of the document itself:

title: "Jupyter Notebook Samples"
listing: 
  - id: LandMonitoring
    contents:
        - ParcelDelineation/Parcel delineation.ipynb
        - ice_monitoring.ipynb
    type: grid
    filter-ui: true
  - id: AtmosphericMonitoring
    contents: 
        - NO2Covid.ipynb
        - air_pollution_statistics.ipynb
    type: grid
    filter-ui: true

However, I even tried to include the title and image as down below but in this case, though it works to certain extent to display it is not directed to a different page but loads the same page again:

title: "Jupyter Notebook Samples"
listing: 
  - id: LandMonitoring
    contents:
        - href: ParcelDelineation/Parcel delineation.ipynb
          title: Parcel Delination 
          image: _images/pd.png

[mcanouil]

Add the image-placeholder metadata to your files see https://quarto.org/docs/websites/website-listings.html#default-1.
Or set image metadata if you have non default.
Or use the auto-detection described in the same page:

The image for this item, read from the image field of the front matter, or automatically discovered by taking the first of an image of class preview-image, an image with a file name starting with feature, cover, or thumbnail, or the first image to appear in the document.

[Pratichhya]

The auto-detection method worked for most of my python notebooks but there were few without any images within. Thus I tried to implement image-placeholder under the listing such as:

title: "Jupyter Notebook Samples"
listing: 
  - id: LandMonitoring
  - image-placeholder: "image.png"
    contents:
        - ParcelDelineation/Parcel delineation.ipynb
        - ice_monitoring.ipynb
    type: grid
    filter-ui: true
  - id: AtmosphericMonitoring
    contents: 
        - NO2Covid.ipynb
        - air_pollution_statistics.ipynb
    type: grid
    filter-ui: true

but then all the images under the ID 'LandMonitoring' listing have the same image in placards, but I wanted only those that didn't show the image so I tried using image:

title: "Jupyter Notebook Samples"
listing: 
  - id: LandMonitoring
    contents:
        - href: ParcelDelineation/Parcel delineation.ipynb
          title: Parcel Delination 
          image: _images/pd.png

And this did work as expected; however, when I clicked on the placards, nothing is happening, and it was not directed to the notebook.

[mcanouil]

image-placeholder is for when no image are provided.
Auto-detection does not set image and is not triggered if image-placeholder is set since this set image when not provided.

You can (and need in your case) to set image inside the notebooks as metadata.