Support: Responsive Images?

There is a possible solution that is already being developed by us. I think you are talking about multiple slides per view? Slick (the slider library we use) offers a responsive option, that lets users set breakpoints and add the corresponding amount of slides, e.g.

responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
      }
    }

we will port that to gutenslider. Until then, you can only try to add media queries for the slide content, that will reduce the size of the text / other content based on the browser size

• This reply was modified 5 years, 6 months ago by eedee.

eedee,

Not exactly. What I’m more specifically talking about is when I resize my browser or look at the slider image on my phone. I need it to resize the width and height of the screen. The image is unchanged in size. So words and imagery in the image are cutoff and still blown up in size. Making more sense?

@triscariwebteam while I still do not understand completely, we are currently completely redisigning gutenslider from ground to give it more features and usability and think that your problem will be solved then.

However, to make sure we include the change you want, could you post a sketch or a screenshot of what you want to achieve? How many pictures are you showing at once? One? More? you want the picture to have the full screen width? or a fixed height?

Best,

Niklas

@eedee Below are screenshots of what I’m talking about. I am only showing one slide at a time and should have the screens full width but the image should auto resize based on browser width. If you look at screenshot one this is what it looks like when I make my browser smaller in width or look at it on my phone.

1. https://ibb.co/jGsKchS

In screenshot two, is what it should look like when the browser width shrinks or goes to a mobile phone. In order to get it to look like this I had to manipulate this line of code: –gutenslider-min-height:;

2. https://ibb.co/stN2BZR

Does this help more?

Yes, thanks for the clear problem definition. Wie habe the feature in our release list and it will come in one oft the next major versions (this month).

N

Great! I will keep an eye out for it!

Just following up in regards to having this feature added in? It’s been several months and I was wondering if this is an option that will be added soon?

Hey @triscariwebteam,

we are still working on the new major release, that will tackle this request as well as other open and closed requests in the forum. There was some delay because the developer became a father but we hope we will release it by february. Sorry for the delay.

Best,

Niklas

Hey @triscariwebteam,

v3 pro includes the features you were asking for. Check it out.