Jump to content
Sign in to follow this  
rubyhaus

Features Section w/ Over Zoomed Cropped Images

Recommended Posts

rubyhaus    1
rubyhaus

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
rubyhaus    1
rubyhaus

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
rubyhaus    1
rubyhaus

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
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rubyhaus    1
rubyhaus

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
rubyhaus    1
rubyhaus

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rubyhaus    1
rubyhaus

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
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rubyhaus    1
rubyhaus

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • flaxpits
      By flaxpits
      Is there a way to use the whole image in the feature slider as a link? I have searched the forum and noticed in 2011 this was posted and the reply was no. Has anything changed in 4 years?
       
    • dfsdafd23
      By dfsdafd23
      I'm using features on the landing page of my website. My issue is that when the page loads the feature slider will resize itself every time. I've tried to tinker around with the layout of the site (static, responsive, %, px) and with the source images (not to big, the actual size) but it doesn't help. Any tips? 
       
      Here's a video of how it looks:
       
      https://dl.dropboxusercontent.com/u/766689/Features.mov
       
       
      Website URL: test.andersaagesen.dk
      Framework Version: 2.4.4 w. child theme
      WordPress Version: 4.2.1
      Plugins in Use: simple css lite, pagelines security patcher, contact form 7, backWPup
      Server/Host: unoeuro.com
    • chambermv
      By chambermv
      The features images are not displaying properly. The first image is blank and the second displays this script: if (document:)document.getElementbyld("divcb6b4a52").style.height = (441-440)+"px";
       
      There should only be 8 images to display, but it adds two images before that are blank and have that text I indicated.
       
      Website:
      http://chambermv.org/
       
      Platform Pro
    • avstrati
      By avstrati
      Hello 
       
      We've recently added the top rated Word Press translation tool WPML to our Website in order to translate our site into a second language. Everything worked like a charm, except one thing: the PlatformPro features. 
       
      Our home page was designed in English with the features slider and some text, using what is now the Select Feature-Set for Posts & 404 Pages option so that we could custom create our features. The features are tagged as default-features so that they may be selected to appear in the scroll. The thing is, we cannot translate them. 
       
      Can someone please help me figure out a work around please?
       
      Many thanks
      Kristina
    • vicdesotelle
      By vicdesotelle
      see of feature slider at http://wildbeyondexpeditions.com/ 
       
      1- how do i change position of feature slider text from left side to bottom of each pic? 
       
      2- how do i change font size of feature slider text? 
       
       
×