Gallery Block - Greenshift

Blog Staff

May 4, 2023

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.

Grid view for Gallery

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.

Custom grid options for gallery

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

Slider for gallery

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

Video in 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

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

<p>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.</p>

<p>Here are a few examples.</p>

<h2 class="wp-block-heading" id="grid-view-for-gallery">Grid view for Gallery</h2>

<p>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. </p>

<h2 class="wp-block-heading" id="custom-grid-options-for-gallery">Custom grid options for gallery</h2>

<p>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</p>

<h2 class="wp-block-heading" id="slider-for-gallery">Slider for gallery</h2>

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

<div class="wp-block-greenshift-blocks-swiper gs-swiper gspb_slider-id-gsbp-9dba5916-a711" style="position:relative"><div class="gs-swiper-init" data-slidesperview="4" data-slidesperviewmd="3" data-slidesperviewsm="2" data-slidesperviewxs="2" data-spacebetween="10" data-spacebetweenmd="10" data-spacebetweensm="10" data-spacebetweenxs="10" data-speed="400" data-loop="false" data-vertical="false" data-verticalheight="500px" data-autoheight="false" data-grabcursor="false" data-freemode="false" data-centered="false" data-autoplay="false" data-autodelay="4000" data-effect="" data-coverflowshadow="false"><div class=""><div class=""></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-scrollbar"></div></div></div>

<p></p>

<h2 class="wp-block-heading" id="video-in-gallery">Video in gallery</h2>

<p>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.</p>

<p>There are two ways to add videos. </p>

<p><strong>Inline video links (.mov, .mp4, .webm)</strong></p>

<p>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. </p>

<p>You can add such videos directly in the image selector or in dynamic fields.</p>

<p><strong>Youtube, Vimeo Lightbox videos</strong> </p>

<p>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.</p>

<p>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)</p>

<p>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</p>

<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/Edit-Post-Gallery-Block-‹-Greenshift-—-WordPress-2023-05-04-17-50-15-1024x681.jpg" alt="" class="wp-image-2853"/></figure>

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

<div id="gspb_infoBox-id-gsbp-76802454-cbcc" class="gspb_infoBox gspb_infoBox-id-gsbp-76802454-cbcc wp-block-greenshift-blocks-infobox"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text">
<p>If you use ACF gallery, you must select image ID as returned format for this option to work</p>
</div></div></div>

<p><strong>3d viewer inside Gallery</strong></p>

<p>Instead of video links, you can also use 3d files inside gallery. This will be replaced by either <a href="https://greenshiftwp.com/3d-model-viewer/" data-type="post" data-id="637">3d Web viewer block</a> or <a href="https://greenshiftwp.com/spline3d-viewer/" data-type="post" data-id="2733">Spline 3d block</a>. 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</p>

<h2 class="wp-block-heading" id="converting-stacked-view-to-smart-scroll-for-mobiles">Converting Stacked view to Smart scroll for mobiles</h2>

<p>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</p>

<div id="gspb_container-id-gsbp-daa4592b-c74f" class="gspb_container gspb_container-gsbp-daa4592b-c74f wp-block-greenshift-blocks-container"><div class="gspb_smartscroll"></div></div>

<p></p>

gallery, interactions