My .html files are all in Assignment1/*.html files
My CSS file is in Assignment1/style/cssfile.css
My images are in Assignment1/images/images.png
How do i call an image from Assignment1/style/cssfile.css to Assignment1/images/images.png file?
I can`t do it like the html files as i could just forward the folders to go through. I am trying to do:
.top {background-image: url("Assignment1/images/deco1400.png");}
from the css file to no avail.
How can I reference my image files from my CSS that are in different directories.
try
background-image: url("../images/deco1400.png");
Your tree structure is like
Assignment1
style
style.css <- you are here
images
img1.png
so either you need to go 1 level up (..) and then enter images OR you need to give absolute path /images/img1.png (note / at the beginning). Both should work, assuming Assignment is your root directory
UPDATE: you might be interested in reading about relative and absolute paths.
Related
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 have a question related to background image url in Compass. I generated a sprite and I have the following path "images/social/facebook.png" but compass generated the sprite in the folder "images" (images/social-s17cf54cdde.png). When I inspect the element in the site I noticed that the background url isn't correct. I need to access one level up (../) so instead of "background-image: url('/images/social-s17cf54cdde.png');" I need "background-image: url('../images/social-s17cf54cdde.png');". How can I do that?
In the scss file I used these code:
#import "social/*.png";
#include all-social-sprites;
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 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