[Support request] Edit photo from gallery with CSS

[Stefan]

Hello,

I would like to make a custom post with a gallery at the top. I also have a simple lightbox plugin installed so I can click through the photos.

However, only the first 5 photos of this gallery should be displayed.

They should be formatted as follows.
First picture 33% width and about 600px height
Remaining pictures 33% width and 300px height each

Img1 | Img2 | Img3
Img1 | Img4 | Img5

All other images should be hidden.

My idea was to use a Gallery (to make Lightbox work), and format the single images here with CSS.

Unfortunately I can’t manage to control the single images of the gallery in CSS.

Example (does not work):

img.galleryclassname:nth-of-type(1)
{
heigh: 600px
}
img.galleryclassname:nth-of-type(2)
…
..
..

img.galleryclassname:nth-child(n+4)
{
display: none;
}

I hope you can help me.
Greetings Stefan

[Fernando]

Hi Stefan,

You can try using a GenerateBlocks Grid Block in conjuction wih the WordPress Gallery Block. Example: https://share.getcloudapp.com/jkuOdN7b

After you’ve done so, we can then use custom CSS to make it appear more like the one from your reference site.

An alternative would be to look for a different Lightbox plugin that works with just images. Someone shared this before but I’m not sure if it works: https://wordpress.org/plugins/wp-featherlight/

Or, use a plugin for the gallery instead. Someone shared this for instance: https://wordpress.org/plugins/kodefix-lightbox-gallery/
Also see:
https://en-gb.wordpress.org/plugins/responsive-lightbox/
https://en-gb.wordpress.org/plugins/envira-gallery-lite/

[Author]

Posts