How can I set an opengraph preview image to be a particular python-generated cell output image?

[astrowonk]

Description

According the OpenGraph documenation:

The path to a preview image for this content. By default, Quarto will use the image value from the document metadata, or if that isn’t specified, the image value from the website: metadata. If you provide an image, you may also optionally provide an image-width and image-height to improve the appearance of your Twitter Card.

If image is not provided, Quarto will automatically attempt to locate a preview image.

And then under preview images it suggests several ways to make a preview image, including using the class {.preview-image}

But it's unclear to me how I can apply a class to an image that is a cell output?

I can specify an image in the yaml header, so I figured out the full url to index_files/figure-html/cell-4-output-1.png (or what have you) and hard coded it in image in my post's yaml header, which works. But is there a better way to do this?

[mcanouil]

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.

From https://quarto.org/docs/websites/website-listings.html#listing-fields.

The path to a preview image for this content. By default, Quarto will use the image value from the site: metadata. If you provide an image, you may also optionally provide an image-width and image-height to improve the appearance of your Twitter Card.

If image is not provided, Quarto will automatically attempt to locate a preview image.

From https://quarto.org/docs/reference/formats/html.html#website

Then #| classes: preview-image from:

• https://quarto.org/docs/reference/cells/cells-jupyter.html#attributes

Or you emit markdown.

[astrowonk]

Ok, so the trick is to put #| classes: preview-image in the cell. I swore I tried that, but I may have had my site-url messed up. Thanks!

I would have thought Quarto would just automatically use the first image (even from a computed cell) as the opengraph image, but og:image not seem to get set without the #| classes: preview-image in a cell - even though it finds a preview image (generated in a python cell) for the listing page automatically.

[mcanouil]

would have thought Quarto would just automatically use the first image (even from a computed cell) as the opengraph image,

Yes, but I have no idea where is located or what is your computed image since no code was shared.

I exposed the theory. If something does not work, it could be a bug.

[astrowonk]

Here is an example repo, with two test blog posts. Both posts have preview images on the listing page.

In one post, I use the #| classes: preview-image and that post has <meta property="og:image" content="index_files/figure-html/fig-polar-output-1.png"> in the generated HTML.

In the other, I don't set the class in the cell, and there's no og:image in the metadata.

So, perhaps this is a bug?

(base) marcosh@Discovery:~/Developer/active_projects/quarto-ogimage(main) » quarto render                                                                                           1 ↵
[1/4] posts/a-test-post-og/index.qmd

Starting python3 kernel...Done

Executing 'index.quarto_ipynb'
  Cell 1/1: 'fig-polar'...Done

[2/4] posts/a-test-post/index.qmd

Starting python3 kernel...Done

Executing 'index.quarto_ipynb'
  Cell 1/1: 'fig-polar'...Done

[3/4] index.qmd
[4/4] posts.qmd

Output created: _site/index.html

(base) marcosh@Discovery:~/Developer/active_projects/quarto-ogimage(main○) » cat _site/posts/a-test-post/index.html | grep og:image
(base) marcosh@Discovery:~/Developer/active_projects/quarto-ogimage(main○) » cat _site/posts/a-test-post-og/index.html | grep og:image                                               
<meta property="og:image" content="index_files/figure-html/fig-polar-output-1.png">

[cscheid]

@astrowonk can you open a new issue with this latest pair of examples you have and tag me? Looks like a bug.