Feature loads at about 2x normal height, then shrinks back down

[angelopc 2]

I have a new website (new.svctx.com) that I'm building for a client. I've added a Feature to the header that doesn't seem to load correctly. Maybe someone could take a look and give me some advice?

 

Thanks!

[greenfly 230]

I believe the feature slider loads the image and then resizes on page load to fit the aspect ratio in the feature slider settings. You can stop this happening by having the image the image the aspect ratio before uploading to the feature section. 

 

Could you take a screenshot of the settings for your feature slider image so we can double check for you,. 

[angelopc 2]

Here's what I get, with the settings I'm using.

 

Bad Feature: http://new.svctx.com/wp-content/uploads/2014/01/bad-feature.png

 

Good Feature: http://new.svctx.com/wp-content/uploads/2014/01/good-feature.png

 

Settings: http://new.svctx.com/wp-content/uploads/2014/01/feature-settings.png

 

The image is 1024px X 220px. (4.654...)

[angelopc 2]

Any news on this issue, yet?

[greenfly 230]

Sorry i meant to ask for an admin logon for your site - could you create an admin level account for your Wordpress site and send the credentials to hello at pagelines dot com and i will jump on your site and check out your setup etc and find a solution for you. 

[angelopc 2]

Done.

[greenfly 230]

Thank you - i will take a look for your in a few minutes and update you shortly. 

[greenfly 230]

Could you try disabling all plugins and let us know when you have done this so we test something further.

[angelopc 2]

Disabled them all. Still does it. It just does it quicker.

[greenfly 230]

ok keep them disabled for us - taking another look now for you 

[greenfly 230]

Ok can you re-activate the plugins at any time now thank you. Another update shortly. 

[angelopc 2]

Cool.

[greenfly 230]

i just tested using jpeg's instead of PNG's and the performance is much much better. I set up an alternative feature set called test with the first slide made into a JPEG

 

Not a perfect fix but a definite improvement. 

 

not stopping looking at this but something to look at until i can get a colleague look into this ASAP for you. 

[angelopc 2]

Don't kill yourself over it. The site isn't even sold, yet. ;)

 

I'll check into creating the features with JPGs, instead of PNGs.

 

Thanks!

[greenfly 230]

Bit further research into this - i think it is to do with the DPI settings of the PNG's - just think they need to be optimised a little more. 

 

let us know how you get on :) 

[angelopc 2]

Yeah, I'm not sure that's the issue. I just brought them down to a third of their original file size and nothing changed. They were all at around 370kB-390kB. Now they're all at 120kB-130kB. No change.

 

I really appreciate your help on this. I hope there's a solution...somewhere.

 

The problem even exists on the About page, where no other photo gallery or slider/fader exists.

 

Update: I even shrunk the JPGs down to around 25kB-30kB, with no change to the problem.

[angelopc 2]

Hey, Martin.

 

Any updates on this? The site has actually been accepted by the client. Really looking to get this issue fixed, now.

[James B 436]

Hi there, the aspect ratio option resizes via a script which doesn't load until the page is fully loaded, which is why you see the original image first. Some users have found that if they have settings in the sitewide options and then different settings locally this can cause the resizing to be more prominent. You can check the sitewide settings in PageLines>page options>sitewide defaults.

 

Setting a static pixel size for the slider instead of using aspect ratio will prevent the slider from resizing as it won't be using the script to calculate the resizing, it will simple load at the given height and then if set to a responsive layout resize from that height downwards into mobile/ipad view etc.

[angelopc 2]

I don't have a problem setting the static pixel size, but the image, itself, is being stretched. It isn't that the image is larger than the space that it fills (Feature is 220px high and so is the image).

 

Setting the static pixel height fixes the loading issue, though. Thank you.

[angelopc 2]

Hey guys...I have this issue on another site, but setting the Feature to Static renders it "unresponsive" (doesn't shrink).

 

DiannaSpieker.com

 

UPDATE: Actually, it doesn't work (is unresponsive) on the original site, as well.

 

UPDATE 2: It looks like I was able to fix this with the following:

 

.feature-wrap {
  max-height: 220px;
  max-width: 1000px;
}

[James B 436]

Hi there, glad you managed to fix.

 

Just in case its relevant, in the Framework there were global and local settings for the slider. The local are set on the page in the page meta, the local in PageLines>page options> then the slider option in the global options template.

[angelopc 2]

Not really a "fix" as much as it was a bandaid. When loading the site on a small screen, the feature still stretches (down) as much as the 220px I set the max-height to.