Hi, sorry for this question as it is more related to css than to interactions. Sometimes customizing someone else’s design gets “complex” easily.
So I am trying to make the hight of the slider container “responsive”.I am overwriting pgia-slider to have be hight: x vh or min-max hight, but it won’t work.
Before I reverse design everything… where is the hack?
Thanks a lot.
1 Like
Hi @red-rosefields,
I asked the same question and never got any reply! Yes it’s a fixed height design not usable for real responsive images. And just setting one height is very limited.
Regards,
David
mmm… Why create a interaction blueprint presentation slider and not make it responsive?
Yes exactly what I was thinking!
Maybe @matjaz can shine his light over this?
In the meantime I created a Bootstrap 4 slider With the help of @matjaz (for the interaction init) that is fully responsive with overlay text and Interactions.
The actual Bootstrap slider:
https://yourweblab.nl/interactions-2
Only needs a little CSS/Interactions/ media queries tweaking to taste (left aligned text or different animations) It’s fully responsive with picture and srcset and has art direction works on all devices and contains jpg with webp fallback.
To see the art direction you have to look in Chrome dev tools responsive app and watch phone portrait modes etc.
Oh! Nice.Thank you @AllMediaLab. Hopefully, someone from the PG team can @RobM “revisit” their blueprint(s) having responsiveness in mind in order to make them ready-to-use. Otherwise, having to reverse design everything to make an image slider responsive implies a lot of time which is the main point for having these, otherwise, fantastic blueprints.
For now, I think I will have to do without pg presentation slider. 
Have a good day.
Carlos
Hi @red-rosefields and @AllMediaLab,
Can you share a little bit more about what you are trying to do? More specifically Carlos, what do you want the slider to look like in the end? Are the images supposed to “cover” the slider with it changing in height depending on viewport? Or are the images supposed to be resized to maintain aspect:ratio within the slider?
Thanks,
Bob
Hi Bob,
I like to see the behavior of the Bootstrap Carousel, meaning to be able to use foreground images and the slider should adapt to the image with width: 100% and auto height just like this slider I created:
https://yourweblab.nl/interactions-2
That way you can use any image, responsive images and even <picture> <srcset> art direction and eventually Farkas Lazy Sizes:
The way the slider is made now is not flexible enough (literally!).
In short: A slider that can contain foreground images, width: 100%, Height: auto, Auto adjustment of the arrows and indicators etc. that adapt to the fluid design. Out of the box!
Hope it makes sense to you 
David
I think it makes sense, but to clarify. Say you had 2 images:
- 500x200
- 1000x200
For image 1 you would want the image width to be 100% of the viewport size and then the height to be whatever multiple of 200 to get the full image without clipping? And you would want the overall area that the entire slider takes up on the page to be that same multiple of height? Then for the second image, the overall slider height would take up less of the viewport height because it is a shorter image compared to its length?
Thanks,
Bob
Usually you use 1 image of one size, except in my example with <picture> & <srcset> I use 5 images different widths and height in the ratio 4:1 and 3 images with different sizes in the ratio 4.3. representing 1 image.
The width and heights gradually change from:
5000px X 1500px to 1400px X 420px ratio 4:1 landscape image
1200px X 1000px to 600px X 500px ratio 4:3 portrait image
But no matter if you only use one image the slider should adapt to that image in 100%width and Height:auto that’s simple to do with the Blue Print Slider except for the fact that the indicators and arrows and what else is not adapting to the image size and do stay on their place. (need auto adjustment)
I’m not saying to skip this version of the slider, because it will serve a lot of people who like to set and forget with one image, but for the serious web designers (that want to save bandwidth) you need a slider with auto height. Just have a fixed height and auto height version that’s very common.
When you want to use images of different sizes to show in the slider that’s a complete other story. Then you have to work with a outer-image element and a inner-slider element to keep the images in a certain size and height but responsive.
Hi guys I’m not sure if I’m totally clear about your issue but I want to put my feedback here.
Slider blueprint has a fixed height applied to the main pgia-slider block, this is probably done for presentation purpose so it’s not intentional. Also pgia-slide blocks has some styles that you want to change in most cases.
So if you remove the height from the pgia-slider it will adapt to the contents of the pgia-slide. Actually you don’t have to set height anywhere. But update the styles for pgia-slide to remove the CSS below
align-items: center;
justify-content: center;
You can also remove the background, as you would probably not need it.
Now add your content or the image inside pgia-slide with 100% width and it should work as intended.
I hope this solves your problem, do let me know.
Thanks @abirana,
The issue is not that I can’t change the CSS, but that it’s easier to have a slider with auto height produced by the application.
Can you please show a online example of what you mean (responsive image with overlay text), because I don’t understand your solution.
Like this slider I created out of a Bootstrap 4 carousel:
https://yourweblab.nl/interactions-2
I think he means this. Thanks, @RobM @abirana
Override the class .pgia-slides height property from predefined value (in this case 400px) to auto.
Bring the HTML src image and you give it a height, say height="420px". 4 Example <img src="header-wide-1400px-420px.webp" class="image-responsive-slider" height="420px"/>
Then set image to have object-fit: cover; height: 100%; width: 100%;
This actually works but you have to set the image src with a height in the Html so you can use height auto on the main slider container. .pgia-slides
like this.
https://zdc-studio.com/pg-test/
Oh I see now I understand! Thanks for uploading the example @red-rosefields!
Still prefer a out of the box solution with auto height so I don’t have to bother about individual heights of multiple responsive images.
Thanks! @abirana
1 Like
Thanks @red-rosefields for clearing that for me, when overwriting the CSS that’s what you need to do.
That’s similar to what I did on https://pinegrow.com/tutorials/creating-a-slider-with-interactions-2/ not on the base slider but on the example slider. But I did custom CSS on the slider classes.
Thanks @AllMediaLab ya I do think that would be more useful.
2 Likes
That is a nice tut there. On my to-do list.