Download and Load Local Images
This assignment describes how to work with images that you have stored directly on your website.
We have been linking to images stored on remote sites such as the Wikimedia Commons. Quite often, however, the files you want to display will not be remote, but instead will be stored directly on your website.
Most of the files we use are stored directly on our website. For instance, our index.html and styles.css are local files stored directly on our website. Example of remote files would be the images on the Wikimedia Commons that we link to in our img elements
Let's take a moment to review how we get local files to our website. When working with GitHub pages, we place files on our local website by following these steps:
- We copy the file to our local repository or we create the file directly inside our repository.
- We push the repository to the cloud. That is, we push it to GitHub.
- GitHub then makes the file part of our GitHub pages website.
Why we Store Files Locally
Here are a few examples of times when you might want to store images locally on your own site:
- If you took the picture yourself, and copied it directly from your camera or hard drive to your repository.
- If you are concerned that a remote picture might take a long time to load.
- If you find an image on the web that you cannot link to directly for one reason or another. For instance, some sites ask you to download their pictures rather than having you link to them directly. This saves the site money, as they don't have to pay for hosting your image.
- If you find an image on the web that you can modify. In that case, you need to download it first, modify it, and then store the modified file locally.
Download an Image
Let's step through an example case where you would store a file locally. The site called pixabay asks that you not link directly to their images. Instead, they want you to first, download the image, then store them locally on your website.
To get started, go to a page like this:https://pixabay.com/en/utah-mountain-sky-nature-440520/
Download the image into a subdirectory of your repository called images.
Load the Image
Create a file called download-image.html in the root of your repository. Prep it as you usually would, and link in a CSS file of your choice. This CSS file must must be one that you created by hand. Finally, link to download-image.html from your GitHub pages home page. Your home page is usually called index.html and is located in the root of your repository.
In your new HTML document, load the image you downloaded like this:
<img src="images/utah-440520_640.jpg" alt="mountain sunset">
In the src attribute, we don't just write the name of the jpg file. Instead, we write both the directory where the file is stored and the name of the image file:
We do this because download-images.html is in the root of the site, but the jpg file is in the images directory. Note that this particular image does not require attribution. This fact is spelled out on the pixabay site.
One of the most important subjects in web development involves composing relative paths. This is an absolute path:
<img src="http://www.elvenware.com/foo.png" alt="foo">
Paths like this can be linked from anywhere in the web. But suppose you are trying to link to a document on your own web site. In those casees, you don't need to include the name of your website because you are already on your website. Instead, you can just enter the name of the file you want to link to. Sometimes you need to include directory information, as we did in the previous section where our file was stored in the images directory. That was an example of a relative path, but it was a simple example.
The trouble comes when you are in a subdirectory of your website and want to link to a document that is closer to the root of your site, or that is in a directory that is closer to the root. Consider the case where you want to add a link from a file in your theme directory to an image in your images directory.
In that case, the load statement to the a file in the images directory would involve a relative path:
<img src="../images/utah-440520_640.jpg" alt="utah mountains">
The funky looking ../images syntax means that you are navigating back one directory closer to the root and then navigating into the images directory.
Suppose you were in a directory called theme/mountains.
Then you would do this:
<img src="../../images/utah-440520_640.jpg" alt="utah mountains">
In this case you move back two directories before navigating into the images directory.
Turn it in
Check that you do the following:
- Store two images in the images directory. One is the mountain image referenced above, the second is a file that fits in with your theme site.
- Display both images in download-images.html. This HTML file should be in the root of your repository.
- Display one of the local images in the index.html file from your theme directory.
- Provide a link to your download-image.html file on GitHub pages.
NOTE: In the midterm, I'm going to ask that you link to files that are stored on remote sites, and stored locally. So this will be a chance to ensure that the home page of your theme directory links to files of both types. In other words, this is both a stand alone assignment and a step toward your midterm.
In declaring an image, it is usually a good idea to specify the width and height either in the tag itself, or in CSS. Note that if you define the width and height in the tag, and then want to define it in the CSS, I would carefully check how it turns out, and if you need to remove the tags from the img attribute or override both in the CSS.