Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jamie Winspear
4,321 PointsSourcing an Image
I'm new to the site, and I'm not sure if this will be posted to a forum, and if so, whether the question will have already been asked, so I apologise if so.
With the demo, Smells Like Bacon, obviously the images that are being sourced are stored locally, and cannot be accessed on my own mirror site that I am creating as I go along. I'd like to source my own images, but I am not sure how "deep" down folder paths I have to source the image. (Eg: C://, documents, etc). Assuming I want to source an image found in the My Documents folder in User "Jamie", what would I have to type? In case it wasn't apparent, I am on a Windows PC.
6 Answers
Luis M Ruiz
6,877 PointsHello Jamie,
It is common practice to place the images in a folder within your project's main folder, some people use "images" other use "img". As well as a folder for css, js, fonts, and so forth. The path from your website folder to your documents can get tricky, I am sure if you type the full path ie: <img src="C:/Users/Public/Pictures/Sample Pictures/Chrysanthemum.jpg" alt="" /> the image will appear but again is not common practice.
A quick alternative for quick mockups is http://placehold.it/ by simply typing <img src="http://placehold.it/350x150"> it will serve a 350x150px placeholder image into your design, if you change the numbers the image size changes accordingly.
I hope this helps.
Luis
Jamie Winspear
4,321 PointsThat placehold resource is perfect, thank you! I guess my followup question is to ask what IS common practice then. I have now made a "Smells Like Bacon" folder on my dashboard, and an "img" folder within it. Were I to use the images within it, would I need to source the full path? If this is too complex for my level (absolute beginner) I am happy to accept a "You'll learn later"
Jason Anello
Courses Plus Student 94,610 PointsHi Jamie,
You can use a relative path to your images. This is the path to the images from where your html file is.
Inside your "Smells Like Bacon" folder, you could have your index.html file as well as your "img" folder. Let's say you have a logo.png image inside your "img" folder and you would like to display that on your index page.
The relative path to the logo would be "img/logo.png".
So you reference the sub-folder that it is in and then the file name.
Luis M Ruiz
6,877 PointsNot a problem at all, happy to help.
If your folder structure looks like this:
'''-----------------
[css] - style.css
[img] - image1.jpg
index.html
contact.html
blabla.html
----------------------'''
Then the path to the images is img/image1.jpg ie: <img src="img/image1.jpg" alt="" />
Let me know if that helps.
Luis
Jamie Winspear
4,321 Points I have got the images working, so thanks for that, but now I am having problems incorporating the css. My steps have been as follows:
- Copy and paste the normalise.css code from web browser into a new notepad++ file. (obtained from gifhub)
- Place .css file into folder "css" within smells like bacon folder.
- Attempt to link with following code .(<)link rel="stylesheet" href="C:/Users/Jamie/Desktop/Smells%20Like%20Bacon/css/normalise.css" type="text/css" media="screen"(>) The brackets are because the code isnt showing if i leave the code bare.
I obtained the path directory by dragging the .css file into a web browser, to obtain file:///C:/Users/Jamie/Desktop/Smells%20Like%20Bacon/css/normalise.css. I have tried directly copying this link, and removing file:///, as in the above example.
When I refresh the page as in the video, nothing appears to change. I am not sure if this is because I am sourcing incorrectly, or because my steps to obtain the .css file were incorrect (I improvised them).
I'd make a new question, but I think this still comes under "Sourcing". Thanks for your help!
Jason Anello
Courses Plus Student 94,610 PointsYou would want to use the relative path again like you would for the images.
Try
<link rel="stylesheet" href="css/normalise.css" type="text/css" media="screen">
Try to think about how you would get to the file from where your html file is.
Jamie Winspear
4,321 PointsThanks to the both of you! I realised that in between trying to sort out my css referencing code, I had moved my index file, and had not reopened it in firefox. This meant that as I refreshed the page, nothing happened, so I assumed I was doing something wrong. On reopening the index page in firefox, the CSS changes had been made, problem solved.
Thanks again, I think I thoroughly understand basic sourcing now
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
Are you still using that full path though or did you switch to the relative path?
As Luis mentioned, the full path might work but it's not common. It's only going to work on your computer and you can't move the files. If you were to move all your website files to another folder then your paths will no longer be correct and you would have to change all of them.
Also, if this was going to be uploaded to a web host then it wouldn't work anymore either. You would have to change all your paths.
Using relative paths eliminates those problems.
Luis M Ruiz
6,877 PointsMake sure you drop (by copy and paste) the images you will be using into your img folder. You can use windows explorer for this.
Jamie Winspear
4,321 PointsI am now using relative paths, with no problems
Luis M Ruiz
6,877 PointsGreat, keep going. It is very rewarding.