Stockholm theme – Featured images being squashed

Hi guys,

I’ve recently purchased the Stockholm theme from Themeforest and I’ve tried to customize the Viggo version to show non-cropped versions of my images, instead of cropped versions with a 500×500 dimension or some multiplication of those dimensions.

I almost succeeded in doing what I want. The images in the grid are a little squished, vertically: https://screencast.com/t/caLRe8soFTN

I tried addressing this with the Theme support at themeforest, but they’re saying it’s too much custom work and therefore isn’t included in their support. I really like the theme otherwise so I’d like to solve this anyway.

The process is as follows: I adapt the functions.php file so when I regenerate the thumbnails, it uses the aspect ratios I want:
`add_image_size( ‘portfolio_masonry_regular’, 790, 520, true );
add_image_size( ‘portfolio_masonry_tall’, 756, 1000, true );
add_image_size( ‘portfolio_masonry_large’, 1549, 1040, true );`

Then the masonry grid looks at all the posts in the portfolio category, takes the appropriate “crop” for that featured image (so in the case of the image of the Deer, it would take the masonry_tall thumbnail) and displays it in the masonry grid.

The aspect ratio of my native image is around 1.3. The aspect ratio of the displayed image is around 1.5. So my conclusion is: the regenerating of the thumbnails is going fine, it’s the placing it in the grid and then resizing it that’s not going well for some reason. Looking at the code, the standard class that the image uses (.projects_masonry_holder .image_holder img) has a strikethrough auto height, and is instead replaced by

element.style {
    height: 416px;
}

From some googling I gather it’s either inline coding or javascript, which seems to want this image to be 416px high (at full resolution, it does scale down when the window is smaller), regardless of what other code is implemented. I’ve been looking through the code a bit but I haven’t found anything. Does anyone know how I can solve this? Am I wrong, is this not javascript or inline coding? Can I override it by putting height: auto !important; in the right class? I found this code in the default.min.js file (I think):

function resizeMasonry(e)
{
	"use strict";var t=jQuery(window);if($j(".full_width").length)
	portfolio_width=$j("body").hasClass("vertical_menu_enabled")&&$window_width>1e3?t.innerWidth()-260:t.innerWidth(),e.hasClass("masonry_extended")&&(portfolio_width-=60);
	else
	{var i=e.closest(".container_inner");
	portfolio_width=i.has(".column_inner").length?e.closest(".column_inner").innerWidth():i.innerWidth(),e.hasClass("masonry_extended")&&(portfolio_width+=60)}e.width(portfolio_width);
	var o=5;
	portfolio_width>1600?o=5:1600>=portfolio_width&&portfolio_width>1300?o=4:1300>=portfolio_width&&portfolio_width>1e3?o=3:1e3>=portfolio_width&&portfolio_width>480?o=2:480>=portfolio_width&&(o=1),e.hasClass("masonry_extended")&&(portfolio_width>1600?o=4:1600>=portfolio_width&&portfolio_width>964?o=4:964>=portfolio_width&&portfolio_width>728?o=3:728>=portfolio_width&&portfolio_width>540?o=2:540>=portfolio_width&&(o=1));
	var n=e.find('article[class*="default"]:first img').height(),a=e.find('article[class*="default"]:first img').height(),s=t.innerWidth()>480?2:1;
	e.hasClass("masonry_extended")&&(n+=30,e.find('article[class*="large_width"] img').css("height",a)),e.find('article[class*="large_width_height"] img, article[class*="large_height"] img').css("height",n*s),e.isotope({masonry:{columnWidth:portfolio_width/parseInt(o)
	}
	})
	}

Looks to me like this is the code causing the resizing on the page, but I’m not sure what elements affect the height of the image.

Thanks!