I'm having problems linking to an image from a file in a subdirectory.
File structure is something like this:
..main-theme/parts/shared/header.php
..main-theme/images/logo.png
Within header.php I want to link to the logo.png image
<img src="images/logo.png"/>
I've tried every option I can think of of ../ that would make sense to climb from header.php but cannot work out what I should be doing as they always jump too high up into directories above main-theme
<img src="../../images/logo.png"/>
Edit, since you mentioned that you are using WordPress:
<img src="<?php bloginfo('template_directory'); ?>/images/logo.png"/>
I believe that is the correct way to handle this within WordPress. It has the benefits of using an absolute path, but will automatically adjust when you move the project from localhost to a live domain.
Related
I have the index.html file, where iside I put CSS as inline style. I'd also have inside links to images, not to path to images. Finally, I'd like to have index.html file which will contains evrything inside as one file. How can I make not to get images from computer path but have a links to my images?
Thanks for help!
If I understand you correctly, you are seeking to build one huge file "index.html" which contains all the information needed to display what you want to display.
Think that this is something extremely unusual. Why would you need that? Probably there are better ways to achieve what you want to achieve.
If you really want to go for it, ideas that come to mind are:
* use simple graphics in form of .SVG images, these can be described with the HTML SVG tag
* use compiled HTML (.CHM) (https://en.wikipedia.org/wiki/Microsoft_Compiled_HTML_Help) - but not for the web...
when u want to call image from outside then call like below when you use http in url it will never look for local file path
<img src="http://www.domainname.com/yourimage.png" alt="image">
You can make a folder like images where is your index.html then put your all images in images folder & link your images like this
<img src="images/logo.png" />
This is folder path not from your computer, When you will upload it then this path will be automatically global
or you can use direct link from server like this:
<img src="https://www.example.com/logo.png" />
The best way would be to include all files relationally in a /images folder however if you need a one file solution then you could encode the images in base64 and use that in the src=""
so i'm fairly new to html, so i have always just left everything in the same folder so i don't have to link things but am making a professional website for myself and portfolio. so i want to sort my files properly.
so lets say i have a folder called website, then in that folder i have 3 folders, html, css and images. my html documents are in the html folder what do i do to link images from the images folder in the html document that is in the html folder. pleas note that images isn't a sub folder of html they are both sub folders of website.
any help is helpful (self explanatory i know)
If the html folder and images folder are siblings, the path from a file in the html folder to an asset in the images folder would look like this:
"../images/mypic.jpg"
You can do this in the html page by adding the img tag:
<img src="../images/yourImage.png" alt="" />
But the better method would be to use CSS:
<img alt="" />
img {
background-image: url("../images/yourImage.png");
}
Notice that the "../" is used to go up one level from the current directory of your html page or css file.
You can simply prepend your urls with / which will always reference the root folder of your website.
Assuming yoursite.com loads the folder contents of website, you can link to files in the images directory like this:
/images/image.jpg which will produce http://yoursite.com/images/image.jpg
Example:
<img src="/images/image.jpg" />
There are various ways that the links could work whether from the root:
<a href="http://www.yourdomain.com/images/image.jpg">
Or perhaps once you get a little more experienced with managing your folders, you can set them up a little more dynamic (making them automatically work on live/development transfers):
<a href="images/image.jpg">
Does that help?
PS: The html or public_html folder is typically your root with a host, meaning you don't need to includ this in your paths. Consider whereever your functional index file is the root folder.
U can use .. to go to previous folder.In your case while pointing path for images in html file you can do as metioned below.
If the image is within the same folder then just use:
<img src="image.jpg">
If the image is within a sub folder then just use:
<img src="subfolder/image.jpg">
If the image is within a parent folder then just use:
<img src="../otherfolder/image.jpg">
or if it is just located in the parent folder
<img src="../image.jpg">
This is going to explain it in detail:
http://www.htmlkit.com/minit/pages/imgtag1.html
Really basic question, some advise would be great please.
All of my web images and CSS are of course organised in my root. I then have a catalogue folder, which branches out into 3-4 deeper sub categories. In my HTML its becoming a bit messy sourcing my images/css because I'm using a lot of:
../
<img src="../../../images/myimage.png" style="width:200px; height:auto;">
What do you guys recommend? Do you do this? Or should I sort my images relevant to that file into their sub categories? Thanks, as always.
C:\Users\sam\Desktop\webroot\catalogue\folder1\folder2\folder3
You can use base for this see MDN
The HTML element specifies the base URL to use for all relative URLs contained within a document. There can be only one element in a document.
For example if your folder structure is like yourdomain/images set
<base href="yourdomain"/>
This is the correct method of doing it. Rather than sorting images in relevant folder you can keep it in the separate folder only as you did.
There is a way of minimizing this no of times of ../
Don't assign the src directly in line of the tag.
Always prefer separate css file or javascript file to do that.
You can put all your css files in one folder and you can keep that folder nearer to your images folder.
So that you can use only one ../. it'll look like ../images/yourimage.png
Suppose your html file's location is like
\1\2\3\4\5\6\7\8\sample.html
And your image files are in \1\images\
you can place all the javascript files in a folder which is nearer to the images folder like this \1\scripts\
Now suppose in your sample.html file there were lot of image tags like below
<img height="200" width="200" class="nature"/>
<img height="200" width="200" class="nature"/>
<img height="200" width="200" class="nature"/>
you can just import the javascript file like this
<script src="../../../../../../../../scripts/myscripts.js"></script>
Note: this is the only place you are going to use lengthy ../
In myscripts.js file you can simply use
$(".nature").attr("src","../images/yourimage.png");
Similarly you can do this for the rest of the tags also.
So in that `javascript you need not to use lengthy locations.
You may have 100s of img tags. you can simply import this js file only one time and use it.
This is my first post so please bear with me.
I am working on a WordPress site and came across a problem with my images.
I have a background image in my stylesheet
background-image: "images/dummybg.jpg"
and that works just fine and shows up
When i go to the index file and try
<img src="images/dummybg.jpg">
the image does not show up.
Both the .css and index.php are loose in my folder so their relative paths SHOULD be the same. So my question is, why would one path work and not the other?
WordPress has a function to get to your image directory
So from your index it would be:
<img src="<?php bloginfo('template_url'); ?>/images/dummybg.jpg">
Have you used image in css. it's automatic get image path.
but if you used in any other file in tag you have must need put whole image path in src attribute.
you need to put current theme path in bellow wordpress function you will get.
get_template_directory();
if you need more details please visit
wordpress functions
I am sure it's work for you.
I've finished up my website and I'm trying to clean up the files. I've put all my images in a folder called images and I'm trying to set up the path directory from the root folder but to no avail. As far as I can tell I'm doing nothing wrong?
<img src="images/logo.png">
The root folder contains the html file with logo inside it and another folder called images with logo.png inside it.
Would anybody know what the problem is?
All help really appreciated!
The path is right but if you are using a url rewrite like engine htaccess the paths may be problematic, then you can set an absolute path instead of a relative:
<img src="/images/logo.png">
The issue looks like relative paths, so instead of:
<img src="images/logo.png">
try
<img src="/images/logo.png">
In the suggested approach notice the leading forward slash /
You may find the following useful: http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/