Wrong Dimensions for Employee Pictures

Hello World,

I have a problem with the size and format of employee pictures in my project. When I add a picture to an employee (i.e. 125 x 125 px, so we talk about a square picture) it will be displayed as a rectengular picture. A right click on the page and displaying the source code will give me this :

<div class=“so-panel widget widget_sydney_employees_type_b sydney_employees_b_widget” id=“panel-270-8-0-1”>
<div class=“roll-team type-b”>
<div class=“team-item col-md-4”>
<div class=“team-inner”>
<div class=“avatar”></div></div>
<div class=“team-content”>
<div class=“name”>Marc Adam</div>
<div class=“pos”>General Manager</div>
<ul class=“team-social”>
</div></div><!-- /.team-item -->

This source codes is shown, even when I add

/* Enter Your Custom CSS Here */
.roll-team .team-item .team-inner .avatar img{
height: 125px;
width: auto;
}

to custom css plugin. The picutre is smaller of course but not square and when I change the css-settings to both 125px the picture looks squeezed!!!

What am I doing wrong here!!!

Thanks in advance for your support!

Marc

Sorry for the posting the picture inside the text :wink:

Dear Marc,

Thank you for letting us know about it.

Your image code got rendered. Could you please post the source code here?

If possible, could you please post your URL here so I can have a closer look?

Regards,
Kharis

Hi Kharis,
here is the code.
Why does WP change the name of the picture and add a size to the file-name?

<div class=“so-panel widget widget_sydney_employees_type_b sydney_employees_b_widget” id=“panel-270-8-0-1”>

	&lt;div class="roll-team type-b"&gt;
									&lt;div class="team-item col-md-4"&gt;
		    &lt;div class="team-inner"&gt;
									&lt;div class="avatar"&gt;
					&lt;!--&lt;mg width="550" height="400" src="http://localhost/amg/wordpress/wp-content/uploads/2016/01/Marc800-550x400.jpg" class="attachment-medium-thumb size-medium-thumb wp-post-image" alt="Marc800" /&gt;--&gt;					&lt;/div&gt;
							    &lt;/div&gt;
		    &lt;div class="team-content"&gt;
		        &lt;div class="name"&gt;
		        				        		Marc Adam			        				        &lt;/div&gt;
		        &lt;div class="pos"&gt;General Manager&lt;/div&gt;
				&lt;ul class="team-social"&gt;
																						</ul>			        
		    &lt;/div&gt;
		&lt;/div&gt;&lt;!-- /.team-item --&gt;

									&lt;div class="team-item col-md-4"&gt;
		    &lt;div class="team-inner"&gt;
									&lt;div class="avatar"&gt;
					&lt;!--<img width="550" height="400" src="http://localhost/amg/wordpress/wp-content/uploads/2016/01/Diethelm_800-550x400.jpg" alt="Diethelm_800" />--&gt;					&lt;/div&gt;
							    &lt;/div&gt;
		    &lt;div class="team-content"&gt;
		        &lt;div class="name"&gt;
		        				        		Diethelm Adam			        				        &lt;/div&gt;
		        &lt;div class="pos"&gt;Senior Manager&lt;/div&gt;
				&lt;ul class="team-social"&gt;
																						</ul>			        
		    &lt;/div&gt;
		&lt;/div&gt;&lt;!-- /.team-item --&gt;

> … The picutre is smaller of course but not square and when I change the css-settings to both 125px the picture looks squeezed

I’m afraid. You can’t have your image precisely resized to 125px by 125px because your image is scaled down to 500px by 400px. This size is specified in the widgets/fp-employees-type-b.php file in the following line.

the_post_thumbnail('medium-thumb');

If you want to change its size to 125px x 125px. You would need to change it to something like the following.

the_post_thumbnail(array(125,125));

Then regenerate your new size by using Regenerate Thumbnails plugin.

As you would edit the core theme’s file, you should take it at your own risk. The changes you would have made would be overrode once the theme gets updated in the future.

Regards,
Kharis

Hello!

Just wanted to share a solution that I think might work well, without messing with the core code of the theme…
Make a .gif from your (two duplicate) images with for example gifmaker.me, or any other website, and set the gif as your featured image. Because they are duplicate images nothing looks animated. It seems to overrule the code, and the image is shown square! (the size of mine is by the way 281x281).

Take a look here, it seems to work ?: http://zaza-inc.com/

By the way, I LOVE the theme :slight_smile: makes me super happy to work with, and learning a lot every day.

Thanks!

Zaza