Jump to content
atcdomainsolutions

Rev Slider

Recommended Posts

atcdomainsolutions+    63
atcdomainsolutions

New to Pagelines and signed up for the DMS Developer package. 

 

Loving it so far but wondering if anyone knows the correct size that should be used for images for the Rev Slider?

 

I resize so they fit under the 0.5 mb size restriction but most images look distorted a bit or not as "crisp" as the sample images used in the demo.

 

I have tried playing with all type of sizes and have used high definition images but the images still look a little "off" (if that makes sense).

 

Thanks for any help!

 

James

Share this post


Link to post
Share on other sites
Rob    547
Rob

James, when any rescaling of images occurs, there's the risk of pixels stretching in the wrong direction. I'd recommend that you determine the max-width of your site, and set a height for them when creating or editing your images in your photo editor/graphics program.

 

So, if you want the slider to be 300px high, then make your images that height, and as wide if not wider than the layout. It's usually when the images are narrower than the width that the images are stretched.  If they're wider, the browser will simply crop the extra space off, keeping them from pixelating (stretched pixels).

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
atcdomainsolutions+    63
atcdomainsolutions

Thanks for the reply!  Will try this when I go back in to work on!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
The image size doesn't actually matter, as it uses background-size: cover; this means that if your image is for example 500x300, it will cover the whole RevSlider area. Of course it will look pixelated so the large the image the crisper it will look, but there isn't a need for an insane size image such as 1200000x50000000. Something with a width of 1200px should suffice. Just remember to watch the file size of your images. I recommend using an App called jPegMini.
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
atcdomainsolutions+    63
atcdomainsolutions

Ninja, I thought of that too when I first started using the slider and I made images EXACTLY 2000 x 800 (the recommended size for the slider) but it was rejected each time for file size.  I then decided to just shrink the image size down until I hit the 500k limit and that put me around 1000x500 or so but, as you mentioned, it's coded (slider) to fill the area and that led to a distorted image...even when using a really high def image.  

 

Then realized I needed to change the image type AND quality level percentage so instead of saving as .png's, I saved as a jpg AND moved the image quality down from 100% to 70%.  That took the file size of a 2000 x 800 image from over 3 mb in size to around 300k in size BUT you truly cannot tell the difference in image quality.  I then uploaded and it looks perfect. No distortion and it's the exact recommended size for the slider.

 

Problem solved :)  Was definitely frustrating at first but working great now. 

 

 

Share this post


Link to post
Share on other sites
psiencesociety    11
psiencesociety

I am struggling with this one. I created an image as suggested @ 2000W x 800H. I am able to upload it, but it crops the image so I cannot see the whole thing? So I guess what is the true size I need to make the canvas so the WHOLE image shows??

 

Going to make this a new post, dont know how to delete from this thread

Share this post


Link to post
Share on other sites
atcdomainsolutions+    63
atcdomainsolutions

I noticed mine were cropping a tiny bit from the top so you may want to do 1900 x 700.

Share this post


Link to post
Share on other sites
Rob    547
Rob

I guess no-one read what I wrote above. 

 

Your images will crop on browsers set to less than 2000px wide.  That size is to accommodate large screens with high resolution.  However, most computers have a lower resolution, and smaller screen size. 

 

Anyone expecting a 2000px image to fit into a 1370px wide screen is not thinking clearly.  If that were the case, the image would be crunched and look like a jumbled mess. 

 

Please, read what I wrote. ^^^


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
psiencesociety    11
psiencesociety

I guess no-one read what I wrote above. 

 

Your images will crop on browsers set to less than 2000px wide.  That size is to accommodate large screens with high resolution.  However, most computers have a lower resolution, and smaller screen size. 

 

Anyone expecting a 2000px image to fit into a 1370px wide screen is not thinking clearly.  If that were the case, the image would be crunched and look like a jumbled mess. 

 

Please, read what I wrote. ^^^

I read what you wrote, but there is no way you can predict or design for every individual's browser/resolution setting. If that was the way this thing is coded its a step back from what CSS accomplished. I am no coder, but from where I sit if I placed an image in the feature box within Platform/Pagelines, that images integrity, regardless of size, was a constant. Make the window smaller and it cuts off but does not morph and crop out the image. Maintaining the images full integrity is crucial in some cases where its not just simply a background repeating color. I have tried all variations of sizes and resolutions at this point and so far as I can see, the only way they (*the user) will see the image properly is if they make their browser just the right size....

 

So, if you are saying this is just the way its designed, what other options do I have, I am open to suggestions at this point to get my page working.

Share this post


Link to post
Share on other sites
nfp1900    29
nfp1900

I admit that the REV slider has a lot of potential but suffers from a few ugly settings.

 

Typing the slider text into that tiny box produces one long line of copy that runs right off the page when viewed in a browser...fortunately I found  if you add the <br> (line break) tag you can chop your sentence into readable chunks, albeit with a bit of a gap between each one. Each slide definitely needs  both 'title' and 'copy' boxes to be included to enable content to be easily added. 

 

Re: the resolution - I guess everyone is a bit stuffed over this and you have to aim somewhere in the middle. Pagelines used to lop the odd section off here and there. I think the images have to be just that - background images that scale without it being too important. 

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


  • Similar Content

    • Perry
      By Perry+
      Hello there,
      We are still using DMS 2 and were wondering if it was at all compatible with slider revolution. (https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380). Our issue is that the default revslider for DMS clips the top and sides of videos when made responsive. As the video is made smaller or larger the bottom of it tends to be cut off, or the sides are. We noticed slider revolution was 100% responsive, but have had numerous issues even getting it to display in DMS 2. We have tried using the shortcode, and various php scripts to no avail. Our last attempt was to try and load it with header scripts, but at this point we seem to be further away than ever. 
      This leads me to a few questions:
      1. Is Slider Revolution even compatible with DMS2?
      2. Is there a way we can get 100% responsive video in DMS 2 with zero clipping? (tonyrobbins.com is another good example of the effect we are trying to achieve.)
      3. If Slider Revolution is compatible, how do we go about adding it in?
       
      Thank you for any help.
       
    • vanessabt
      By vanessabt+
      Hi Developers, I wasn’t sure what the best way to get feedback was but didn’t really want to put this in the facebook group, I did put this in the slack developers group but trying to figure out the fastest way to get feedback.  I am starting a new site for a client and was looking through the showcase to see if there were any samples for slider modifications like I am trying to do for our build and couldn’t find them.  Basically I want to have a blue section at the bottom of each slide that has text in it.  The text will change with each slide along with the image.  Was wondering if anyone had any thoughts on how this modification could be made?  Here is a sample of the slider from the design.

    • paoloimperiale
      By paoloimperiale+
      Hi, 
      I was wondering if there's a way to modify the slider container size? My client would like it skinner- not as tall. How would you suggest doing that?
      Thank you.
      (this is for the paoloimperiale.com slider on the homepage) 
    • 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
    • crose
      By crose+
      Hi,
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      http://gator4088.hostgator.com/~asif/
      Thanks in advance.
      Chuck
×