Transcript
Introduction
In this lesson, we’ll cover utilizing the Gallery block to create visually appealing content on your site. The Gallery block allows you to easily add multiple photos and automatically arrange them in a gallery, making it perfect for showcasing portfolios, product images, or photo collections.
Adding and using the Gallery block
The cool thing is you can merely drag and drop a group of images from your computer, and they will automatically be added to a Gallery block. Or you can type forward slash Gallery and insert the block. Once done, you can upload an image from your computer or Media Library. Just a quick note, always remember to add alt text to images. Alt text is a short description of an image that helps people using screen readers understand what the image shows and helps search engines find and rank the image better. So, I will go ahead and select 5 images from my Media Library and then create a new gallery. When inserted, I will select the parent block, and when we go to Settings, we will notice that we can change the number of columns we want to see. Below that, you will be able to update the resolution of your images. And in this case, I will update it to full size. Something else to take note of is that ‘Crop images to fit’ has been toggled on by default. This option is useful if you have images of varying sizes and shapes. Cropping them will make the images in each row of the gallery the same size. You can toggle this option on and off to see which way you prefer.
Styles
When we make our way to Styles, we can update the background color of the Gallery block, and below Dimensions, we can change the block spacing between the Image blocks. We can add horizontal spacing as well as vertical spacing between the various blocks. When you click on the 3 vertical dots, you will be able to add padding and margin. Below Dimensions, you can also add a border or a radius to your Gallery block. Now that we have explored some options, let’s make a few changes. Firstly, I will return to Settings and then change the number of columns to 5. Then we can return to Styles and change the vertical block spacing to 0. Then, change the alignment of the block to full width. At this stage, it’s also important to highlight that the Gallery block is responsive.
Light Box
Next, I want to show you how you can add a Light Box to your WordPress site. A Light Box is a sleek feature that allows images, videos, or galleries to open in a beautiful overlay on the same page, as you can see in these examples. Let’s look at an example where the Light Box has not been added. When you click on an image, nothing happens. We need to head to the Site Editor to add the Light Box. So I’ll click on Edit site at the top. Make my way to Styles. Click on the eye icon to open the Style Book. Head over to Media, select the Image block. Then, in the sidebar settings, below Settings, we can turn the option on for images to expand on click. When you save, we can check it out on the front end. Now, when you click on an image, it opens up as an overlay.
Customizing a pattern
In the next example, I’m going to change the number of columns to 2, and then bulk select all the Image blocks within the Gallery block. Then, we can change the radius of each Image block in one go. Let’s look at another quick example. This time I’m going to change the background color of the Gallery block to black, add some padding or space around the images within the Gallery block, and then I will bulk select all the images and add a white border of 10 pixels in one click.
Examples
To end off, let’s look at a few more options at your disposal. Firstly, you can add a link to your Gallery block as well as a caption. When you select an Image block within the Gallery block, you can use the little arrows or movers to reposition the block to a new spot. When selecting an image, you can click Replace in the block toolbar to choose a new image from your Media Library or your computer. And when you select the Gallery block, you can click on Add in the block toolbar to add more images to your gallery. When you click on the 3 vertical dots, you will notice there’s an option to rename the block as well as to create a pattern.
Conclusion
All the best in using the Gallery block to create visually appealing designs.
Practical
Use WordPress Playground to test what you have learnt.
Step 1: Enable the lightbox functionality in the Style Book.
Step 2: Download 5 of these free elephant images: https://unsplash.com/s/photos/elephants?license=free
Step 3: Add the Gallery block and 5 images. Use the knowledge you have acquired to re-create the following three examples
Example 1
- Three columns
- Alignment: None
Example 2 (screenshot)
- One column
- Alignment: wide width
- Block spacing: 0
Example 3 (the screenshot is of the mobile view)
- Two columns
- Alignment: Full width
- Vertical and horizontal padding: XS
- Vertical and horizontal block spacing: XS
- Each image block received a radius of 50 pixels
