Archived

This topic is now archived and is closed to further replies.

  • 0

Features Section w/ Over Zoomed Cropped Images


Question

Posted · Report post

Why does the Featured Section using images only for slides auto zoom in?

 

Is this changeable or a glitch?

 

I see it load full size filling and fitting nicely into the window and then as it fully loads it zooms in over cropping the image off.

 

I typed no height in nor aspect ratio... If I do aspect ratio the images vertically all display at once. If I do height... well I still get cropping and doesn't make for good mobile response design the way I'm doing the graphics text.

 

url: dev.tviaudio.com

WordPress 3.5.1.

PageLines Framework 2.4.1

host: MediaTemple.net -- i.e. starbucks, adobe, volkswagon etc...

 

I've turned off ALL plugins etc... as well.

 

Here are the  before and after page load pics.

post-23928-0-65509100-1367943207_thumb.p

post-23928-0-95303100-1367943214_thumb.p

Share this post


Link to post
Share on other sites

10 answers to this question

Posted · Report post

That's definately cropped. It's a less hateful crop on this particular image but the other images are super important that are being cropped.

 

The full image is actually this.

http://dev.tviaudio.com/wp-content/uploads/bt-1200-series-feature.jpg

 

Other images should look like this not zoomed.

http://dev.tviaudio.com/wp-content/uploads/dp-series-feature.jpg

http://dev.tviaudio.com/wp-content/uploads/t-series-feature.jpg

http://dev.tviaudio.com/wp-content/uploads/c-series-feature.jpg

Share this post


Link to post
Share on other sites

Posted · Report post

Right i see, ok the only other option I can find using css for that is if you keep the 'contain' css you have inserted previously. Try the following to remove the black background and the shadow effect - http://screencast.com/t/AdcejRHENyU5

 

#feature_slider #feature-area {

    background: none repeat scroll 0 0 transparent;
    box-shadow: none;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Tried that. Obviously it works but you get a big white space above and below :(

 

Is there a specific height that the actual Graphic should be designed to? I know it auto adjusts, but at some point is there a cut off dimension? For example if you wanted a scrolling left to right Banner Ad and you used this to achieve that... But you want the graphic to be say 1140px wide X 80px tall... would the Featured areas height only down size to say 300px tall or 450px tall etc???

 

In other words if I use "Contain" to fix the zoom issue, but adjust my images height to the default height? Might there be a minimum limit of height in the JS set?

 

Does all that make any sense? LOL!

Share this post


Link to post
Share on other sites

Posted · Report post

Btw... I also have set the size of the image based on the size I set the content dimensions size to 1140px. My images are 1140px and I've even set the sites dimensions to the largest possible of 1340px or 95.7% so the content area is much larger than the 1140px sized graphic and I still get the same result.

Share this post


Link to post
Share on other sites

Posted · Report post

lol, you've lost me there.

 

There's no limit on the height that I can see, my slider image just keeps scaling down.

 

In the style.less the default height is set to 380px, so I assume all resizing works off of that base figure if nothing else is set.

 

I can't see a figure set in the js file, but if you want to check the reference files you can here - http://phpxref.pagelines.com/nav.html?sections/features/script.cycle.js.source.html

 

I will ask the core team and Simon to see if they can advise anything further on the actual design of the slider and the code used to see if there's anything else that could help.

Share this post


Link to post
Share on other sites

Posted · Report post

This is my current work around but obviously the black bars above and below are not desirable.

#feature_slider .fcontainer .feature-wrap.bg_cover {
background-size: contain;}

as opposed to the default:

#feature_slider .fcontainer .feature-wrap.bg_cover {
background-size: cover;}

post-23928-0-48123600-1367953658_thumb.p

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Ruby

 

If you've not entered an aspect ratio for the slider then it will the system default set for the aspect ratio. The slider code to re-size the image according to the aspect ratio kicks in once the page has loaded, which is why you're seeing the image change and zoom in.

 

You can edit this with css, but it would be best to set your own aspect ratio based on your image dimensions in either the sitewide settings in Pagelines>page options>sitewide defaults or in the page meta settings. If you find the slider images are stacked, use the following code to prevent this on load.

#page #feature-area {
overflow: hidden;
}

Share this post


Link to post
Share on other sites

Posted · Report post

James,

So... yes... I get the aspect ratio. But... when I do that wether globally or in page options... JS Cycle is broken. No Dots show up either. Just the first Div of content loads and though yes "overflow: hidden;" hides the elements from stacking... essentially what I have now is. First element is visible... All others are hidden and frozen.

 

I'm going to leave it as is and continue troubleshooting.

I've turned off all plugins and what have you and still no go. So the plugins are back on and the pursuit continues. JS??

Share this post


Link to post
Share on other sites

Posted · Report post

Ok I did the next Pagelines update to current and that brought the dots back and Cycle is scrolling.

 

Ratio though does not work to keep it from auto zooming. I deactivated everything.

Ratio should be 57:20 for a photo starting at 1140px X 400px and being responsively adjusted from there more or less.

 

I tried even typing in the same settings in both Page Meta and Sitewide Defaults. Even simultaneous so it's essentially duplicated settings in two areas.

 

Totally perplexed.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi again, what are you using for the aspect ratio figure? I've used one of your slide using 'Aspect Ratio - 57 : 20' and it seems to be showing the full slide without cropping. 

 

http://screencast.com/t/lLMlMtMI0

Share this post


Link to post
Share on other sites