This is some instruction on some of the more advanced features of photos in the blog. This is not advanced coding, just more than you know. This will show you alignment, sizing, etc. Click on links below to help you get started.

Instruction Breakdown

Basic Photo Insertion

Hyperlink a Photo

Sizing a Photo

Image Alignment

Borders for Images

Alternate Text for Images

Basic Photo Insertion

First let’s start with some photographs and the code to insert them.

The first thing that you have to remember is that the photograph has to be online somewhere. What you
are basically doing is “calling” the image over to your website, so you will have to insert the link for where
the image is. This is too easy. There are a couple ways to do this and the easiest is to right click on the image, go to properties and double click the url. Then right click and copy. Now the URL is copied to the clipboard. For all the exercizes that we are going to be working on, I will use this image.

insert url for lawn mower photo

Now you will have to tell the website that you are talking too (in this case our website under the write post feature) that you want to “call” the image. To do this is also relatively easy just use the code <img src="url"> where url is the address of the photo. That is the basic way to add a photo. That will pull the photo to page in line with the text and in it’s original format (i.e. size, alt text, alignment, no hyperlinks etc). TOP

Hyperlink a Photo

Say you have inserted a photo using the <img src="url">string, but it is not enough. You want to make that photograph hyperlink to a larger size of itself, or a page that has only that page on it, or say to an image hosting site such as Flickr or find url for picassaPicassa. you are in luck becasue such a code does exist, and it is not hard to do. We are going to take this photo and hyperlink it to itself on Flickr. Now Flickr has an easy to use “get the code yourself function”. You can learn all about how to use it if you go insert link to multiple photo thinghere. But, just so you know how it is done, this is how you do it.

First use the code we learned to “call” the photo (<img src="url"> then we are going to put the hyperlink code around the “called” imge code. OK so start with <img src="URL"> then add <a href="URL of the photograph or page you want to link to"><img src="URL"></a>. Easy. So the code to bring in the photo of Daddy and Cierra Mowing the Lawn is <img src="URL">, and the code to link it to it’s page on flickr is<a href="URL of the photograph or page you want to link to"><img src="URL"></a>

The end result will look and act like this
TOP

Sizing a Photo

So your image is too large or too small to do what you want it to do. There are a couple of easy attributes that you can add to make your photo the size that you want. If you leave these attributes out, the default size of the photo will take over (that is to say the original size of the photo) unless you have CSS enabled to auto “fix” your size. Our webpage does not have the auto size CSS becuase we put too many photos on the pages, and we like to be able to have more control of the photo sizes. Still this is an easy attribute to learn and add. There are two ways to do this, you can size by pixels, or you can size by percentage.

A quick note before we begin, using the percentage symbol will size the photo to the webpage or the section (i.e. div) that you have the photo in, if you put 50% it will be 50% of the webpage not 50% of the photo size. Flickr and other sites use pixels because that is a fixed size and will not vary with different browser window sizes.

One more quick note. If you know that you only want the photo to be x number of pixels wide, but you want the aspect ratio to stay the same, you can annotate only one (either height or width) and the browser will keep the aspect ratio for you.

Ok, so start with the <img src="URL"> then add a width="" attribute, and a height="" attribute. If you insert a number only into the quotes it will be in pixels, if you want it in percentage insert a number followed by the % key. Yes you can go bigger than 100%. That is it. Too easy. Play with this a little, see what happens when you make a regular sized photo square etc.

Here is Daddy and Cierra mow the lawn at normal size
half size
quarter size
square
long and skinny
short and fat
TOP

Image Alignment

Now that you have your photo looking and acting like you want, let’s align it so it goes where you want.

Alignment Properties
Value	Effect
Top	Aligns the top of the image to the top of the current line of text.
Middle	Aligns the middle of the image to the current line of text.
Bottom	Aligns the bottom of the image to the bottom of the current line of text.
Left	Image is set to the left and text flows around it on the right.
Right	Image is set to the right and text flows around it on the left.

Let’s try that image a few different ways so you can see how it works.

---

Here is some text. insert image align top
Here is some text. insert image align middle
Here is some text. insert image align bottom
Here is some text. insert image align left
Here is some text. insert image align right

---

Obviously, you will be using Left and Right the most frequently. Remember, the image will go wherever you place it in the text, you may have to experiment a little to get things to line up like you want. TOP

Borders for Images

There are a number of different things that you can do as far as placing borders on photos, since this is not a CSS class but an HTML one we will stick with only one. The default is no border, so if you want one you have to specify it. Your borders can be as wide as you like but must be black (if you want to add CSS classes to this we can do all sorts of interesting things with borders, but that is another lesson for another time). Just start with your source code <img src="URL"> and add border="2" where 2 is the number of pixels thick you want your border. <img src="URL"> border="2"

This attribute can also be utilized with the sizing and linking options we discussed earlier. TOP

Alternate Text for Images

In the case that somene for some reason cannot get the photo to load on their page, it is useful to have something in it’s place to let the user know what the picture should be. For that we use alt text. It is easy, just add <alt="something"> anywhere in the code line for the photo.TOP