Block Gallery to Carousel Lightbox WP plugin

Introducing a simple yet powerful Block Gallery to Carousel Lightbox plugin designed specifically for WordPress Block Editor! This innovative plugin effortlessly transforms your default Block Gallery into a stunning Carousel Lightbox with an eye-catching thumbnail display. A visually appealing gallery can captivate visitors and keep them on your site longer. Easy to use; Designed for beginners, making it accessible for everyone. Easily integrates with your existing WordPress Block Gallery, requiring no coding skills.

Carousel Functionality: Users can navigate through images in a smooth, horizontal carousel format, enhancing the browsing experience.

Lightbox Effect: Clicking on any image opens it in a beautiful, fullscreen lightbox, allowing for a more immersive viewing experience.

Thumbnail Navigation: Includes a thumbnail strip that allows users to quickly jump to any image in the gallery, making navigation intuitive and user-friendly.

Responsive Design: Fully responsive design ensures your gallery looks stunning on all devices, from desktops to mobile phones.

Demo

Adding a block gallery to your post or page using WordPress Block Editor is a fantastic way to showcase images visually. Here’s a step-by-step guide to help you through the process:

How to Add a Block Gallery in WordPress

Step 1: Access Your WordPress Dashboard

• Log in to your >WordPress Admin Dashboard .
• Navigate to Posts or Pages depending on where you want to add the gallery.

Step 2: Create a New Post/Page or Edit an Existing One

• To create a new post, click on Add New under the Posts section.
• To edit an existing post or page, click on the title of the post/page you want to edit.

Step 3: Add a Gallery Block

1. Click on the + Button:

   • At the top left of the editor, click the Add Block button (the plus icon).
   
   

2. Search for the Gallery Block :

   • In the block menu, type Gallery in the search bar.
   • Select the Gallery block from the options.
   
   

Step 4: Upload or Select Images

• Upload Images:
  • You can drag and drop images directly into the block or click on the Upload button to select images from your computer.
• Select Images from Media Library:
  • If you want to use images already uploaded, click on the Media Library button.
  • Choose the images you want to include in your gallery and click the Add to Gallery button.

Step 5: Customize the Gallery Block (Optional)

• Image Order: Rearrange images by dragging them.
• You can also add captions to individual images by clicking on the image and entering text in the caption field.
• Use the Block Settings sidebar to adjust additional settings, such as the number of columns or whether to display as a grid.

Step 6:

Configure Settings for conversion from Block Gallery to Carousel Lightbox

• After adding images, you will see options to configure your gallery. Adjusting the size of thumbnails and add the CSS class name to the Gallery Block:
  • Click on the Gallery block in the left sidebar you just added in your post or page editor.
    
  • In the right sidebar (Block Settings), look for the Resolution option.
  • Here you can select Thumbnail. This will ensure that all thumbnail images are displayed in low resolution.
  • In the Block Settings, open the Advanced section. If you don’t see the sidebar, click on the gear icon in the top right corner to open it.
  • In the Additional CSS Class(es) field, type atakanau_bgtcl_auto_container.
    
• Access the Images in the Gallery. In the gallery, you will see each image displayed.
  • Click on each image to view its settings.
  • In the floating toolbar, look for the Link option button.
  • Select the Link to image file option
  • You will need to repeat this process for each image in your gallery. The link to the images will allow the lighbox gallery to open larger images.
  
  

Step 7: Preview and Publish

• Click on the Preview button to see how your gallery looks.
• If satisfied, click on Publish (for new posts/pages) or Update (for existing ones) to save your changes.

Step 8: Review Your Gallery

• Visit the published post/page to ensure the gallery appears as intended.

Tips for an Engaging Gallery

• Use High-Quality Images: Ensure your images are clear and visually appealing.
• Add Captions: Provide context for each image to engage your audience.
• Keep It Organized: Limit the number of images to avoid overwhelming viewers.

By following these steps, you’ll have a stunning gallery that enhances your WordPress content!