I have SVG image file with several nodes each is associated with URL. If I open this file directly in browser I can click on each node and it will open different URLs. However when I use this picture in my Sphinx documentation it doesn't work - picture rendered as a whole so I need to open it by View Image and only then I can click on nodes.
I'm using standard image directive:
.. image:: myfile.svg
Probably I need to use something else?
Sphinx generates <img> tags for images, which makes sense in most cases. However, to have the links inside the svg be clickable, you should use an <object> tag, i.e.:
.. raw:: html
<object data="myfile.svg" type="image/svg+xml"></object>
(Regarding the GitHub issue you linked to, I don't think there's a lot that Sphinx can do here—it's really quite complicated—short of introducing a new option to the .. image directive that lets the user specify whether to render as an img or object tag.)
One simple solution would be to add a link to the svg file in this .. image:: myfile.svg command:
.. image:: myfile.svg
:target: _images/myfile.svg
Take care of checking the relative directory where the images are copied when the html files are generated. By default, it should be _images/.
This way, you can click the SVG file, to see it in a plain page, and then click on it as usual (not a perfect solution but still..).
I am probably misunderstanding the OP's requirements, but why not just include the SVG into the sphinx documentation as html? This appears to work for me:
.. raw:: html
:file: images/image.svg
To include clickable svg links within sphinx I did the following:
.. raw:: html
:file: ../graphs/pymedphys_analysis.gamma.svg
See:
https://raw.githubusercontent.com/pymedphys/pymedphys/1915b9496e93782bdac7dcebff7e26e470e5ff57/docs/graphs/graphs.rst
This then freed me to write the following within an imported style sheet:
svg {
width: 100%;
}
https://github.com/pymedphys/pymedphys/blob/f4d404fa1cf3f551c4aa80ef27438f418c61a436/docs/_static/style.css
This made the svg fit the container as desired.
See:
https://pymedphys.com/developer/dependencies.html#pymedphys
I like this way
.. raw:: html
<a href="https://www.google.com/">
<img src="https://img.shields.io/static/v1?&style=plastic&logo=appveyor&label=Google&message=link2google&color=FF0000" alt="No message"/></a>
I'm still looking for a better solution myself, but I ran into the same problem and used this workaround.
You can use the download directive to give the user a link to the file.
:download:`svg <images/image.svg>`
Related
I want to display an image in my VuePress markdown file. Normally, I'd go with:
However, I'd like to create a custom Vue component that will style the images in a specific way. Then, some images would be displayed using the "standard" markdown syntax (like above), and some others using my custom component.
With my custom component, I'd display the images like this:
<MyComponent src="./resources/myimg.png"/>
As you can see, the images are placed alongside my markdowns, in a resources directory. This makes sense for me, because the image is close to the markdown where it gets displayed.
Unfortunately, the image does not get displayed when I use MyComponent. VuePress (webpack?) handles the images during build and places them in some other directory with a different name. The "standard" Markdown image reference works fine, its URL to the image is set up correctly by VuePress. However, MyComponent does not work, because the src parameter is just a string for VuePress and it does not transform it in any way.
I know that one solution would be to place my images in the /vuepress/public folder. However, I would want to keep the same organization as I have now - images alongside documents.
How can I achieve that?
I had the same issue.
I used the answer #papey provides for a Vue question here
Here is one thing he suggests
<template>
<div id="app">
<img :src="require('./assets/logo.png')"/>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
Is there a setting I can tweak in conf.py to ensure that image previews are generated for links to my index.html?
I think I need to put a link to the image inside:
<head><meta name="og:image" content="https://.png" /></head>
Maybe a setting on one of the html_* options? I read through them, but did not see anything.
https://www.sphinx-doc.org/en/master/usage/configuration.html
Page to link to: https://aiqc.readthedocs.io/en/latest/
One of many meta tags available in:
https://github.com/wpilibsuite/sphinxext-opengraph
conf.py
extensions = ['sphinxext.opengraph']
ogp_image = "https://raw.githubusercontent.com/aiqc/aiqc/main/docs/images/aiqc_logo_banner_controlroom.png"
It even has a field for user-defined <meta> tags.
I am retrieving text which contains images saved in WYSIWYG editor(Summernote). Is there a way to replace src attribute value in img tags using asset()?
Example:
<img src="images/image.jpg"/>...
To:
<img src="https://.../images.jpg"/>
I want solution which would cover all bases: spaces in image name, different extensions...
Sure, just use the curly brace syntax in your blade to render the asset()
<img src="{{ asset('whatever_you_want') }}"/>
I don't think you can do it in Blade. You could, in your model, add a function that replaces all images to full paths. This could be done through a regex pattern that looks for URLs in tags.
I would, however, make sure the full path to the image is included in the text in the database. This way, you always have access to the right path to the image, and you're not relying on a piece of code to display the right image.
I am working on creating a Sphinx theme based on Accelerated Mobile Pages (AMP). While creating it, I came to realize that since AMP uses amp-img tag in place of the img tag. Is there a way to convert all the img tag in the sphinx generated docs to amp-img
There is nothing out of the box. The easiest option is to post-process your HTML output from Sphinx.
When inserting a document in a toctree, the link displayed is the main title of the document. So when I do:
.. toctree::
materials/diffuse
materials/glossy
materials/specular
I get:
Materials
Diffuse material
Glossy material
Specular material
The word "material" is clearly redundant in the toctree, but is important in the document titles for good understanding.
RST allows me to write this:
.. toctree::
Diffuse<materials/diffuse>
Glossy<materials/glossy>
Specular<materials/specular>
But I do not like this, as renaming a document requires updating the index toctree, and link updating is why I went from MediaWiki to Sphinx. Also, this disables the use of :glob: and wildcards in the toctree
Question: Is there any way to specify a toctree title in the leaf document itself, for instance in "diffuse.rst", as a meta-property?
Thanks!
In concept, the css content property would be applicable here. Assuming your title is rendered with <h1> element, you'd want something like this:
.. raw:: html
<style>
h1:after {
content: " Material";
}
</style>
The <style>...</style> block is doing the work. Your docs keep the one word titles (Diffuse, Glossy, Specular) and the css adds " Material" on render. So your pages have the title you want, and your toctree doesn't have the redundant "Material" for each item. However, you'd want that block to appear only on the pages in your "Materials" section -- you can't just add it to the main css file, or it will affect all <h1> elements. Unfortunately, Sphinx doesn't have a mechanism for properly creating a <style> block in a page's <head> section, as far as I know. Therefore to use this css technique you have to accept the complete hack of dropping it in a .. raw:: html directive as shown, somewhere on your page. It won't really matter where you put it in your doc -- any location you choose will produce non-valid html, but will render what you want: your toctree labels will not contain "material"; your page titles will.