Gallery - with 1 picture visible

(RW8.2x, Stacks4.0.1, Foundry1.3x)

Hi and good day,

I’m not sure if this is possible with Gallery:

To have only one image visible, as here:

https://d.pr/free/i/eye1W2

As a workaround I used pagination, but with Gallery better?

/

with best regards, Omar KN, Stockholm, Sweden

Have a look at the Slider stack.

https://foundry.elixirgraphics.com/documentation/slider/

1 Like

Thank you - yes Slider would be fine, however there is no way to set the WIDTH of an image to 50% or 60% so.

This in order to obtain a sharp image, with the appropriate size (area), too.

Maybe there is a solution?

/

with best regards, Omar KN, Stockholm, Sweden

I’m not sure why you’d want to reduce the width of an image. You should provide an image large enough to fill the largest area that the slider can scale up to.

If you’re talking about wanting the slider to scale only up to about 50-60% of the page width, then you can place the slider in either a margin stack or a container stack. With the margin stack, you can set the margin around the slider (thereby reducing it) for different breakpoints. The container stack allows you to set the maximum size (in pixels) that it can grow to, thereby restricting the maximum size of the slider.

1 Like

Thank you DLH, I’m doing it because it’s the best way (AFAIK) to have crip images: load them at ≈ double size, but publish them with reduced size: from 1200 px width to 600 px width for example.

(To anyone reading this, I’m still learning - so re: sharpness of images, all advice is welcome!)

margin stack, you can set the margin around the slider (thereby reducing it)

Yes I’ve tried it, but there is only a minor reduction of the image area, or am I doing something wrong here: Margin 20, Padding 20 = 40, then 40 * 2 = 80 px not more is possible, the image is still too large :

https://d.pr/free/i/mbfAw2

So I’m still not there yet.

/

with best regards, Omar KN, Stockholm, Sweden

Click on detailed margin/padding. You can enter any value you want.

You could also use a container stack and set the max width to 600px.

1 Like