How to make portfolio images on Single Portfolio Item page to display correctly?

[jhodgski]

I am using 1066px by 800px images for my Portfolio items. I chose those dimension so they don’t get clipped on the Filterable Portfolio page (I’m using 3 columns of portfolio items) and so that they would be big enough to display well on the Single Portfolio Item page.

However, on the Single Portfolio Item page, the top and bottom of the image is cropped. How do I make the portfolio images also display well on the Single Portfolio Item page.

Also, when I mouse over the image on the Single Portfolio Item page it slides up (for seemingly no good reason) so how do I stop that also?

Thanks,
James

[Nexus]

Hi,

I logged into your site and and checked the option for “Retain Image Height” in the blog options. This will make sure that the image height is retained for single posts. Some of your portfolio images don’t have the right ratio (for eg. Doodes project), If you maintain the correct aspect ratio, then you can retain the height of the image.

Regarding the weird hover effect on the single portfolio? I don’t see it. Can you get back to me regarding that? Thanks!

[jhodgski]

In my Portfolio Section code, I changed image_size=”square” to image_size=”medium” and everything seems to display OK now. Can you confirm what the correct aspect ratio is though?

The “Retain Image Height” option wasn’t ticked in Theme Options > Blog, but I’ve ticked it now and the images are now rendering nicely on the Single Portfolio Item pages – and that’s also fixed the mouseover problem.

Thanks! 🙂

[jhodgski]

I’m afraid the mouseover problem has returned… It possibly has something to do with me changing the slug of my Portfolio page from filterable-portfolio to portfolio?

Anyway, the portfolio image on each Single Portfolio Item page now slides up again when you mouseover it.

Can you advise. Thanks.

[Raghavendra]

Looks like the issue is happening on non-webkit browsers like FireFox. Pls have this custom CSS to fix this –

.single img.featured {
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
}

Will get this fixed in the upcoming update. Thanks for reporting this to us.

[jhodgski]

That’s fixed it. Thanks.

[Nexus]

Glad it got fixed.

[Author]

Posts