Link to home
Start Free TrialLog in
Avatar of Marisa
MarisaFlag for United States of America

asked on

Is serving two separate images based on viewport size possible with my current configuration?

The main banner image on the homepage is really huge. I'm trying to do some mobile optimizations, and I'm wondering if there is a way to serve two separate images based on viewport size based on my current configuration.  I know how to do that the traditional way, but the way this slider is set up calls the image up right in the slide (line 24) and all the css is set there was well.

https://www.stadriemblems.com/

I'd be fine with the image I have for lg, but then I'd serve a different sized image for md, sm and xs.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

If you are not worried about IE11 there is always srcset

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

You specify in the image tag which images to use at different viewport sizes.

Let me know if that works for you otherwise we can look at other options.
Avatar of Marisa

ASKER

Hi Julian. Thanks for that suggestion. It doesn't seem to be working, unless I'm doing something wrong somewhere. It's only showing the main image, banner-test2.jpg, no matter the viewport size or browser. To start with, I tried to basically keep the code as is to ensure I didn't mess anything up. The only thing I swapped out were the image paths.

This is my raw code:

<img srcset="{% static 'images/products-enamel-pins.jpg' %} 320w,
             {% static 'images/products-enamel-pins.jpg' %} 480w,
             {% static 'images/banner-test2.jpg' %} 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="{% static 'images/banner-test2.jpg' %}" alt="Image" data-bgposition="center center" data-bgfit="cover"
               data-bgrepeat="no-repeat" data-bgparallax="5" class="rev-slidebg" data-no-retina>

Open in new window



"View source" output:

<img srcset="/static/images/products-enamel-pins.jpg 320w,
             /static/images/products-enamel-pins.jpg 480w,
             /static/images/banner-test2.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="/static/images/banner-test2.jpg" alt="Image" data-bgposition="center center" data-bgfit="cover"
               data-bgrepeat="no-repeat" data-bgparallax="5" class="rev-slidebg" data-no-retina>

Open in new window


I only have this on my VM, not the live site. Not sure if it needs to be on the live site in order for you to help me.
Have you tried inside a <picture> element

 <picture>
  <source media="(min-width: 650px)" srcset="images/background1.jpg">
  <source media="(min-width: 465px)" srcset="images/background2.jpg">
  <img src="images/background4.jpg" alt="Flowers" style="width:100%;">
</picture> 

Open in new window

Working sample here

Further reading

https://www.w3schools.com/tags/att_source_srcset.asp
Avatar of Marisa

ASKER

That does work. The images change now when the viewport resizes. The only thing is that now the additional styling parameters are not applying.

alt="Image" data-bgposition="center center" data-bgfit="cover"
               data-bgrepeat="no-repeat" data-bgparallax="5" class="rev-slidebg" data-no-retina

Open in new window


Seems to be ignoring that. The cropping and zoom is all weird now, and it certainly isn't applying the "cover" or the "center"
It looks like you are using some other library on the images (data-bgfit - and other custom attributes).

Question are you observing these anomolies when you visit the page and then resize the screen
And / Or
When you resize the screen and then visit the page

If you access the page directly on different device sizes (as opposed to using browser emulation and resizing the viewport) do you get the same result?
(last post for the day - I will pick up responses in the morning)
Avatar of Marisa

ASKER

Thanks for your patience with this when you don't have the real-life example to look at.

The anomalies are there immediately upon page load. It seems as if what's happening is that the images are no longer responsive. They just start rendering in the top left corner and show up at actual size, meaning that on 1920 x 1080 monitor the right side of the image is super cut off, and on my 2560 x 1440 monitor, there is a gap on the right because it doesn't even stretch to the other side of the page. Resizing the viewport has no effect on the image; it just stays static at the same size and placement until the image switching happens. And then the new image also stays static as you make the viewport smaller. Whatever size the viewport starts out at upon page load has no bearing on the images. They look the same no matter what.

If you access the page directly on different device sizes (as opposed to using browser emulation and resizing the viewport) do you get the same result?
Not sure about that one, as my VM is only on my desktop computer.
If you inspect the image in the console what do you see?

I am guessing the reason is because the library you are using is not setup to use <picture> elements.

What are you using to display the images (library)
Avatar of Marisa

ASKER

I assume the library is revslider?

Nothing came up in the console for me when inspecting it. I uploaded a temporary duplicate of the page here. https://www.stadriemblems.com/index2/

I'm sure you'll be able to see what wrong with it in like two seconds.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Marisa

ASKER

This worked. Thank you so much! I really wanted to serve the exact same image, but at three different sizes. What I had in there was just a placeholder, but below you can see the final result of what I was going for. (also uploaded)

<source media="(min-width: 1200px)" srcset="{% static 'images/homepagebanner-full.jpg' %}">
  <source media="(min-width: 800px)" srcset="{% static 'images/homepagebanner-med.jpg' %}">
  <source media="(min-width: 1px)" srcset="{% static 'images/homepage-banner-sm.jpg' %}">
  <img src="{% static 'homepagebanner-full.jpg' %}" alt="Image" data-bgposition="center center" data-bgfit="cover"
               data-bgrepeat="no-repeat" data-bgparallax="5" class="rev-slidebg" data-no-retina>

On my 1440 monitor, the height seems to get reduced a little bit, but it's nothing I can't live with. On my 1080 monitor, it looks exactly the same as it did before. I also set my monitor's resolution to the full 4k for a minute just to see, and it looked fine on that as well. Thank you so much!
You are welcome.
Avatar of Marisa

ASKER

Hi Julian,
Turns out the full width thing is actually causing problems at certain screen sizes. It's fine at the set breaks, and the image itself is always fine, but the headlines now have weird placements. They vary greatly within the same media query. Below is an image of it looking weird at a certain viewport size, while a different viewport size that is still within the same media query does have it in the correct location. I'm not going to seek a solution for this, as I ended up just serving a single image for all sizes like I originally had, but I am going to ask a quick question, since you have helped me with many issues over the past 2-3 years involving this particular slider not cooperating or playing nice with just about any customization.

I am really tired of fighting with this slider. I have never dealt with something so uncooperative and maddening since I started doing web design back in 2001. Even you have been unable to find a solution to some of the issues I've had with it before, and you have always been able to find perfect solutions to every issue I've had that hasn't been related to that thing. That combined with the fact that we want to make some adjustments to the way we present our products in 2020 leads me to think I just look for a different theme that I won't have to fight with so much.

But here is my question. So many of these themes use Revolution Slider. I have been trying to steer clear of it, but I keep seeing so many references to the fact that it is the best one out there. That makes me wonder if it's simply the version/iteration of it the way it's configured in this particular theme that is so strange and hard to deal with. If a different theme used it, would it be less of an issue and more customizable? I was looking through some of my old questions and did see some comments from people along the lines of "Revolution Slider doesn't do this," and, "Revolution Slider doesn't do that," so I'm a little apprehensive. I was looking at the source code for some of the themes I like, and it's the same configuration as our current theme where you can only define four media queries and everything you want to do with it is forced within those parameters.

Sorry, I know that was along explanation. I hope it made sense.


User generated image
This is a difficult question to answer (for me anyway) - I typically don't use libraries like RS - preferring to rather code the functionality myself. I find libraries to be bloated and not always a 100% fit and in many cases I can build the functionality in the same time it would take to research and integrate the functionality. Obviously there are instances where this would not make sense but for the most part when it comes to sliders and image transitions I just code that myself. The point being I am not the guy to ask about alternatives.

Having said that sliders are tricky - especially when you want adaptive / responsive layouts. Different screen configurations make for some challenges in terms of fitting the image and scaling it and - as in your case- wanting to use different images for different revolutions.

I am pretty sure it is a problem that can be solved - I just can't give you a definitive answer on what to use in its place.

You can try posting a question asking for alternatives and see what falls out - other than that finding one / creating one would probably fall outside the scope of answers on this forum - you might get lucky though.

I would start with a search on "responsive slider srcset" and see what pops up. That might get you some results that lead on to a solution.
Avatar of Marisa

ASKER

OK, thank you so much for your honest answer. It does give me a direction to go in.