Cube Portfolio – How to resize images?

Share on facebook
Share on twitter
Share on pinterest

Are you trying to resize images on the 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 its gallery. I got a screenshot from their page as below. Their Cube Portfolio has 4 images in a row.

Cube Portfolio of the Unify App has 4 images in a 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”

changing the values of mediaQueries array on file, “assets\js\plugins\cube-portfolio.js”

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

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

Subscribe to our Newsletter

Share this post with your friends

Share on facebook
Share on google
Share on twitter
Share on linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *