3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

About folders and linking to folders..

by Intrepreneur
2 replies
  • WEB DESIGN
    • |
Ok I've just posted another thread but it doesnt suit this question its about folders and linking to the folders from within my HTML.

Basically i've just used a direcotry called "templates"

In there is index.html

Each time an image is called it is linking to src="images/image1.jpg""

My images folder is also in the same directory "templates"

I'm obvioulsy missing an understanding of exactly where the images folder should go inorder for this to work..

I've found that moving the images folder to root directory enables me it to work under that it is src=images/image.jpg

Waht about if I wanted to keep the images folder in the "templates" directory would this mean for it to work, I would have to change all of my code to /public_html/templates/images/image1.jpg

Or is there a faster way?

Thanks.
#folders #linking
  • Profile picture of the author Aronya
    Originally Posted by Intrepreneur View Post

    Waht about if I wanted to keep the images folder in the "templates" directory would this mean for it to work, I would have to change all of my code to /public_html/templates/images/image1.jpg
    Basically, the answer is Yes, but you wouldn't use the 'public-html' part. Move your images folder out of your templates folder. Your life will be easier.
    {{ DiscussionBoard.errors[804892].message }}
  • Profile picture of the author ziffgone
    Understanding URL linking from within a web site

    Absolute URLs:

    An Absolute URL is one that uses the complete HTTP URL location in the link.
    http://www.yoursite.com/images/image1.jpg
    That's easy enough, but we don't always need to use absolute URLs when linking to files/folders in our own site, so we use Relative URLs.

    Relative URLs:
    "/" = is the Relative variation of your "public_html" folder. It is the equivalent of using the absolute URL: "http://www.yoursite.com/".
    So, if your "images" folder is in your "public_html" folder you can link to it anywhere in your site by adding a relative forward slash, "/", to the beginning of the link:
    "/images/image1.jpg" = This will link to the image1.jpg in your images folder from any other folder in your site.
    So if your "templates" folder is also in your "public_html" folder along side your "images" folder you can link to the images folder by using:
    "/" - Start in the public_html folder + "images/" - look in your "images" folder + "image1.jpg" - use the "images1.jpg" file. Altogether:
    <img src="/images/images1.jpg" style="width:[XX]px;height:[XX]px;" alt="keyword text" />

    More Advanced Relative Linking

    For example let's say you've created a sub directory for this site and all the files/folders, including your "images" and "template" folders are in a folder named "sitename".

    If you use the above techniques, you'd have to use either of these two:

    Absolute: "http://www.yoursite.com/sitename/images/image1.jpg"
    Relative: "/sitename/images/image1.jpg"

    But there is another way so you don't need to include the "sitename" folder in all your links. You can use the following:
    "../" = Start in the folder immediately below this folder.
    So you can now link to your images folder from your templates folder like this:
    "../images/images1.jpg"
    This now tells the browser to start in the folder immediately below the "templates" folder, which would be the "sitename" folder. So the browser looks in the "sitename" folder for the "images" folder and once found uses the "image1.jpg" file from the "images" folder. This technique would also work in the previous example where both folders are in your "public_html" folder.

    Just for reference, if you need to traverse down more folders you can compile the "../" reference to any number of folders you need to go below.
    "../../" = Two folders down, etc. You see how it works.
    So that's about it in a nutshell, hope it makes sense. Any questions, just ask.

    Regards,
    Perry.
    {{ DiscussionBoard.errors[805134].message }}

Trending Topics