Photo Gallery

HTML & CSS
1

I have been looking online for tips and tutorials on creating a photo gallery, but haven’t made much progress.

My current client would like to post images of his services and shop on the website.

I’m not sure what dimensions the photos will be, but assume they will have fairly similar dimesnions.

Is there a fairly easy way to use HTML and CSS to create a grid-like structure (e.g. 5x5, 10x10, etc)?

Not exactly sure what I’m asking for, other than an easy way to take a whole bunch of photos and display them in a nice way on a page.

2

A quick search for “php image gallery” or “php free image gallery” returns a ton of records. What exactly out of those results don’t give you what you want?

3 Likes
3

Well, I would like to understand how to build one myself.

First it would be helpful to learn from the SitePoint gods the Do’s and Dont’s of building a gallery.

I read some articles last night talking about mushing all of your photos together, for instance. But that doesn’t seem like what I want.

I’m assuming a simple table/grid layout would be best.

Second, I’m not sure which HTML/CSS tools would suit me best. For instance, do I float the images? Use an HTML Table? Maybe use display: inline-block?

4

Depends on the look you want for the gallery. There are many variations and styles to choose from.

5

Ask the client if the images will be consistent in ratio or size. If they will not, then that may limit your options Not wise to assume.

Does your client expect you to learn from the ground up, or use existing tools to get the job done faster?

The easiest way to make a grid is to use a table (though I may be flamed by CSS purists). It’ll be a good idea to find out how many images he expects to show on a page before thinking of an image gallery. 4? 8? 11? Large? Small? Make a comp and show it before coding it.

6

And correctly so. If you want to do tables but you have non tabular data, you need to use the CSS equivalent: display:table/table-cell. That preserves semantics.

7

After kicking things around today, this much I can say…

Photos in the gallery will come from a digital camera, and so they will either be landscape or portrait in orientation and aspect ratio. I would expect the majority of photos to be landscape, but not always.

What is the best way to present pictures when there can be a random combination of each orientation in a single gallery?

8

There’s a CSS for that.

9

I wanted something similar and have just written the code below prior to your last response regarding differing orientations.

It’s responsive, but I am sure it could be improved on. Maybe dropping the list structure for starters.

Feedback/improvements appreciated.

<!DOCTYPE html>
<html lang='en'>
<head>
<style>
* {
    box-sizing: border-box;
}

body {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 16px; /* 1rem */
}

img {
    display: block;
}

ul {
    list-style: none;
    margin: 0; padding: 0;
}

#gallery {
    width: 100%;
    border: 1px solid black;
}

#gallery li {
    display: inline-block;
    width: 25%;
    padding: 10px;
    margin: -2px; /* fix inline-block whitespace */
}

#gallery li a {
    display: block;
    position: relative;
    max-width: 280px;
    margin: 0px auto;
    text-align: center;
}

#gallery img {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin: 0;
}

#gallery p {
    position: absolute; /* position relative to link */
    bottom: 0;
    margin: 0;
    width: 100%;
    font: 0.9rem/1.8rem arial, sans-serif;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
}

@media only screen and (max-width: 990px) {
    #gallery li {
        width: 33.33%;
    }
}

@media only screen and (max-width: 750px) {
    #gallery li {
        width: 50%;
    }
}

@media only screen and (max-width: 500px) {
    #gallery li {
        width: 100%;
    }
}
</style>
</head>
<body>
    <main role='main'>
        <ul id='gallery'>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 01'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 02'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 03'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 04'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 05'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 06'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 07'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 08'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 09'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 10'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 11'/>
                </a>
            </li>
            <li>
                <a href= '' class='image'>
                    <img src='http://s29.postimg.org/5thr1g8zr/image_280x200.jpg' title='Image 12'/>
                </a>
            </li>
        </ul>
    </main>
<script>
    (function(doc){
        var gallery = doc.getElementById('gallery'),
            galleryLinks = gallery.getElementsByTagName('a'),
            len = galleryLinks.length,
            i = 0,
            image,
            para;

        for ( i; i < len; i += 1 ) {
            para = doc.createElement('p');
            image = galleryLinks[i].getElementsByTagName('img')[0];
            para.textContent = image.title;
            galleryLinks[i].appendChild(para);
        }
    }(window.document));
</script>
</body>
</html>

JSFiddle
http://jsfiddle.net/rlm2008/gs84v71b/

1 Like
10

Since it would be a grid format (tabular), a table would be fine. That’s what a table is for.

11

No - a table is for tabular DATA not a tabular format.

Millions of websites are in a grid format - but htey do it semantically without tables since that’s the correct thing to do. You are advocating a terrible approach and I question it.

12

Can you put a mix of images of different orientations to show us what it would look like? Looks good.

Isn’t max-width: supposed to be after width:100% and not before in a declaration?

13

Doesn’t matter.

14

I learn a lot from CSS purists! :slight_smile:

15

Image if you were at the kitchen table with prints from your latest vacation. There were 12 pictures, and 7 of them were landscape and 5 were portrait. How would you lay them out o the table so they didn’t look awkward?

You could try grouping all landscape pictures together and then place the portrait ones at the end, but that would be a lot of work programmatically for a website, plus if you want pictures displayed chronologically, then that wouldn’t work.

Maybe there just isn’t a way to make such an assortment of photos look “pretty”.

The only idea I have is to create some parent container for each picture, and make it a square (e.g. 180 x 180). The squares would be laid out in an even larger parent container representing your page, and then inside each square you could flip the orientation, say 180x120 or 120x180 and the square wouldn’t care.

So the page would be a grid of maybe 5 squares wide and however many tall, and you could flip the individual pictures any way you want.

Things would layout fine as far as the browser is concerned, but you would still have the issue that I am really asking about which is this weird looking assortment of photos on a page.

Does that makes sense?

16

Yes, I would make a square container to preserve design unity. Easy if using a table :slight_smile:

17

Even easier without a table :smile:

2 Likes
18

@PaulOB,

Since you seem to be one of the many experts here, do you have any comments on my last post?

Where I seem to be most confused with how to make a page with a random combination of landscape and portrait pictures look visually appealing without lots of ugly dead-space. (There probably isn’t a way to completely fix this, but from a technical standpoint my square idea above was the best I could think of.)

19

If not too much quality would be lost, it could be possible to resize them so they all have the same height or same width.

Otherwise the only other alternative I can think of is to crop them.

20

Are you looking to display photos like these?

It won’t 100% keep the chronological order but it’s very close to keeping it.

Off Topic:

It’s so frustrating to not be able to think of the keyword to search. I kept thinking of “modernizer” not “masonry” :wink: . Knew it began with an “m”.