Jump to content


Photo
- - - - -

Features Section w/ Over Zoomed Cropped Images

Features

  • Please log in to reply
10 replies to this topic

#1 rubyhaus

rubyhaus

    Advanced Member

  • Members

  • 40 posts
  • Framework Version:Always Current
  • Country: Country Flag

Posted 07 May 2013 - 04:14 PM

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.

Attached Files



#2 rubyhaus

rubyhaus

    Advanced Member

  • Members

  • 40 posts
  • Framework Version:Always Current
  • Country: Country Flag

Posted 07 May 2013 - 04:18 PM

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.



#3 rubyhaus

rubyhaus

    Advanced Member

  • Members

  • 40 posts
  • Framework Version:Always Current
  • Country: Country Flag

Posted 07 May 2013 - 07:05 PM

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

Please Login or Register to see this Hidden Content

as opposed to the default:

Please Login or Register to see this Hidden Content

Attached Files



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 May 2013 - 11:37 PM

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.

Please Login or Register to see this Hidden Content



#5 rubyhaus

rubyhaus

    Advanced Member

  • Members

  • 40 posts
  • Framework Version:Always Current
  • Country: Country Flag

Posted 08 May 2013 - 02:28 AM

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??



#6 rubyhaus

rubyhaus

    Advanced Member

  • Members

  • 40 posts
  • Framework Version:Always Current
  • Country: Country Flag

Posted 08 May 2013 - 02:50 AM

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.



#7 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 08 May 2013 - 03:40 AM

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. 

 

Please Login or Register to see this Hidden Content



#8 rubyhaus

rubyhaus

    Advanced Member

  • Members

  • 40 posts
  • Framework Version:Always Current
  • Country: Country Flag

Posted 08 May 2013 - 06:42 PM

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.

Please Login or Register to see this Hidden Content

 

Other images should look like this not zoomed.

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#9 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 08 May 2013 - 10:07 PM

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 -

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content



#10 rubyhaus

rubyhaus

    Advanced Member

  • Members

  • 40 posts
  • Framework Version:Always Current
  • Country: Country Flag

Posted 09 May 2013 - 04:10 PM

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!



#11 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 May 2013 - 04:43 AM

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 -

Please Login or Register to see this Hidden Content

 

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.







Also tagged with one or more of these keywords: Features