Cube Portfolio – How to resize images?

Are you trying to resize of images on cube portfolio? Or to set the number of images to be displayed on each row?

I was facing this problem and assumed others can get into the same issue so I’m going to share the solution with you.

Unify App is using Cube Portfolio for their gallery. I got a screenshot from their page as below. Their Cube Portfolio has 4 images in a row.

 

Cube Portfolio - 4 images per row

 

How if we want to resize the images or for example, display 3 images per row?

The solution is easy. Modify the section (as shown in the image below) on file, “assets\js\plugins\cube-portfolio.js”

Cube Portfolio - 4 images per row - js file

 

You can change the values of mediaQueries array. To show 3 images per row on a desktop monitor, change the value of 4 (indicated by red arrow) to 3.

To set the number of images per row for tablet and mobile view, change the ‘cols’ value for width of 500 px and 320 px.