wpilibsuite / sphinxext-opengraph

Sphinx extension to generate unique OpenGraph metadata
https://sphinxext-opengraph.readthedocs.io
Other
74 stars 27 forks source link

Use absolute paths for og:image #43

Closed nabobalis closed 2 years ago

nabobalis commented 3 years ago

(Not sure if this is the best place to ask this)

I wanted the first image to use the image in our example gallery that is powered by sphinx-gallery. This is on RTD.

This extension works very well on the gallery pages but the issue is that due to the relative paths that the gallery produces, open graph can't resolve the image path in previews.

E.g.,

<meta property="og:image" content="../../../_images/sphx_glr_downloading_lascoC2_001.png" />

I asked the people at Sphinx-Gallery if it was possible to work around this got this response:

Sphinx Gallery generated rst gives an image directive with a relative path to the image, e.g., from our an example in our docs:

.. image:: /auto_examples/images/sphx_glr_plot_0_sin_001.png
    :alt: plot 0 sin
    :class: sphx-glr-single-img

when Sphinx generates the html, it looks like this:

<img alt="plot 0 sin" class="sphx-glr-single-img" src="../_images/sphx_glr_plot_0_sin_001.png" />

so it looks like sphinxext-opengraph is pulling the image info from the html page generated, does this seem right for your example? Is there a way to set the config for sphinxext-opengraph such that you can specify a pattern and do some string formatting to get the image url? For example the image above has the following url:

https://sphinx-gallery.github.io/stable/_images/sphx_glr_plot_0_sin_001.png

https://github.com/sphinx-gallery/sphinx-gallery/issues/707#issuecomment-867576972

Is it possible to work around this via configuration in sphinxext-opengraph?

TheTripleV commented 3 years ago

Yes, I think so. sphinxext-opengraph should be able to resolve all paths to absolute paths.

astrojuanlu commented 3 years ago

Came here to report this same issue, I observed it while trying to adopt the extension on the Read the Docs blog: https://github.com/readthedocs/blog/pull/118

The generated image link is wrong: background-image: url("https://readthedocs-blog--118.org.readthedocs.build../_images/rebuild.png");