Employee row problems

My employee’s pictures are all different sizes and it looks really bad, I want them to all be on the same level and the same size. Any code or plugins that will allow me to do that?
Also is it possible to make the employee pictures circle?
And last question, I want to add an Instagram Link to each employee is that possible? If yes how?

Hello there,

To have them equal, you don’t need extra code, you just have to prepare equal size before uploading them. Make sure they are square, so we can apply CSS border radius to make them circle.

Add the below CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.employee-photo, 
.employee-photo img {
   border-radius: 100%;
}

To add an extra social icon link for Instagram, you have to add a couple of extra jQuery code since this feature hasn’t available yet in the theme. 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

;(function($) {

   'use strict'

   if( $('.employees-area').length ){

    $('.employee-social').append('<a class="soc-ig" href="#" target="_blank"><i class="fa fa-instagram"></i></a>');
      
    $('.employees-area .employee').each(function(){

      var name = $(this).find('.employee-name').text();
      var url      = '#';

      if(name == 'Jane Doe') {
        url = 'https://instagram.com/jane-doe';
      }

      if(name == 'Bob Dylan') {
        url = 'https://instagram.com/bob-dylan';
      }
      
      $(this).find('.employee-social').children('.soc-ig').attr('href', url);
        
    });

  }

})(jQuery);    


See this code block in the code above.


if(name == 'Jane Doe') {
  url = 'https://instagram.com/jane-doe';
}

if(name == 'Bob Dylan') {
  url = 'https://instagram.com/bob-dylan';
}

It defines the Instagram URL link for each matched name. Please adjust the name and URL values. If you have one more employee, just duplicate this code block:


if(name == 'Bob Dylan') {
  url = 'https://instagram.com/bob-dylan';
}

  1. Update

I hope this reply helps.

Regards,
Kharis

Thats Amazing! Thank you so much, So I understood all that, my only question left is, if the photos are not the same size when I upload, is there nothing I can do? As I have 10 employees and it’s pretty difficult for them to all send me exact sized images…
here is the link to my site so you can see:

Hello there,

Enlarging the image size with CSS code isn’t a good practice to do as it will be pixelated. I am sorry, I don’t have any other solution.

Regards,
Kharis

I figured out a solution, by manually resizing the picture using a picture sizing tool online but thank you anyways!

Awesome! Glad to hear you figured that out.

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