Blog

This code will make it so a testimonial component will display as mosaic tiles. This is for webmanager only.

PLEASE NOTE: This code was set up for a testimonial component with the layout "Grid Layout 1". The code can work with a normal list layout, but the CSS calls will need to be updated with different divs.

Also, this code will apply to EVERY testimonial component on the website. Adjustments would need to be made to make it work on only 1 component. Also, the code only works if you have 1 testimonial component on the page. Having multiple will break the code.

Add the following code to the custom.js file.

/*
function to calculate the total height of every testimonial.
Takes in no inputs
Returns the total height of all testimonials
*/
function calculateHeight() {
var testimonials_height = 0;

    //REPLACE .testimonials-row with the div wrapping each individual testimonial
$('.testimonials-row').each(function(){
testimonials_height += $(this).outerHeight(true);
});

return testimonials_height;
}

/*
Function to set the wrap of the testimonials to have a set height so the testimonials wrap into a given amount of columns
testimonials_height: The total height of every testimonial
columns: The amount of columns the testimonials should wrap into
No return
*/
function setWrapHeight(testimonials_height, columns) {
var max_height = (testimonials_height / columns) + 100;

//REPLACE .testimonials-grid with the div wrapping every testimonial
$('.testimonials-grid').css('max-height', max_height + "px");
}

/*
Function to set the amount of columns on the current screen size
No inputs
No returns
*/
function calc_mosiac_testimonial() {
if (window.innerWidth > 1024) {
setWrapHeight(calculateHeight(), 3);
} else if(window.innerWidth <= 1024 && window.innerWidth > 767) {
setWrapHeight(calculateHeight(), 2);
} else if(window.innerWidth <= 767) {
setWrapHeight(calculateHeight(), 1);
}
}

//Checks to make sure there is a testimonials component on the page
if($('.testimonials').length) {

    //If there is, sets the height for the current screen size
    calc_mosiac_testimonial();
   
    //And sets a function to recalculate the height if the screen size is changed
    $( window ).resize(function() {
   
    calc_mosiac_testimonial();
   
    });
}

Add the following code to the custom.css file

.testimonials .testimonials-grid.layout_grid_1 .testimonials-row {
    width: 33%;
}

@media(max-width: 1024px) {
    .testimonials .testimonials-grid.layout_grid_1 .testimonials-row {
        width: 50%;
    }
}

@media(max-width: 767px) {
    .testimonials .testimonials-grid .testimonials-row {
        width: 100%;
    }
}

.testimonials-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.testimonials {
    overflow: hidden;
}