Employees widget

Hi,

how can I change employees pictures/thumbnails (I’m not talking about pictures files per se) dimensions in widget? Right now it seems like they are rigged with 400x400… Even if I put there 200x200 pictures it doesn’t change much.

Regards,
JS

Hello there,

Thank you for getting in touch.

The employees slide item width is handled by the Owl Carousel setting in the main JS file, js/main.min.js. The visible items per row are always 3. So if you have smaller image dimension, the wide gap always appears.

To achieve your objective, I thought you should need to make adjustment to the Owl Carousel setting.

  1. Copy the content of js/main.js file, then paste into the js/main.min.js. So it will be more readable.
  2. Open the js/main.min.js file. Then find the following code block
var teamCarousel = function(){
	if ( $().owlCarousel ) {
		$(".panel-grid-cell .roll-team, .panel-grid-cell .latest-news-wrapper").not('.roll-team.type-b').owlCarousel({
			navigation : false,
			pagination: true,
			responsive: true,
			items: 3,
			itemsDesktopSmall: [1400,3],
			itemsTablet:[970,2],
			itemsTabletSmall: [600,1],
			itemsMobile: [360,1],
			touchDrag: true,
			mouseDrag: true,
			autoHeight: false,
			autoPlay: false
		}); // end owlCarousel
	} // end if
};
  1. Increase the value of items property. It might be 6. So you should have like the following.
var teamCarousel = function(){
	if ( $().owlCarousel ) {
		$(".panel-grid-cell .roll-team, .panel-grid-cell .latest-news-wrapper").not('.roll-team.type-b').owlCarousel({
			navigation : false,
			pagination: true,
			responsive: true,
			items: 6,
			itemsDesktopSmall: [1400,3],
			itemsTablet:[970,2],
			itemsTabletSmall: [600,1],
			itemsMobile: [360,1],
			touchDrag: true,
			mouseDrag: true,
			autoHeight: false,
			autoPlay: false
		}); // end owlCarousel
	} // end if
};

The code above is shared to other element, i.e. latest news. To apply the changes for employees widget only, try to split them.

Employees widget

var teamCarousel = function(){
	if ( $().owlCarousel ) {
		$(".panel-grid-cell .roll-team").not('.roll-team.type-b').owlCarousel({
			navigation : false,
			pagination: true,
			responsive: true,
			items: 6,
			itemsDesktopSmall: [1400,3],
			itemsTablet:[970,2],
			itemsTabletSmall: [600,1],
			itemsMobile: [360,1],
			touchDrag: true,
			mouseDrag: true,
			autoHeight: false,
			autoPlay: false
		}); // end owlCarousel
	} // end if
};

Latest News widget

var teamCarousel = function(){
	if ( $().owlCarousel ) {
		$(".panel-grid-cell .latest-news-wrapper").not('.roll-team.type-b').owlCarousel({
			navigation : false,
			pagination: true,
			responsive: true,
			items: 3,
			itemsDesktopSmall: [1400,3],
			itemsTablet:[970,2],
			itemsTabletSmall: [600,1],
			itemsMobile: [360,1],
			touchDrag: true,
			mouseDrag: true,
			autoHeight: false,
			autoPlay: false
		}); // end owlCarousel
	} // end if
};

Since we are editing the parent theme’s file, you should take this at your own risk. Once you update the theme in the future, you should do this adjustment again because the edited file will be overwritten.

If possible, I’d suggest you to do this in a child theme mode. You can download the Sydney child theme here.

Warmest regards,
Kharis

Works great!

Thanks!

Hello there,

Nice!

Glad to know that it worked for you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance. I’m happy to have an opportunity to assist you.

Warmest regards,
Kharis

How do I find that code to paste in my child theme?
Is there another medthod to show more than 3 employees?

Hello @dgrylas,

Thank you for asking.

> How do I find that code to paste in my child theme?

To pass it in the child theme mode, please refer here.

> Is there another medthod to show more than 3 employees?

I’m afraid there is no other way than that because the output has been manipulated by the jQuery Owl Carousel.

Regards,
Kharis