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.

Local Files

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:

Why we Store Files Locally

Here are a few examples of times when you might want to store images locally on your own site:

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:

src="images/utah-440520_640.jpg"

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.

foo

Relative Paths

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.

theme/index.html
images/foo.png

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.

theme/mountains/index.html
images/foo.png

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:

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.