Use HTML and CSS to Build a Photo Gallery
In page one of this tutorial, How to Align Images in HTML, I gave you the basic codes for putting graphics on webpages. Now, here's a template to make a multi-image gallery of pictures side-by-side.
This will work on platforms like Wordpress that let you toggle "code" and input HTML directly. Note that many web publishing tools now have photo gallery widgets or other plugins that take care of this task for you, but now and then, we still find ourselves needing to hand-code.
Before We Begin: You Need Images!
Before you go any further in this tutorial, you must have images uploaded (stored) somewhere on the web, and you must be able to provide the address (URL, location) where each image is stored. There are various options for hosting images:
- A blog. If you have a blog, it should have a media or image folder where you can upload those images.
- Photobucket. This is the most common solution.
- TinyPic is another free image host like Photobucket.
If you view your image gallery or library on the site where you've uploaded it, you'll probably see a line that tells you the image's location (the URL) where it is stored on their site. For instance, Photobucket has a box listing the image's "direct" link.
If you can't find a box like that, then right-click (control-click or Ctrl-click) an image and choose "copy image location" or "copy image URL."
Finding the URL of Your Image in Photobucket
HTML / CSS Codes to Tile Images
For every image in the gallery, use the code below, replacing "imageLocation" with the URL of a photo you've uploaded somewhere on the web (in quotation marks).
<img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">
Repeat this chunk of code for each image, without skipping lines or spaces between the chunks. (I repeat: in each instance, you will be replacing "imageLocation" with the URL of the photo you are placing.)
IMPORTANT: After your very last image, add the following code:
<p style="clear: both;">
That means, "Stop tiling left to right. No more floaty images. We're starting on a new line, here." Otherwise, the text below the image gallery might try to crawl up into the space to the right of it. Usually there's not enough room, but it's best to close the gate to make sure.
Explanation of codes:
- img src="blah" is the placeholder for "Stick an image here. The source (location) of it is...". (Your image's URL replaces the word blah.)
- style ="blah" means "And here's how I want it to display on the page." Style is also used for font colors, sizes, and anything to do with layout or appearance. (The line of code I gave you already says how you want the image to be displayed.)
- float means "squeeze the picture as far to the left as it will fit; if there's not enough line, wrap around until there is room." Basically, it makes a graphic behave exactly the way a letter of text does when you type it on a computer screen.
- width specifies the image's width. 30% restricts its width to 30% of the column. If you string a bunch of pictures together with float, and they're each 30% of the available space, they'll wrap around after the third image on each row.
- margin-right is the whitespace to the right of each graphic. Since I don't know how wide your device's screen is, I made the margin 1%. You can play with this number if you need to.
- margin-bottom is the whitespace below each graphic. Because webpages can scroll off the bottom of the page, we can't really specify vertical layout in percentages, so I cheated and specified the vertical space in ems. An em is the width of the letter m. Like percentages, ems grow and shrink depending on screen size, whereas pixels are fixed. Three pixels on a mobile phone take up a lot more screen real estate than three pixels on a large computer monitor.
To Place More Than Three Pictures Side-by-Side
What if you want to tile more than three across? Then it's time to do math. Divide 100% by the number of images you want to tile across. That gives you the width of the image AND its margin-right. Now decide how much of that amount you want to be image, and how much you want to be margin.
It's best to fold in a little extra wiggle room, just to make sure.
- Three images across: 30% + 1% times 3 = 99%.
- Four images across: 23% + 1% times 4 = 96%.
- Five images across: 19% + 0.5% times 5 = 97.5%
Why am I bothering with wiggle room? Because I've found that some idiot browsers act like there's an invisible one-pixel-wide border around images, making images fractionally wider than what we've specified.
Example Side-by-Side Image Gallery
Making the Images Into Clickable Links
Each image can be a clickable link. Sometimes this is useful for menus!
Wrap the following code around each image's code:
<a href="URL"><img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" ></a>
Replace "URL" with the URL of the page you want the image to link to (but keep the quotation marks). (Copy it from the Location bar at the top of your web browser while viewing that page.)
Multiple Image Photo Gallery With Captions
This Is a Little More Tricky.
What if you want each photo in your image gallery to have a caption? Well, oddly enough, in HTML code, we can say, "Treat a paragraph as a box." And then we can tile those boxes side-by-side just like we did the images in the examples above.
Inside each box can be an image plus a caption.
So, for each image and its caption, use the following chunk of code:
<p style="float: left; font-size: 9pt; text-align: center; width: 30%; margin-right: 1%; margin-bottom: 0.5em;"><img src="imageLocation" style="width: 100%">Caption</p>
Replace the imageLocation with the URL of the image, and the Caption with any text you want. If the text is too long to fit on one line, it'll wrap around.
Repeat that code chunk for each "box" — the image plus its caption— without skipping lines between the chunks.
Finally, to close off the side-by-side image gallery, put this at the end:
<p style="clear: both;">
Again, if you need to have more than three side-by-side images across, then divide 100% by the number of images you want in a row to get the width of the image plus its margin-right, and then allocate most of that amount to the image's width and a little bit to the margin. But again, it's best to give it a little wiggle room (web browsers are often stupid), so maybe start with 99% instead.
And if you want to make something a clickable link, just wrap <a href="URL">[thing]</a> around it. [thing] can be any text in the caption, or it can be an image, in which case [thing] is <img src="....">
Side-by-Side Images With Captions
Further Tweaks and Tips: More Photos, Clickable Links
Again, if you want more than three side-by-side images across, then divide 100% (or maybe 99% to allow wiggle room) by the number of images you want in a row, to calculate the width of the image PLUS its margin-right. Then allocate most of that amount to the image's width and a little bit of it to the image's right-hand margin.
If you want to make something a clickable link, just wrap <a href="URL">[thing]</a>around it. [thing] can be any text in the caption, or it can be an image, in which case [thing] is <img src="...." style="...">
Images of Different Dimensions
How To Make a Gallery of Images of Different Dimensions
You may have noticed that in the rest of the examples on the page, my images are all the same dimensions. That makes it MUCH EASIER to tile them.
Obviously, sometimes you'll have images of all different dimensions, in which case you can't use width. The imperfect solution I've found is to change width to height and then specify height with a fixed number of ems. Like so:
<img src="imageLocation" style="float: left; height: 15em; margin-right: 1%; margin-bottom: 0.5em;">
Repeat that for each image in the gallery, then, as usual, end the gallery with <p style="clear: both;"> to turn off side-by-side tiling.
Ems are proportional to the vertical size of the page, so they'll grow and shrink with screen size. If all your images are the same number of ems tall, they'll be the same height relative to each other.
Unfortunately, I've had trouble making this work with captions.
© 2011 Ellen Brundige
Guestbook—Thanks for Dropping By
Verniece Jackson on May 27, 2018:
She really did her thing with this article. She explained it so well in detail. Other people explain it and it comes across so confusing. I really wish I could find her on social media or through email. Does anyone know how to get in contact with her. I am new to html but I know a little something something. I have been realizing my love for coding. Lol. It's so relaxing and challenging but fun at the same time. Lol. I notice I tend to like things that I have to kind of figure out and create
JaySco on September 14, 2017:
Thank you very much!! This was super helpful!!
Chanel B on August 18, 2017:
Awesome in depth explanation. This helped me edited my WordPress account. THANK YOU!
Muhammad Jahangir on June 08, 2017:
Thank you so much for your valuable info, it really helped me alot
Bharat on February 01, 2017:
Very good explanation.
Thank you very much.
Sanjith on December 30, 2016:
ahappyperson on November 14, 2016:
thank you sooo much, this is the only website that actually explains how to do this- you just saved me from failing my assessment. My pictures won't work though- I've tried almost everything-moving them to the same folder, writing the path,trying different pictures, etc. One picture worked then it just stopped again. Please help!
jodi seymour on November 07, 2016:
My pictures keeping coming out of the bottom of my text box on tumblr. Is there any way that you would be able to help with that?
Zoe on November 03, 2016:
So, so helpful!!! Thank you :-)
jennefer23stough on September 08, 2016:
Informative post - I loved the info ! Does anyone know if my company can get access to a fillable DoL LM-3 example to use ?
firstname.lastname@example.org on September 08, 2016:
Informative post - I loved the info ! Does anyone know if my company can get access to a fillable DoL LM-3 example to use ?
Stuart Coltman on September 08, 2016:
Thanks, been searching for ever to find a decent explanation.
HannahThistle on June 12, 2016:
Thanks very much for the invaluable help. Can you suggest a way to centre a pair of side by side images?
Telxperts from Australia on June 09, 2016:
Thank you. This really work for me.
David Firester from New Jersey on June 07, 2016:
Thank you! This is very helpful!
Calvin from UK on June 05, 2016:
The detailing which you have mentioned related to code and other HTML domain is very much informative. This will help me in many manners while updating my blogs.
Keep sharing in detailing stuff. Worth reading..
Laura on March 31, 2016:
Thanks! This was super helpful!
Ryan from Liverpool on March 23, 2016:
Just stumbled across this article and I must say - a very good read! Informative and Comprehensive explanation - well done!
Rodney from Canada on February 24, 2016:
Very useful information. Great job!
Kristen on December 21, 2015:
This was easy to follow & helped SO much! Thank you!
wafaa on December 07, 2015:
Thank you .. it helped me .. it worked perfectly!! Really thanks
tramanh404 on November 21, 2015:
thank you. lucky when I found it, here's what I'm looking for
JT on August 22, 2015:
This is exactly what I was looking for. Very clear and very simple read for what is a difficult task for newbies. Well done!!
Aabharan Shastri on August 11, 2015:
I think I needed this guide the most. I’m being diverted by html5 app development the most, Neither making much out of It. Thanks for this comprehensive guide. It opened up my eyes. I have habit of using html5 development in the sporadic intervals. Hence I end up wasting a lot of my time. I feel like the guide is written for me only. Thanks allot for such a great write-up!
Gary Johnson on July 17, 2015:
Thank you very much, this has been very helpful.
Nira on February 03, 2015:
Thanks a lot for the very detailed and simple explanation. Since I don´t have any experience with coding but needed to make some adjustments to my page that was very helpful ... and I learned something. ;)
Fiorenza from UK on September 22, 2014:
Glad I found this one; I will bookmark for future reference.
Soraya on September 09, 2014:
Thank you so much for your help, your precious advice has saved me a lot of time and energy. Great tutorial! :)
carlwherman on May 07, 2014:
A newby; going to give it a shot; wish me luck!
luisding on February 15, 2014:
2 thumbs up for this tutorial :)
susan369 on January 22, 2014:
I was looking for this information yesterday and couldn't find it. Today, I just stumbles upon it through an unrelated search via Google. Go figure! Thanks so much - this is invaluable! I was tearing my out trying to place images next to each other in one of my lenses. In the end, I went with a different solution. I'll keep your lens bookmarked for future projects!
Javed Ur Rehman from Karachi, Pakistan on November 11, 2013:
This tutorial is very nice, i love to read about web development.
anonymous on September 11, 2013:
I do not say this often but ...OMG!!!! Thank you so much :-) you will never know how much of a time saver you are. I have been searching the web for days...and blessings I found you today:-) simply ingenuous TY GG
ctrain on August 29, 2013:
I wouldn't have been able to align my images without your lens!
anonymous on July 11, 2013:
Thank you so much!
Rob Hemphill from Ireland on March 20, 2013:
Your tutorials are always excellent and so useful, thanks for the info.
anonymous on March 10, 2013:
Made my day thanks a lot !
vsajewel on February 28, 2013:
Thanx so much!
pauly99 lm on February 27, 2013:
Recommended for You
Thank you very much for the code. Now I need to put this info into a Squidoo template.
anonymous on February 11, 2013:
Very helpful, thank you :) I was starting to get very frustrated trying to get this to work. ahhhhhh, much better
Ellen Brundige (author) from California on February 08, 2013:
@anonymous: Yes, you can!
That's height: 70px;
with the semicolon to separate it from what's after it. :)
anonymous on February 08, 2013:
nice job, it helped me a lot, just one question how do i set the height of an image, i have a profile that i have other users linked to but their profile pics are not all the same size, can i add something like heigth: 70px after ther width: 180px;
persistance lm on February 07, 2013:
Thanks, I was looking for how to do this Multiple Image Photo Gallery With Captions, and you solved my problem.
Judith Nazarewicz from Victoria, British Columbia, Canada on January 29, 2013:
Really helpful information!
daniel-euergaious on January 29, 2013:
Very helpful indeed!, So helpful, I've bookmarked this! Thanks for this resource!
john-stewartsr on January 29, 2013:
It looks a little intimidating but i sure need it. I'm anxious to try it
OldCowboy on January 29, 2013:
Making images clickable links is just in time for me... thanks.
shawnleeMartin on January 29, 2013:
Thanks for the info!
Deborah Swain from Rome, Italy on January 29, 2013:
excellent work - thanks!
morlandroger on January 29, 2013:
Very useful article, I often struggle to get photos to line up just where I want them. Thanks
DaveP2307 on January 29, 2013:
That is very helpful. Just what I have been searching for. Many thanks!
anitabreeze on January 27, 2013:
I think I love you! Thanks for this lens!
NoelSphinx from Sweden on January 10, 2013:
Thanks a mil.
patriciapeppy on December 16, 2012:
there seems to be some content missing from your lens. Are you planning on replacing it. It sure was useful,this is a great resource
BestBuyGuy from Beekmantown, NY on December 14, 2012:
Excellent tutorial, very useful.
Iudit Gherghiteanu from Ozun on December 14, 2012:
thank you so much updating your lens for us who was not able to fix these templates after the new layout crash. As i guess you updated this great info before you fixed your lenses...
MissionBoundCre on December 03, 2012:
I sooooooo needed this. Thank You!
bztees on December 03, 2012:
Really, really very helpful! Thanks so much!
Short_n_Sweet on November 30, 2012:
I'm thinking of trying these tricks...
Aquamarine18 on November 03, 2012:
Great lens, really helpful information. Thanks for sharing
scottorz on October 31, 2012:
helpful lens, thanks :)
SpiritofChristmas on October 26, 2012:
This is so helpful - a great time-saver. Thanks.
casquid on October 26, 2012:
I came straight to you for this info. Remember seeing you making a suggestion on another lens you wrote. This is helpful for a lens being written today. Thanks B.
Tony Bonura from Tickfaw, Louisiana on October 11, 2012:
Thanks for the valuable tips. I will make use of some of them.
squid2hub on October 03, 2012:
Great lens.. thanks for the tips
GoAceNate LM on October 02, 2012:
Good tips here. I love the Squidoo/ html how to lenses. Keep up the good work! Blessed.
anonymous on September 19, 2012:
great helpful lens, gee I wish my brain would take all this in quicker have bookmarked so can keep on trying.
Laraine Sims from Lake Country, B.C. on September 11, 2012:
I've spent a lot of time reading this lens and, "By jove, I think she's got it!" Thank you, this has certainly been an eye-opener for me. 590 was the key I was missing!
crafty23 on September 10, 2012:
These are nice tips! Thank you for helping people like me who are a total noob when it comes to coding:)
Rosyel Sawali from Manila Philippines on August 29, 2012:
Your Squidoo tutorial lenses are such great help! I always find myself referring back to them when I forget something. I'm teaching myself the use of these codes. Good thing I like learning new stuff! Thank you so much ^_^
Sadheeskumar on August 25, 2012:
Very useful information presented in the better way. Thanks.
dahlia369 on August 24, 2012:
Very useful info, thank you!! :)
mouse1996 lm on August 23, 2012:
I love the side by side image look. Great information to tuck away.
anonymous on August 16, 2012:
insert: between 3 groups of the code made 3 rows of 3 images totalling 9 ... it took me hours and hours of trying to come back to this page and see that ! lol next time i wont rush; seem to save time just by stopping and reading lol :P
bluebatik on August 11, 2012:
I saw the side-by-side images on another lens and was getting ready to figure the code out myself but you just save me a lot of time and frustration. Thanks!!
GrimRascal from Overlord's Castle on August 10, 2012:
oooMARSooo LM on July 24, 2012:
Awesome! Thank you so much! :)
Ellen Brundige (author) from California on July 11, 2012:
@delia-delia: Ooch, two columns of text are surprisingly difficult to do. There's no way that I know of to define two column areas and have text flow naturally from the bottom of the left-hand to the top of the right-hand column. (I bet there's a way to do it in HTML 5, but I haven't learned it yet, and anyway I doubt it would work on Squidoo, which allows limited, old HTML only.)
One thing you CAN do is to create two paragraphs, just like the paragraphs that enclose side-by-side images, but write text in them instead of graphics. You'll have to decide how much text should go in each of the side-by-side paragraphs. Write the left-hand paragraph first, starting with
type whatever text is in the left hand column here Type column two here.
The above should work on Squidoo, whose total column width is 590 pixels (290 + a 10 pixel margin + 290). If you're not sure what width you're dealing with, you can try setting both columns to a width of 48% and the margin to 4% (CSS takes widths in pixels, ems or %).
Delia on July 09, 2012:
Great information...I'm looking for a code to make two columns of words...I have looked everywhere and can't seem to find it.
anonymous on June 23, 2012:
I am so glad I found this page! I have been wondering about how to align images side by side, so thank you for this wonderful and clearly-explained tutorial. I think I will post a link to this on my photo-linking lens as well. Thank you again!!!!!!
Lemming LM on June 21, 2012:
This goes great with my lens on how to replace the lost Flickr module!
anonymous on June 18, 2012:
Very Helpful. Your step by step is perfect. Thanks !
Millionairemomma on June 09, 2012:
One word: amazing!
John Dyhouse from UK on June 07, 2012:
Love your tutorials, I somehow missed this one but it is just what I need for a new lens I am planning. -wonderfully clear instructions - blessed
lilblackdress lm on June 05, 2012:
Very helpful. Thanks!
anonymous on June 02, 2012:
Your lenses are the most helpful on HTML codes that I have ever seen. No one that I have come across has explained it so simply, from the basics up- which is what I have been searching for for a while now. Thank you for taking the time to create such helpful and resourceful information!
patriciapeppy on May 28, 2012:
thanks so much for this valuable resource
Linda Pogue from Missouri on May 27, 2012:
Helpful information. Thanks!
Fay Favored from USA on May 26, 2012:
I'm back again because I still can't get this. I'll keep coming back until I do. Thanks again... and again... and again...
Sharon Bellissimo from Toronto, Canada on May 25, 2012:
This is great stuff, thanks!
Spiderlily321 on May 15, 2012:
Great tips and tricks. Thank you for sharing this!
Pam Irie from Land of Aloha on May 13, 2012:
I'm SO EXCITED to read this helpful page. Thank you, Thank you, Thank you! :)
tjustleft on May 10, 2012:
Really good explanations! Aligning images is the reason I started learning the basics of HTML and CSS. My first try at a webpage was with a WYSIWYG editor. With it all I could get was columns of images. That just wasn't going to work so I hit the web to find how to do it myself. After that I ditched wysiwyg and started using a text editor.
magictricksdotcom on May 07, 2012:
Thanks for the tips!
gatornic15 on April 09, 2012:
I've been having some trouble getting side by side images the same size since the source images are different sizes. Hopefully this will help me figure it out.
cmadden on April 05, 2012:
Thank you especially for "clear: left" - I would have made it to bed much earlier some nights if I'd found this lens before now!
JoyfulReviewer on March 31, 2012:
I've been wondering how to do this. Thank you for the helpful and thorough instructions.
xmen88 on March 19, 2012:
Interesting and useful.
StaCslns on March 04, 2012:
Wow, thank you! I am going to try this. I love the way you explain things!
Quirina on February 19, 2012:
Wow, these lenses of yours are SO deserving of a purple star! Thank you for making them.