Featured portfolio images are being stretched « Support Forum | Kriesi.at

Support Forum » Choices

Featured portfolio images are being stretched

8 posts from 3 voices

Started 7 months ago by flylanddesigns
Latest reply from Devin
This topic is resolved

Tags:

flylanddesigns
Member

Me again, haha.

I'm having a lot of difficulty with your image sizing system, I've never experienced anything like it before with other themes that I've used.

Here is my site: http://www.flylanddesigns.com

Here's my problem: When I click on a thumbnail in the portfolio, the tall portrait images are shown at a larger size than their original size, so it stretches them and makes them blurry. For example, all the images I uploaded were a max height or width of 800px. But it's making them appear as 930px tall, which stretches them quite a bit. For example, check ou the Captain America vs. Batman image. It stretches it, and then when you click to bring up the lightbox, it brings up the original sized image of 800px.

I've changed all the image sizes in the function.php file to be 800px max height for the 'fullsize' category.

I've also changed the settings in the Wordpress Media menu to be 550px x 800px for large images.

And then I ran the thumbnail regenerate plugin. No effect.

And when I try to mess with the CSS so that the whole container has a max height (of 800px), it actually cuts the image off. I can't understand this, because it seems to be set that the image fills 100% of the container, so shouldn't shrinking the container shrink the image?

I've got to have this site up and running in a day or two. Please help!

-Brian

Posted 7 months ago #
Nick
Moderator

Hi,

You are using Quick Cache, so when you change things, you can not expect the change to be noticed until the cache expires or you turn off quick cache until you finish all customizations.

---

The best way to beat the images into submission is to first install the Simple Image Sizes plugin ( http://wordpress.org/extend/plugins/simple-image-sizes/ ). The plugin will give you complete control over all images in the theme -from aspect ratio, to width, whether to crop the image, and even has a built in thumbnail regenerator.

After installing the plugin, you will find your Settings > Media page in the backend to contain the various sizes. Then simply find the dimensions you want to change. Save. Regenerate the images and see if you like what you see or want to tweak the image sizes further.

Sorry for the inconvenience, I see you have a live site, set me up a temp admin account and email me what you are trying to do and I will get you back up in no time usjahm (at) gmail.com

Thanks,

Nick

Posted 7 months ago #
Devin
Moderator

Hi Brian,

Max-height keeps the container from getting past that height but the image is still there inside/behind it. The way images work is that they will grow to fit the width of their container. So if the container is 100px wide and the image is 80px wide and 200px tall, it will expand to be 100px wide and the height will expand at the same ratio.

If the image is *wider* than the container it will shrink to fit and both the height and width will be reduced.

Can you point to a specific example on your site that the image is getting inappropriately stretched? Using the ajax portfolio you have now the max width for the image container is 609px so if you set the fullsize image size in your functions.php to a size larger than 609 width and all your images are at *least* 609px wide then you shouldn't have any bluring.

Edit: I think Nick and my advice should help get this sorted out for you :)

Regards,

Devin

Posted 7 months ago #
flylanddesigns
Member

Thanks so much for your help.

I get it now, but that seems a little difficult to plan for.

This is what I wanted to do: When the use clicks on a thumbnail, the portfolio image that pops up would never be (let's say) taller than 500px. So in order to do that, I need to make sure all of my images that aren't wider than 609px (the max width of the container) are pasted onto a white canvas that is more than 609px wide, and 500px tall. Otherwise, it's always going to make the image wider (and in effect taller) to fit.

I have some examples where my my artwork is 800px tall, but only 400px wide. So that ends up creating a lot of distortion.

It probably sounds like i'm being nit-picky at this point, but I saved all my portfolio images at 800px tall for portrait images, so that means I'm going to have to go back and resave a lot of them in Photoshop to make sure they have a minimum width of 609px.

Is there really no way to control the maximum size of the ajax portfolio window itself?

Thanks!

Posted 7 months ago #
flylanddesigns
Member

By the way, your customer service has been the best of any theme I've purchased. I made sure to give the theme a 5-star rating on themeforest, and a positive review. I hope you guys are all millionaires soon! :)

Posted 7 months ago #
Devin
Moderator

The only thing you could do is shrink the size of the container which will effect the maximum size of all of your images.

Removing the 100% width is going to give you images that are not centered and tends to cause a lot of other issues whenever we have tried to do it (browser support etc).

But really, when you want images to appear a very specific way you'll be doing a lot of re-saving with photoshop anyway. Its not what you want to hear I'm sure but I know how important a good clean non-distorted portfolio is.

Regards,

Devin

Posted 7 months ago #
flylanddesigns
Member

Turns out it ends up not really being much of an issue, I didn't have that many images that were that tall.

In a future update, being able to control the max size of the window would be great, but the theme is still badass just as it is.

Thanks for your help!

Posted 7 months ago #
Devin
Moderator

I agree a bit more control would be a good thing. I think the biggest hurdle is just keeping it adaptive and causing no other issues with other browsers. IE specifically has heart attack for almost every kind of image if you aren't jumping through its ridiculous hoops.

Regards,

Devin

Posted 7 months ago #