Employee page and carousel

Dear Kharis,

Is it possible to keep the employee carousel on the front page but also to have a “Meet the team” page where all employees are in a grid?

All the best,

Daniel

Hello there,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
/**
 * Javascript-Equal-Height-Responsive-Rows
 * https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
 */
(function($){'use strict';$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css('box-sizing')==='border-box')||($element.css('-moz-box-sizing')==='border-box');if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
heights.push(elementHeight);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(':visible');$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
row.equalHeight();}}
return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(':visible');$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var _this=this;var event_namespace='.grids_'+grids_event_uid;_this.data('grids-event-namespace',event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
$(window).bind('resize'+event_namespace+' load'+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css('height','auto');$(window).unbind(_this.data('grids-event-namespace'));return this;};})(window.jQuery);

;(function($) {

   'use strict'

   $(window).on('load resize', function() {

     if( $('.page-id-1062 .roll-team').length ){

        $('.page-id-1062 .roll-team .owl-item').responsiveEqualHeightGrid();

     }

   });


})(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .page-id-1062 .roll-team .owl-wrapper{
      max-width: 100% !important;
      transition: none !important;
      transform: none !important;
    }

    .page-id-1062 .roll-team .owl-controls{
      display: none !important;
    }

In the code above replace 1062 with the page ID where all employees should be displayed in grid mode. The easiest way to get ID number of a page is use Reveal IDs plugin.

Regards,
Kharis

Works great! Thank you!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

Sorry to post again in this topic but I just saw that the grid is to small! If the text in “employee position” is to big it pushes the entire lower row of pictures/employees. And overall in the grid social network buttons overlap with the name under the thumb because if the name is to big it pushes all the content down. In all is it possible to have bigger thumbs of employees in a grid or to have to per row?

Daniel

Hello Daniel,

To change the default grid column, you can add this JS script to the most top:

;(function($) {
  if ( $().owlCarousel ) {
    $(".page-id-1062 .roll-team:not(.roll-team.no-carousel)").owlCarousel({
      navigation : false,
      pagination: true,
      responsive: true,
      items: 2,
      itemsDesktopSmall: [1400,2],
      itemsTablet:[970,2],
      itemsTabletSmall: [600,1],
      itemsMobile: [360,1],
      touchDrag: true,
      mouseDrag: true,
      autoHeight: false,
      autoPlay: false,
    }); // end owlCarousel
  } // end if
})(jQuery); 

Ensure it’s inserted before these lines:

/**
 * Javascript-Equal-Height-Responsive-Rows
 * https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
 */

Do not forget to adjust the ID page number on .page-id-1062 class selector.

Regards,
Kharis

Thnx! I get what the code is supposed to to but unfortunately it shows one column. I am not sure that it can fit two pictures side by side. Perhaps chaining the dimensions of the thumbs?

And a second of topic question - if I go pro can I just install “over the web” and will it cause problems?

Daniel

Hello Daniel,

Do you have a link of your site to share here? As at this phase, I need to inspect directly what’s actually going wrong in there.

if I go pro can I just install “over the web” and will it cause problems?

Sydney Pro is actually different theme. To transfer you current setup tied with free one, you need to do these steps.

Regards,
Kharis