Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
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.
Full CSS
/*-----------------------------------------------------------------------------*/ /*-----Filterable Portfolio with Custom Columns & Image Sizes by Divi Soup-----*/ /*-----------------------------------------------------------------------------*/ /*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')*/ } } /*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; } /*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; } } /*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%; } } /*--------------------------------------------------------------------*/ /*-----End Filterable Portfolio with Custom Columns & Image Sizes-----*/ /*--------------------------------------------------------------------*/
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
Great stuff. But I do get an error code as follows: Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘ds_portfolio_thumbnail_height’ not found or invalid function name in /var/www/websitename/htdocs/wp-includes/class-wp-hook.php on line 286 When I add the code that you mention to solve the problem above: /* 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’); The images get blurry and have really bad resolution. If I erase this code in… Read more »
Its difficult to say without seeing the full functions.php file and knowing your setup, its works fine for us.
Is this web resource active ?? I asked a question around a month ago but it still says ‘Comment awaiting moderation’
It is, but we get so many comments there is often quite a delay
This is a wonderful tutorial. I was using this on a dev site and it was working fine. I wanted to use 6 columns and it worked great. However, I then installed an updated version of Divi and now no matter what I try the most it will display is 4 columns. The site is working responsibly on iPad and iPhone but will only go to 4 cols on the desktop. I was wondering if you had seen this before and if you had any suggestions on what I might be doing wrong? Thank you!
Unfortunately Divi updates sometimes do this as they change classes and add new ones. Check out our CSS grid recipes as its a much better way of managing columns responsively
Hi, Michelle.
Thank you for this recipe. Do you know if it still valid with new divi versions? I’m trying to achive this but no matter what I’m always getting 4 columns alligned to the left with lot of empty space on the right.
Thanks Tiago
Many Divi changes since this was created. Check out our CSS Grid recipes which provide a much better way of responsive column management.
Hi, firstly very much appreciated all the hard work you put into creating these ‘soups’ My question is as follows, Does this method still work with the latest version of Divi ? As when I apply the soup, the CSS is working but the following happens. If for example I choose to have five columns and display six posts, the web page is rendered with five columns but only the four columns are populated with images, Which then drop to the next row where the next two images are rendered. So instead of having a two rows; one row with… Read more »
There have been many updates which affect this. Check out out CSS Grid recipes, which will make adjust columns much easier.
Hello!
We have been using this tutorial for our website and has been working perfectly. However, when I updated the divi theme, the filterable portfolio now displays 4 columns instead of 6 columns. Do you have a patch to fix this problem?
Thanks!
Julie
Yes many updates have broken this. Please check out CSS Grid recipes for a much better way to manage this.
Hi Michele,
This is amazing. I found this tutorial months ago and it has worked perfectly. Now, all of a sudden the columns now only display 1 less column then I specify.
ie. I want 3 columns, I follow the calculator specifications, 2n, 32%, 2% 2%. but it still displays 2 columns. I’ve tried troubleshooting this but can’t seem to get it right. The only thing I see work is decrease the value 3 percentage. ie 32% to 23%
Here’s my page… https://portal.readytogocopy.com/portfolio-test/
Thanks for any help
Divi updates unfortunately! Try our CSS Grid recipes for a much better way to manage columns
Hello Michelle, thanks so much for this tutorial. It allowed me to create 5 columns for my client! Unfortunately, since the Divi 3.14 update, the columns have gone awry … I’m hoping you can help?! Basically, it is creating 5 columns, however the 5th column in both rows is blank. I am currently working on the website via a host file on my computer, so am unable to send a link to a staging site… I’m hoping you may have some genius to add to my CSS code below (note I removed the category filter CSS as I did not… Read more »
Divi updates unfortunately. Please check out CSS Grid recipes for a better way to manage columns
You’re amazing! Thank you!
Wonderful tutorial yet again!
The only problem I am having is that my images don’t appear on mobile. I have the width for mobile set at 100%, but I can’t get them to show. Do you know what it could be?
If you have this code included:
/*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%;
}
}
Try adding !important
If that does not fix it, I see you have Divi’s minification on, switch that off and clear caches
Hi, i want to know if exist a way to change the image for the thumbnails, Divi choose by default my_image_300x200… i want to use my_image_768x512 i have two columns and the resolution is too poor
You can add this to functions.php in your child theme
/* Change portfolio image thumbnail size in library page */
function ds_portfolio_thumbnail_width( $width ) {
return 768; //portfolio thumbnail width
}
add_filter( ‘et_pb_portfolio_image_width’, ‘ds_portfolio_thumbnail_width’);
function ds_portfolio_thumbnail_height( $height ) {
return 512; //portfolio thumbnail height
}
add_filter( ‘et_pb_portfolio_image_height’, ‘ds_portfolio_thumbnail_height’);
Thank you very much, it was really useful!
Most welcome
Dear Michelle,
I used this recipe before and it worked perfectly. Now I tried everything, but it’s not working. Could you maybe help me?
Sure I can try but will need a live link
Thanks for your response, but I already fixed it! I didn’t work, because I changed the column settings. Now I changed it back and it’s working again.
Hi, Found this video fantastic. I am a visual artist and need to have images to appear scaled proportionally and not cropped. I followed all the steps until it got to the part about adding the code to the child theme for DIVI. I went to appearances and down to editor, but unfortunately, I am no given the option to pick a child theme, I only have the parent theme. How can I fix this? Kind regards, Pat
You need to install a child theme first and you can create a free one here: https://elegantmarketplace.com/child-theme-maker/
and actually you may find this freebie of more use https://divisoup.com/f26-masonry-filterable-portfolio-layout/
Hi Michelle,
I did this and it looks great except when the screen is large than 960px wide, it gets off center, with there being a gap of space on the right side of the portfolio. I tried doing CSS to make align-items center or change the margins, but I must be using the wrong element. Do you know what to do? Thanks!
I would need a live link to take a look at the issue Vanessa
Hi Michelle, I have a problem, i tried to make portfolio according to your instructions but now i see it is no more responsive. What could cause that?
Is there any way to add text when one scroll on the image? (moment when icon is showing up)
Likely cause is an error in your CSS, as you can see from my demo, it is responsive. You can add text using pseudo elements or displaying the title and category in the module settings and then positioning them with CSS and setting them to display on hover.
Hello,
first great blog you helped me so often! Thank you so much.
My newest problem:
I want to remove the margin between the portfolio images on mobile screens. I tried so much, but didn’t get any results.
Hope you can help me…
best wishes
Canay
You can reduce the gutters and column margins/padding in the row settings. Or you can target the bottom margin in your custom CSS with: “.et_pb_column .et_pb_grid_item:nth-child(n)”
Great recipe. do you have the same for the non filterable portfolio? i applied this and it doesn’t seem to work on a non filterable portfolio. Many thanks
You should just be able to change all instances of this class: et_pb_filterable_portfolio to: et_pb_portfolio. You may also want to look at this more recent post for the columns https://divisoup.com/how-to-use-css-grid-with-divis-feed-modules/
Hi Michelle!
I used your recipe and it works perfectly! However, how do I get the images to move into the empty spaces? I have 3 rows of projects displayed, and the rows below the first one are limited in height to the tallest images above it. How do I get the images below to move up into the empty spaces above?
Here’s an example of how I want it to look: http://bumblebee.edge-themes.com/pinterest/
Thanks in advance!
DevGod
Not something I would be able to explain in comments but you can take a look at this post which should give you some pointers https://divisoup.com/how-to-create-a-pinterest-style-blog-layout/
When trying to use this recipe, I find that the images used for the grid are a smaller version of the thumbnail than that which is used by default (300x200px, vs 400x284px – these are people’s portraits). The result is a blurred image in most display sizes, because it will be stretched to fill the space allotted. I am only using the part of the css which pertains to the image itself (not using the filterable grid), plus the php modification. I have rebuilt thumbnails, twice. Any pointers would be highly appreciated.
These thumbnail sizes are set by Divi within the php files so your best option would be to contact ET support as to where to change those.
I’m having an issue with my thumbnail images being blurry and when I inspected the element it looks like they’re automatically being resized to 150x150px and then being stretched to fit the square box. My images are at least 500x500px so there shouldn’t be any reason for them to be blurry. It seems like this is something built into the Divi theme, do you know how to fix this?
These thumbnail sizes are set by Divi within the php files so your best option would be to contact ET support as to where to change those.
Amazing! Truly amazing
Thank you so much. I love the included calculator..super helpful.
Question….I would like to have 3 columns but maintain a certain image size. When I do 3 columns the project image gets very large. I would like to keep an image size to 80px X 80px. Is this possible?
Disregard the last comment. I figured it out. Now I just need to figure out how to center align the image
Thanks again for the great tutorial!
Yes, in the PHP code just set the values to 80 instead of auto
Damn this tutorial was exactly what I needed but sadly I couldnt get it to work! :/
Did the same as you did in the video copied the same css and my collumns stayed 4
You must have made an error somewhere in the code or perhaps a caching issue as you can see its working fine in the demo. If you have a link I can check
Hi Michelle,
I’m sure it must be very similar code, I’d like to do this on the standard portfolio rather than filterable, so I can have 6 columns rather than the default of 4 columns.
Hope you can help
Changing all references in the CSS from et_pb_filterable_portfolio to et_pb_portfolio should do it
Hi Michelle,
do you have an example of this to show it works, since when I tried your suggestion I couldn’t get the columns changing on a standard portfolio grid?
It would be very useful to get this working
thanks
So no I don’t have an example currently
This was so helpful! Thank you for sharing. When I do the php to change the image size to the thumbnail, the image looks blurry. Any advice on how to adjust the image settings to prevent the blur?
You would need to ensure your images are large enough to fill the space without being stretched and then try to regenerate thumbnails
Hi Michelle
It looks amazing! Thank you so much.
I have a question in relation to the PHP, as it is not just the pictures in the filterable portfolio that is affected by the code. Right now the ‘fullwidth portfolio’ is compressed because of the PHP I added. How can I make sure that my ‘fullwidth portfolio’ images will not be affected by the PHP I added to change the filterable portfolio?
There may be by adding another filter, but divi doesnt seem to currently differentiate between the filterable and the standard portolfio image width. I am afraid the extra php which may achieve it is beyond my skillset currently :/
Hi Michelle, thanks a lot for your great tutorials. I use them a lot. I have one question.
Is it possible to remove the “All” tab? And the content? I would like to show only the projects when clicked on, and not all of the projects at once.
Or maybe show no categories when one click on “All’. I hope you understand my bad English.
Kind regards Claudia
Hi Michelle, I managed to remove the “All” tab, but not the content.
Looks like you got this sorted?
Great tutorial. Is there a way to allow the featured images to be their own width rather than full width?
I am using this for a business directory and the logos are stretching.
Thanks.
I think I replied to your email Paul, check the PHP snippet and set the width and height to ‘auto’
Can you guide how to use a custom field (project or post) in portfolio? Thank you so much!
I am not fully understanding what you want to do but you may want to look at this plugin https://elegantmarketplace.com/downloads/advanced-custom-fields-module/
Michelle, you are the best! i wanna be like you when i grow up
tks!!!
Haha, thanks Rafael
Hi Michelle,
Thanks a lot, great job! I have a problem, I’m using two columns, and when the number of items in a category is even, the last project is showing with no margin, do you know why?
Thanks!
Jose
I would say you have not used the correct number in the nth-child setting so the margin is being removed from the incorrect item
Hi Michelle,
Thanks for your reply. I double checked, I used the values from the spreadsheet, so I guess it should be something in the formula. Have you tried with even elements? I tried to see what happens, but I really didn’t fin anything strange,
Greetings,
Jose
Thanks Michelle, find your site is solving many problems! I wanted to know how you can sort the filters and the contents of the portfolio in alphabetical or other order.
Thanks so much
There is a solution here but I would suggest using a child theme and not editing the core files
https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=600053&p=3307401&hilit=sort+projects#p3307401
Thanks for this tutorial, it was a huge help for my site build. Do you know if there is a way to make the default category something other than “ALL” when landing on the page? Thanks again.
Cheers, Adam.
That would need a PHP edit which is not my forte I am afraid
Perfect timing, thank you Michelle! Just need access to that file…?
So sorry I hadn’t realised the file would be locked. I have changed the file type so you can download if you want to take another look
What a timely Recipe
I’ve been looking at updating my portfolio page for my website and I came across this recipe.
A couple of questions:
Is it possible to center align the buttons in the section?
Can I have the project thumbnails that appear below the buttons also appear centered? For example I want three portfolio ‘thumbnails’ displayed per row and if the number of projects I’m displaying is 10 then on the last line the ‘single’ portfolio image would be centered.
Hope that makes sense, I also tried to download the Calculator but it looks like I need access to the file.
Cheers
You can add margin: auto; to the
.et_pb_portfolio_filters ul
and.et_pb_portfolio_items
classes to center align the buttons and images. Margin auto will only work if you have a width explicitly set.Thanks Michelle – I will try and work out how this works.
I’m still not able to access the Spreadsheet, for some reason Google won’t send the request through.
Sorry that’s my fault, Google Drive is not great with editable sharing options. I have repackaged as an Excel spreadsheet so download again and you can open that in Excel which is probably easier
Hi Michelle,
Where do i explicitly set the width to what element to be able to center align the filter buttons?
Thanks!
To the same classes I mentioned above
Is there a way to recolor the border color of the buttons?
I am also hoping to add title hovers to the images. Is this possible?
Yes its possible but would require custom coding
You can change the border colour by adjust this class:
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
border: 1px solid #e2e2e2;
}