Change project thumbnail size

Is there a way to have the project thumbnail size not get condensed down (currently outputting at 500w x 315h)? I would like them to be full squares (500x500), without stretching the image, if possible.

Last one, I swear! Thank you so much for the help.

Hi,

Did you mean for the first thumbnail? if yes, its not 500 x 315 but its 413 x 309 http://prntscr.com/e8xtsx

And the others is 500x310.

Regards,
Awan

Hi Awan,

I would like all the project thumbnails to output as actual squares – the images used are square, but the top and bottoms are cut off due to the height setting in the coding. I want the whole square image to be seen in the thumbnail. Does that make sense, and is it possible?

Thanks for the reply!

Hi,

I see, then lets try to fix the issue using these javascript:

  1. Install Header and Footer plugin
  2. put these script in “Before body closing tags (footer)”
<script>
jQuery(function($){
    $('.home .project-thumb img').removeAttr('srcset').width(500).height(310);
    $('.home .project-thumb img').each(function(i, el){
	var src = $(el).attr('src');
	src = src.replace('-500x310', '');
	$(el).attr('src', src);
    });
});

Hope it helps.

Regards,
Awan

Hey Awan,

That didn’t seem to do it. I’m looking to have the thumbnails maybe output at 500x500, if possible? The images I have set for the “featured image” are all squares – 1200x1200 (they don’t need to be that big obviously). But like I said, I’d like the whole image visible in the thumbnail.

If this is too much work I totally understand, just thought I’d ask. Thanks!

Hmm I didn’t see that you already implement the code in above.

You can also make the thumbnail size to 500x500, you just need to adjust the value of the height() and width() from the code in above.

After you implement those javascript, don’t forget to remove this CSS code:

.project-thumb img:first-child {
    height: 280px;
}

Hi Awan,

http://nepalcomeback.com

I believe I’ve completed everything you said. I’ve implemented the java script and removed the CSS code you mentioned. It is back to the first thumbnail being taller than the other two:

Current

I would like it to look closer to this:

Desired

I tried changing the height() and width() in that code but it didn’t seem to change anything.

Hello,

I decided to move away from the project widget. Thank you for your support.