Creating masonry galleries and showcasing your work in these layouts can play a significant role in attracting the attention of your target audience – masonry layouts bear strong visual appeal and stand out from the rest of the template variations.
In this article, we’ll guide you through creating a portfolio masonry list with fixed proportions, as well as image galleries.
We’ll also cover Tour Galleries as well (these can be found in our travel themes), as the same principle applies when it comes to their creation process.
Let’s start by adding a portfolio list element on a new page.
Depending on the theme, multiple types of portfolio list elements may be available, but we will use the most common one in our example - the Portfolio List element.
Portfolio List has a lot of options to choose from, which may include some theme-specific ones.
The Portfolio List elements have a large set of options to choose from, and this may also include some theme-specific ones.
By adding the Portfolio List element to your page, a set of predefined options is being selected. We will change some, i.e. select the Masonry type, enable Fixed Image Proportions and set a number of portfolios we wish to display.
Our example features 7 portfolio items, but any number of portfolios that exist can be inserted; you can also input -1 here if you wish to show all the portfolio items.
Before we proceed, let’s us briefly go through some options which are commonly used when creating portfolio lists.
If you want to showcase only a few selected items, try using either of the following options:
⋅ A － One-Category Portfolio List
⋅ B － One-Tag Portfolio List
The options are self-explanatory; by adding a portfolio category or a tag, only the portfolios within that category or tag will be shown.
The list of available categories and tags is found in the top left corner in Theme_name Portfolio section.
Theme name naturally depends on the theme you are using - we used the Quart theme for this example, therefore the section is called Quart Portfolio.
⋅ C － You can also use the Order By option, to select a hierarchy by which the portfolios are shown.
Also, you can further adjust this by selecting ASC or DESC order.
⋅ D － This a good solution if you want to show a selected few portfolios only.
Here’s how you can obtain the portfolio ID for a specific portfolio item:
Now back to the main topic of this article.
If we were to publish the page at this stage, it is most likely that the images would be all equally shaped small squares, or we’d get a layout which in some other way isn’t exactly what we had hoped for.
To create a layout this article focuses on, a specific proportion needs to be selected for individual portfolio items.
Here are the steps that need to be taken for every separate portfolio item displayed in that list:
Step 1 － Click on the portfolio showing in that list.
Step 2 － Click to edit that item.
These first two steps can also be done inside your dashboard; you should locate the portfolio item in Theme_name Portfolio section and click Edit.
Step 3 － Navigate to Theme_name Portfolio Settings section found bellow the portfolio content and choose a dimension type from the dropdown next to Dimensions for Masonry – Image Fixed Proportion.
The options are as follows: Default, Small, Large Width, Large Height and Large Width / Height.
Default and Small options set the image size to a small square, which is used as a base unit of measure (a 1x1 square).
Large Width sets the image size to a rectangle, whose width is twice the size of its height, i.e. 2x1 rectangle.
Large Height sets the image size to a rectangle, whose height is twice the size of its width, i.e. 1x2 rectangle.
Large Width/Height sets the image size to a bigger 2x2 square.
Please take a look at this example, for clarification.
Therefore, in order to replicate the example shown here, 4 images need to set to small, and the next 3 to Large Width, Large Height and Large Width/Height for each portfolio item respectively.
Please upload images which fit their own proportion/dimension type, i.e. portrait images for the Large Height type, landscape for Large Width and squared for the remaining types.
Not following these instructions would most likely result in blurry images.
⋅ Upload images which are close to the actual image display sizes for the best image display.
⋅ The difference between Default and Small is that a Small image is rescaled and cropped to be a 1x1 square, will the Default type only rescales the image dimensions.
Example: Setting to Default will rescale the image to 347x162:
And setting it to Small will result in an image size of 347x347.
Depending on the theme, names and options available may vary, but the same rules apply.
A similar effect can be achieved with the Image Gallery element when using the Masonry type, as shown below:
Finally, much like in the case of Portfolio Masonry List, individual predefined image sizes need to be set for every image separately. Click on each separate image that was selected (bottom left corner) and set an Image Size (bottom right corner).
End result:
The same set of rules applies for Tour Galleries (available in our travel themes), which is why we mention them here as well.
The end result:
