Jump to content

Archived

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

lazlo

Rev Slider Resize issue

Recommended Posts

lazlo    1
lazlo

Hi, 

 

I am trying to create a Rev Slider section to work in a similar way as the homepage slide show on Stussy.com..

 

I would like the Rev Slder to scale in height proportionately to the width, so for example, using an image 1500x577, it will resize to 800x307 on a 800px wide  and 2000x769 on a 2000px browser.

 

at the moment the image crops the head off the image I'm using on larger broswers and I can't resize the image without losing quality or change its aspect ratio due to teh shots composition.

 

help very much appreciated

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

 

The RevSlider section uses a CSS property called background-size and a value of cover. Cover scales your background image to be as large as possible so that the background area is completely covered by the background image. However, because of this some parts of your background image may not be in view within the background positioning area.

 

The Slider on the website you linked is using something called FlexSlider which is developed by WooThemes. Our QuickSlider is based on FlexSlider, so you may want to try using that instead of the RevSlider section.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lazlo    1
lazlo

Hi Danny,

 

Thanks for your reply - I've just added a quickslider section to my page but it is content width rather than full width which is required, is there a way to make the outer container expand in height to correspond to the scaled image's height, to make the whole slide image show without visible cropping?

 

best wishes,

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

QuickSlider shouldn't crop your image, it should just reduce the images height to match the width of the container you have placed it in.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lazlo    1
lazlo

Hi, sorry but quickslider is only content width, I need it to display full width 

 

"but it is content width rather than full width which is required,"

 

Is it possible for  the outer container expand in height to correspond to the scaled image's height, to make the whole slide image show without visible cropping?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Just added a modified version of the QuickSlider to my GitHub repo, it is a full width version of QuickSlider.

 

https://github.com/Dannyholt/fullquickslider

 

Simply download the zip, rename it to just fullquickslider and then upload it your child themes sections folder. If you do not have a child theme, then you're free to either create your own or use mine which you can download from here - http://dannyholt.github.io/skeleton/

  • Like 2

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lazlo    1
lazlo

Danny , Thank you so much for going to all this trouble..what a guy! pretty much bowled over, really appreciate this.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
LiveOutLoud    0
LiveOutLoud

This worked for me just now, with a similar problem I was having with RevSlider.  Good job Danny. 

You should upload this with the next version of Pageline

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • jagipson
      By jagipson+
      I am building a site on this url: http://www.recruiterwebsitedesign.com/hager/
      I have a couple questions about the Rev Slider. How can I disable the time completely? I am not asking how to make the progress bar disappear. I want the slider to only automate by the user clicking the left or right arrow. 
      The next question is I want to add a video file on all three slides. What I see is happening is I added one on Slide three. It looks like the video is just constantly playing in the background. So, when the user gets to the third slide it maybe half way into the video. Shouldn't the video slide start once the user clicks this slide? 
      The last thing is if my video is 5 seconds long can the rev slider automatically change to the next slide after the video is over? I could just change the time to 5 seconds on the rev slider but one could be 5 the other could be 10seconds. So, that wouldn't work. 
      Let me know what my options could be.
      Thanks
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
×