How to Organize Your Photos into a Simple “Gallery”

OK, so you know how to put pictures on your website, but you’re not exactly sure how to organize them? You’re in luck.

After scanning tutorial after boring tutorial and not having any luck, I’ve found a simple way to organize images as thumbnails, include captions and — bonus! — make a clickable full-size option. It just takes a few easy steps in HTML5 and CSS.

So first, drop your photos onto your website. Next, let’s go in and make them appear as thumbnails using the height and width attributes. (An alternate — and much more tedious — way to do this is to go back and resize the images and save the thumbnails under a different name. Using code is much faster!)

Here’s what your HTML syntax should look like for an image:

<a href=”Folder/FileName.jpg”><img src=”Folder/FileName.jpg “height=”150″ width=”200″ alt=”Name”></a>

After you repeat that format for each of your images, you’re ready to make them pretty. (If you stack the code right after itself, it’ll just stack your photos on top of each other. Ours is going to look more organized.)

So let’s make a list of our images using HTML and the <ul> tag, like so:

 

<ul class=”gallery”>
<li><a href=”Folder/FileName.jpg”><img src=”Folder/FileName.jpg “height=”150″ width=”200″ alt=”Name”></a>
<br>Enter description here…</br></li>
<li><a href=”Folder/FileName.jpg”><img src=”Folder/FileName.jpg “height=”150″ width=”200″ alt=”Name”></a>
<br>Enter description here…</br></li>
<li><a href=”Folder/FileName.jpg”><img src=”Folder/FileName.jpg “height=”150″ width=”200″ alt=”Name”></a>
<br>Enter description here…</br></li>
<li><a href=”Photos/005.jpg”><img src=”Photos/005.jpg” height=”150″
width=”200″ alt=”Flower2″></a>
<br>Enter description here…</br></li>
<li><a href=”Folder/FileName.jpg”><img src=”Folder/FileName.jpg “height=”150″ width=”200″ alt=”Name”></a>
<br>Enter description here…</br></li>
</ul>

And that’s it for the HTML! Now to make it pretty with some CSS code. Here’s an example:

.gallery li {
display: inline;
list-style: none;
width: 200px;
background-color:#CCC
min-height: 150px;
float: left;
margin: 0 10px 10px 0;
text-align: center;
}

Of course, you can changes the values of these attributes if you want a different background color, alignment, float or whatever — that’s the fun of CSS! But with this code (the HTML goes in the body of your index document, and the CSS goes right on your external style sheet) you now have an organized photo gallery — congrats!

For the Noobs! ^.^

-Mollie Durkin

Advertisements

~ by molliedurkin on September 17, 2012.

 
%d bloggers like this: