R27: How to Change Columns and Image Sizes in the Filterable Portfolio

In Recipe #27 I am going to show you how to replicate the Library layout I made for my Ventura Child Theme using the filterable portfolio module.

One thing I hear lots of people complaining about with Divi is that as far as the default builder goes, it’s limited to 4 columns, in this recipe I will show you how to have as many columns as you like AND how to change the default image size so you can truly have the layout you want.

As the filterable portfolio relies on projects and is actually very simple to set up, I haven’t included a .json layout with this recipe, but what I have included is something a little better (at least in my opinion). A handy Excel Spreadsheet calculator to help you adjust the CSS for both the columns and the filter buttons so no matter the amount of content, your portfolio is going to look great.

Watch the video, get the code you need in the accompanying blog post and be sure to let me know what you think in the comments!

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes.

Some projects already set up with featured images (any dimensions but make them all the same)

An active child theme, we are going to be adding a little code into functions.php

Cooking time

This should take you around 20 minutes max.

Preparation

First let’s set up our portfolio module. On your page, add a new standard section with a single column and add a filterable portfolio module..

Method

Next, open up the row settings and set fullwidth to yes. Then save & exit. You don’t have to do this but if you are going to use more than 4 columns you’ll probably want to utilise the extra space fullwidth gives you.

Now open up the filterable portfolio module and in the general settings set the layout to grid, the posts number to whatever you want, and include the categories you want to use. The categories are what create your filter buttons, plus you get a button for all categories.

Switch off show title and show categories, pagination is up to you.

Next click on the Custom CSS tab and give the module a custom class of ds-library-grid

Now for the CSS. For this recipe I have included the code for 5 columns but later in the post I will show you how to easily modify it for any number of columns and filters. There are full comments in the complete CSS below but here is an overview of what each bit is doing:

The first part is where we define our columns and margin for the portfolio, we are setting the column width and margins using percentages so we always get a nice even layout.

/*Set number of columns and margin for the images*/
@media (min-width: 981px) {
    .et_pb_gutters3 .et_pb_column_4_4 .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item,
    .et_pb_gutters3 .et_pb_column_4_4 .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_item.active,
    .ds-library-grid.et_pb_portfolio_grid .et_pb_portfolio_item,
    .et_pb_column_4_4 .ds-library-grid.et_pb_grid_item:nth-child(4n) /*Change this number to value 4 in the calculator (don't remove the 'n')*/ {
        width: 15.6% !important; /*Change this number to value 3 in the calculator (don't remove the '%') */
        margin: 0 5.5% 5.5% 0; /*Change these numbers to values 1 & 2 in the calculator (don't remove the '%' or '0')*/
    }
}

Next we are defining the columns and margin for the filter buttons, then making sure that the last button in the row doesn’t have any margin on the right. We don’t need to do that with the columns as Divi does it for us already.

/*Set number of columns and margin for the category filters*/
.ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
    float: left;
    margin: 0 2% 2% 0; /*Change these numbers to values 5 & 6 in the calculator (don't remove the '%' or '0')*/
    text-align: center;
    width: 15%; /*Change this number to value 7 in the calculator (don't remove the '%' )*/
}

.ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li:nth-child(6n) { /*Change this number to value 8 in the calculator (don't remove the 'n' )*/
    margin-right: 0;
}

Here are our media queries for the filter buttons, we are just adjusting how many buttons are in each row on smaller screens. I wouldn’t suggest changing anything here or your buttons may end up being too small but that’s up to you. We don’t need any media queries for the columns, Divi does a pretty good job of dealing with that for us.

/*This sets the width of the filter buttons on smaller screens, you really want to leave these as they are or your buttons will be too small*/
@media only screen and (max-width: 1280px) {
    .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
        margin: 0 2% 2% 0;
        width: 32%;
    }
    .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li:nth-child(3n+3) {
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
        margin: 0 2% 2% 0 !important;
        width: 49%;
    }
    .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li:nth-child(2n) {
        margin-right: 0 !important;
    }
}

@media only screen and (max-width: 479px) {
    .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
        margin-right: 0;
        width: 100%;
        margin-bottom: 10px;
    }
    .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters {
        margin: -30px 0 40px !important;
    }
}

And finally this last little snippet just ensures that our images show on tablets and mobile.

/*Ensures portfolio images display on mobile and tablets, you don't need to touch this*/
@media only screen and ( max-width: 980px) {
    .ds-library-grid .et_portfolio_image img {
        width: 100%;
    }
}

Here is all of the CSS with full comments. Copy and paste this into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box and be sure to save.

So now you should have a nice 5 column filterable portfolio (we will get to your filter buttons in just a bit). But what about the images? Depending on the dimensions you have used, you may be getting some cropping, let’s fix that!

Add the following code to function.php in your child theme and be sure to save.

/* Change portfolio image thumbnail size in library page */
function ds_portfolio_thumbnail_width( $width ) {
	return auto; //portfolio thumbnail width
}
add_filter( 'et_pb_portfolio_image_width', 'ds_portfolio_thumbnail_width');
function ds_portfolio_thumbnail_height( $height ) {
	return auto; //portfolio thumbnail height
}
add_filter( 'et_pb_portfolio_image_height', 'ds_portfolio_thumbnail_height');

What we are doing here is changing the default height and width values Divi uses for the portfolio images to ‘auto’, this will ensure your images display in the aspect ratio you have saved them at, but will scale them to fit your column layout. Now take a look at your page, cool huh? 

Now for the fun part I have created an Excel Spreadsheet calculator for you to use to customise your columns and filter buttons. If you don’t have 5 categories as I have used in my demo, then you won’t have 6 buttons so you’ll have some extra space to the right of your filters. The calculator will help you fix that.

Here is how to use it…

The first row of numbers is for your columns and the second is for your filter buttons. The green fields are where you add your value.

Columns

In the first green field of the first row of numbers, enter how many columns you want for your filterable portfolio, in the second green field, enter the margin you want between your columns. Fields 3, 4 & 5 in that row will automatically adjust based on your settings.

Filters

In the first green field of the second row of number, enter how many columns you want for your filter buttons. This number should be your total number of categories, plus 1. So if you have 5 categories, enter the number 6 as we automatically get an extra button for ‘all categories’.

In the second green field, enter the margin you want between your buttons. Fields 3, 4 & 5 in that row will automatically adjust based on your settings.

For both the columns and the filters, the third field is the margin between rows, which I have set to default to the same as the margin you set in the second green fields, this means your spacing between your columns and rows will always be even (I can be a bit obsessive about spacing ).

Now lets apply your settings to the CSS.

In the section of CSS below you will see comments beside 3 values you need to change. These are your column settings, the first row of numbers in the calculator.

The first is the nth-child value, change the 4 in (4n) to the number shown in the Value 4 field in the calculator.
Then change the 15.6 width value to the number shown in the Value 3 field.
Finally change the two 5.5 margin values to the numbers shown in the Value 1 & 2 fields (these will be the same).

/*Set number of columns and margin for the images*/
@media (min-width: 981px) {
    .et_pb_gutters3 .et_pb_column_4_4 .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item,
    .et_pb_gutters3 .et_pb_column_4_4 .ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_item.active,
    .ds-library-grid.et_pb_portfolio_grid .et_pb_portfolio_item,
    .et_pb_column_4_4 .ds-library-grid.et_pb_grid_item:nth-child(4n) /*Change this number to value 4 in the calculator (don't remove the 'n')*/ {
        width: 15.6% !important; /*Change this number to value 3 in the calculator (don't remove the '%') */
        margin: 0 5.5% 5.5% 0; /*Change these numbers to values 1 & 2 in the calculator (don't remove the '%' or '0')*/
    }
}

Now for the filters, this is the second row of numbers in the calculator.

Change the two 2 margin values to the numbers shown in the Value 5 & 6 fields in the calculator (these will be the same).
Then change the 15 width value to the number shown in the Value 7 field.
Finally, change the 6 in (6n) to the number shown in the Value 8 field in the calculator.

/*Set number of columns and margin for the category filters*/
.ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
    float: left;
    margin: 0 2% 2% 0; /*Change these numbers to values 5 & 6 in the calculator (don't remove the '%' or '0')*/
    text-align: center;
    width: 15%; /*Change this number to value 7 in the calculator (don't remove the '%' )*/
}

.ds-library-grid.et_pb_filterable_portfolio .et_pb_portfolio_filters li:nth-child(6n) { /*Change this number to value 8 in the calculator (don't remove the 'n' )*/
    margin-right: 0;
}

Copy all your new CSS and paste back in to wherever you are saving it (child theme stylesheet, page specific CSS or theme options CSS) and save.

That’s it, all done! Now if you add or remove a category just use the calculator to work out your new values and change them as shown above.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X