I use Sphinx to generate some docs. I have a reStructuredText document and I'd like to put an image into it. The case is that the image should be clickable so that after a user clicks the image then they should be shown this image in full size. I use the image directive and its target option like this:
.. image:: /images/some_image.png
:alt: Image descripion
:align: center
:target: `big_some_image`_
.. _big_some_image: /images/some_image.png
The problem is that in the rendered page I get:
<img src="../../../_images/some_image.png">
So there is correct src from the image directive but an incorrect href attribute from the hyperlink.
Questions:
is there any way to generate links in the way that image directive does it? I mean relative to the document.
is there any other (built in) way to have "thumbnail-> click -> big image" behaviour?
Simply use the scale option:
.. image:: large_image.png
:scale: 20%
When the scaled image is clicked on, the full image loads in its own window. So this doesn't increase the image size on the page, but that would be messy anyway.
When you use the image directive from within Sphinx, Sphinx does some special handling to find the image file and copy it into your project (like your _images directory), and then renders the HTML to point to that place.
But the target option just takes a URL as a parameter. It knows nothing about your Sphinx project, or how your images are laid out, and does not attempt to guess.
If you want to have it point to a larger version of the same file, you will likely need to do some manual steps (like maybe copying the file to a specific location), or maybe provide a relative URL to the large file, rather than the absolute URL you have in your example.
If you want to go a completely different way, you could also try overriding and modifying the HTML templates for your project to add some JavaScript to get the click-to-larger-image effect you want.
Looks like there is a Sphinx extension that does this now, and quite nicely at that, sphinxcontrib-fancybox 0.3.2. Install with pip, add it to your extensions in conf.py, and use the fancybox directive:
.. fancybox:: images/image.png
Relative links seem to work. For the Mapserver docs setup, if an image is placed in the images directory, a relative link like in the following code works in my local build. Here is an example using figure (the underscore ("_") before "images" in the target link is necessary):
.. figure:: ../../images/carto-elements.png
:height: 400
:width: 600
:align: center
:target: ../../_images/symcon-overlay.png
Related
I have an url that corresponds to an image.
The url looks like https://myImageUrl (there's no reference to the extension).
I want to show this image but i don't know if it's an svg or a jpg.
Is there a way to get the image's extension from its url? I've tried mime package https://pub.dev/packages/mime but it doesn't work.
I need to know the image's extension because:
if it's a svg I'll use SVG library
if it's a jpg I'll use Image.network('myImageUrl')
Is there a way to get the image's extension from its url
No. If it's not there, it's not there. There is no magic available that would show missing information.
Since you want to load it from assets if it's an svg (which seems weird, but okay), you could just check the given URL against all assets... if it's in their, show it from assets.
Im trying to insert an image my documentation page,going through the documentation i have it done like this
**Tutorial on Training model**
==============================
.. image::/home/predible/Desktop/sixfortyintofoureighty.png
When i run
make html
It does not throw any error but the image does not display in the documentation,Any suggestions on how do i get my image to display would be really helpful,thanks in advance.
There should be a space between .. image:: and the path to the image.
The image path must either be relative to the source file, or absolute which means that it is relative to the top source directory (see http://www.sphinx-doc.org/en/stable/rest.html#images).
I am working on the .md file in the following location:
https://github.com/markroche92/SDND-Traffic-Sign-Classification/blob/master/writeup_template.md
None of my linked images are appearing when I view the .md file in Github. I have used the following markdown code to attempt to link the images:
---
**Build a Traffic Sign Recognition Project**
[//]: # (Image References)
[image1]: ./histogram_input_data.png "Input_Data"
[image2]: ./Label26.png "Label_26"
[image3]: ./Label36.png "Label_36"
[image4]: ./Label41.png "Label_41"
[image5]: ./channels.png "Channels"
[image6]: ./nn_results.png "NN_Results"
[image7]: ./GermanRoadSigns/x32/132.jpg "Img_1"
[image8]: ./GermanRoadSigns/x32/232.jpg "Img_2"
[image9]: ./GermanRoadSigns/x32/332.jpg "Img_3"
[image10]: ./GermanRoadSigns/x32/432.jpg "Img_4"
[image11]: ./GermanRoadSigns/x32/532.jpg "Img_5"
[image12]: ./int_ims.png "Performance"
[image13]: ./top_five_predictions.png "Top_Five_Predictions"
[image14]: ./structure.jpg "Network_structure"
---
...
The following histogram shows the distribution of training, validation and
test set images per label:
![alt text][image1]
An example image was visualised for each label. Three are displayed below:
![alt text][image2]
![alt text][image3]
![alt text][image4]
Each image has three channels (red, green, blue). The three channels are
visualized below for an example image:
![alt text][image5]
However, none of the images seem to be appearing when .md is viewed on Github. Can anyone show me where I am going wrong here?
In the actual .md file you are not using relative URLs like in your supposed quote, but absolute ones like this:
https://github.com/markroche92/SDND-Traffic-Sign-Classification/blob/master/structure.JPG
This won’t work because it is actually a standard GitHub file page, not the image itself. To link to the image, remove /blob from the path and change the domain to rawgit.com – or actually use relative URLs with or without leading ./, but make sure to get the letter case right.
https://rawgit.com/markroche92/SDND-Traffic-Sign-Classification/master/structure.JPG
structure.JPG
I also had this issue on some of my images, but not others. It ended up being how I capitalized my image names in my markdown file. For example:
Image name on my computer:
oneGreatImage.png
Image name in my Markdown file:
onegreatImage.png
When I capitalized the G again and pushed the changes it loaded just fine.
It appears that GitHub is VERY picky about matching the filenames on the images so double check that.
I am trying something rather basic in Sphinx. I have some images, but I prefer to keep them pretty small, and I want to allow the user to click on them to get the larger image.
I do not find a syntactic way to combine image: or figure: with ref: or link:.
.. image:: _static/my_image_small.png
and I have in the same folder my_image_large.png.
If you come up with a solution, should the larger image just be a file with an explicit link to it or do I create a reSt file with an additional image: tag?
An alternative could be to play with the image sizes in the reSt file, but then I still do not know how to create the link from the small image to the large image.
Thank you for helping me.
Just use the target directive. You would end up with something like:
.. image:: _static/my_image_small.png
:target: _static/my_image_large.png
It is not strictly necessary to use the references to the static folder in your source. They will be copied to the _images folder anyway when you build the docs (so you will have them twice in your builds, without needing them there).
I always use a folder called figures next to the source folder where I manage the images. The my_image_large.png files, however, you would want to place in the _static folder as the contents will be copied on build.
I have some images in my documentation created as a set of reST files in Sphinx. I prefer to keep them pretty small, and I want the user to click on them to get the larger image. The smaller image is not for file size reasons but for presentation reasons. I do not find a syntactic way to combine the tags image: or figure: with ref: or link:.
.. image:: _static/my_image_small.png
and I have a bigger version in the same folder: my_image_large.png.
If you come up with a solution, should the larger image just be a file with an explicit link to it or do I create a reST file with an additional image: tag? An alternative could be to play with the image sizes in the reST file, but then I still do not know how to create the link from the small image to the large image. Is there a way to bypass the Sphinx generator and just give the HTML that I want?
There are two ways you can do it.
The first is to just insert a bit of "raw" HTML:
.. raw:: html
<a href=....><img src=....
The second is to make the image clickable. That way you can link it to a bigger image:
.. image:: _static/my_image_small.png
:target: _static/my_image_large.png
There are more options you can give, btw. See the full list in the restructured text documentation.