CS403 - How To Save Image Files

CS403 Sections 01, 03, and 04

How To Save Image Files Using Email

The following instructions will guide you in saving an image off the Web and saving it in a sub-directory of your public_html directory called IMAGES. If you already created an IMAGES sub-directory to hold your picture files you can skip step 6. If you are not saving an image off the Web but, rather, one that you created using a digital camera etc., start with step 4. Just remember to crop or resize the image before you mail it to yourself in step 4.

Locate the image you want to save on the Web and right-click while mousing over the image.
Select "Save Picture As..."
A dialog box will pop open allowing you to specify where you want to save the image locally (it will probably default to "My Pictures") - click the save option. If you want to name it something else before you click save, this would be a good time to do that. DO NOT USE ANY SPACES IN THE FILE NAME!
Mail the image file to yourself as an attachment. You can use whatever your default mail program is or you can use Webmail. Just make sure you mail it to your UNH account - you will want to retrieve the email using Pine.
Log in to CIS Unix.
If you have not set up a sub-directory within public_html called IMAGES yet, do that now by executing these Unix commands:
%cd %cd public_html %mkdir IMAGES %chmod 755 IMAGES updated 09/23/09: changed 711 to 755
Start Pine by either selecting Option 1 off the CIS Unix menu *or* typing pine at the shell prompt like this:
%pine
Go to the Main Menu in Pine (this is where you automatically start except if it is your first time using Pine; in that case you will see a one-time-only greeting - just follow the directions at the bottom of the screen to exit the greeting and get to the Main Menu).
Scroll up and select "MESSAGE INDEX" - scroll up using the up-arrow key and then hit enter to make your selection. Remember: Pine is keyboard-driven so the mouse will not work!
Now you should see the contents of your INBOX - scroll down and locate the email that you just sent yourself with the image file attached. Select it by pressing enter.
Once the email is displayed, scroll to the bottom of your message (you may not need to scroll in order to view it). Follow the directions at the bottom: press v to view or save the attachment.
Now you should see a couple of entries (more if you sent more than one image attached to this email) with one of the entries high-lighted. Make sure that the high-lighted entry is the image that you want to save (it will say Image to the right of the file size; you can use the up and down arrow keys to select other attachments if you sent more than one). Press the letter s (to save it).
Assume for the sake of this discussion that the image file you just sent yourself is called myfile.jpg. You will now see the following message:
```
	SAVE: Copy attachment to file in home directory: myfile.jpg 
```
Hitting the return key at this point will save the image file in your home directory which is NOT where you want it. You need to direct it where to save the image file so precede the filename with the path to where you want it to be saved. Back the cursor up using the left arrow key and precede the file name with public_html/IMAGES/ It should look like this:
```
	SAVE: Copy attachment to file in home directory: public_html/IMAGES/myfile.jpg
```
The message that Pine responds with will look something like this:
```
	[Part 2, 6.2KB written to "/home/cs/youruserid/public_html/IMAGES/myfile.jpg"]
```
This means that it worked! The size of your file will probably be different as well as the path to your home directory and filename.
Exit pine by pressing q (for quit).
Pine will respond with: Really quit Pine?
Type a y (for yes). Then it will ask if you want to save your read messages in "saved-messages" - just press n for no (that just means that they stay in your INBOX). It may also ask if you want to expunge your deleted messages - just press n.
Now you are back to the shell prompt. You need to change permissions on the the file you just saved to make it readable. Execute the following Unix commands at the shell prompt:
%cd %cd public_html %cd IMAGES %chmod og+r myfile.jpg OR %chmod 644 myfile.jpg (don't forget to use whatever you named the file in place of the generic "myfile.jpg" above.)
Try to view your image using the browser; type in the url for the image:
```
	http://pubpages.unh.edu/~youruserid/IMAGES/myfile.jpg
```
When it displays you can mouse over it, right-click, and select Properties to find the height and width to use in your image tag.
Now you can use the image on your Web page. If the page that you are adding the image to is located in your public_html directory, the following tag will work:
```
	
	<img src = "IMAGES/myfile.jpg"
		alt= "Description of the picture"
		height = "yy"
		width = "xx" />
```
Note that you need to replace myfile.jpg with the actual name of your image file, xx with the height in pixels of the image, and yy with the width in pixels of the image.