How to Create Masonry Photo Galleries
It’s been quite a while since websites were primarily text. Now multimedia is one of the most important elements of website design. This includes photographs, of course, which are often grouped into albums (such as art portfolios, vacation pics, etc.). In recent years, when creating these albums, the trend has been to use masonry layouts which have abandoned the traditional grid and have moved on to a sort of slight chaos, displayed in creative layouts which combine photos of varying heights. In this article we’ll teach you how to make this kind of photo gallery.
Many people make traditional photo galleries on Webgarden by selecting Gallery from the green + menu in the upper right-hand corner and then uploading their photos into the default matrix. If you do this, your photo gallery will look something like the picture below. For the gallery to look good you need to make sure that the photos in any given row have the same aspect ratio.
Honza's pics from Indonesia.PNG
In this scenario, problems arise when it isn’t possible to fit the photos into neat rows. If you have photos in different formats (one portrait and another landscape or square) gaps will appear between them which don’t look nice, as you can see below.
Honza's pics from Indonesia 2.PNG
Let’s solve this problem using the masonry layout. We can insert the photos vertically into multiple columns placed next to each other. This eliminates the unnecessary gaps and gives the photo gallery a more balanced look. The results can look like this.
Honza's Pics from Alaska 2014.png
It’s easy to create a gallery like the one in the picture above. First, add four columns side by side by selecting Column Layout from the green + dialog box four times in a row, each with a span of 1 and a divide of 1.
Masonry Gallery 1 edited.png
Your screen should look like this.
Masonry Gallery 2 edited.png
Now click on the green + in the first column and select the tab at the top of the dialog box called Upload Files. Browse to find the photos you’d like to insert. You can upload more photos at once by packing them into a zip file. We recommend reducing the size of your photos to 1200 x 800 pixels before uploading, so they will load faster for your visitors. Consider adding a watermark to your photos so people can’t easily steal them from your site.
Masonry Gallery 3 edited.png
Once you’ve selected the photos you’d like to insert, click on Save and wait for the files to upload. It make take a few minutes depending on the speed of your internet connection.
When the photos are displayed, they will be outside the columns you created. You can easily drag and drop to arrange the photos in the columns how you like. The bottoms of the gallery columns may not align perfectly, but the most important thing is that there are no more unsightly gaps between photos of differing heights.
Masonry Gallery 4 edited.png
01/05/2015 02:10:32
Or visit this link or this one