Gallery Block

This is a variation of the Dynamic Gallery block where you can add static images uploaded in the media library.

Gallery Block and Dynamic Gallery Block have a lot of functionality to style your image grid. This includes a selection of columns, sizes, grid options, shadows, borders, and CSS transitions.

Here are a few examples.

Custom grid option can be achieved by setting custom grid option for each item in grid. For example, you can span separate image to fill several grid columns.

In this example, I selected to span 4 columns for the fourth image and for 2 columns for 3 images. You can also span Rows and even set a custom range for each image. All options are responsive-ready, so you can set different rules for each resolution

You can easily convert your image gallery to the slider with one click (and back to the gallery)

Product Gallery, Dynamic Gallery, and Gallery blocks in Greenshift support attaching video in the gallery. You can attach .mp4, .webm, .mov video links. Also, Vimeo and Youtube are available for lightbox preview.

There are two ways to add videos.

Inline video links (.mov, .mp4, .webm)

These links can be added directly in the gallery with autoplay (muted). Voice-enabled videos will play if you click on the video with an enabled lightbox.

You can add such videos directly in the image selector or in dynamic fields.

Youtube, Vimeo Lightbox videos

Video links will be converted into a video player directly in Gallery and Youtube links will be visible as images with a play icon, click on the icon will trigger a lightbox with the video player. Please note that this option requires enabling the Lightbox option in the gallery block.

To attach a video, click on the image in the Media library and add a link in the image parameters. Once you attach a link, this image attachment will be converted to video in all places where you use Gallery blocks. Here is an example of both videos (inline and Youtube)

Here is a screenshot where you can attach the video to the image. You can do this when you select images for Gallery. And also in the Media section of the admin area

Once you attach video to image, all gallery blocks will use it if you select this image in dynamic fields.

If you use ACF gallery, you must select image ID as returned format for this option to work

3d viewer inside Gallery

Instead of video links, you can also use 3d files inside gallery. This will be replaced by either 3d Web viewer block or Spline 3d block. So, supported file formats are GLTF, GLB, Splinecode. Image will be used as placeholder before 3d is loaded. 3d Viewer will be used only on Frontend Part of site

Converting Stacked view to Smart scroll for mobiles

Galleries can be converted from stack view to scroll view on mobiles. For this, place your Gallery inside Container block. Enable Smart scroll option and add next class “gspb_gallery_grid” as custom scroll container. Then, you can enable Breakpoint, if window has less width then breakpoint, gallery will collapse to scrollable container. Check this gallery on mobile

Copy this post’s content
Copy code below, and paste it (CTRL+V) in content of page