Support » Plugin: WordPress Slider Block Gutenslider » Support: Responsive Images?

  • Resolved triscariwebteam

    (@triscariwebteam)


    Support,

    I’m writing to see if it’s possible to have the images be responsive? Example, when I make the window smaller of my browser or look at the slider on my phone that the image resizes to the viewport. Right now it cuts of text in the images.

    Thoughts for a solution now or a feature to toggle this? Right now, if I inspect the element, adjusting this manually “–gutenslider-min-height: 60vh;” addresses the issue but I can’t hard edit this in any way.

    Thanks,

    Triscari

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author eedee

    (@eedee)

    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 9 months, 1 week ago by eedee.
    triscariwebteam

    (@triscariwebteam)

    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?

    Plugin Author eedee

    (@eedee)

    @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?

    Plugin Author eedee

    (@eedee)

    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!

    triscariwebteam

    (@triscariwebteam)

    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?

    Plugin Author eedee

    (@eedee)

    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

    Plugin Author eedee

    (@eedee)

    Hey @triscariwebteam,

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.