This photography gallery created using a GeneratePress Block Element and GenerateBlocks is as simple as it gets: It is nothing more than a container in which the featured image is placed. The container does get a slight bit of padding, but nothing more.
To let the user know which photo they are hovering over, a few effects available in GenerateBlocks Pro are added. When the cursor hovers over one of the photos, it will slightly expand and a box shadow will appear. As this is a website and not an object in the real world, that shadow is white and not black.
This article is a continuation of my guide on how to build a photography website using WordPress, GeneratePress, and GenerateBlocks. I highly suggest you first read the article on why a managed WordPress host, such as Kinsta, is the best option for your photography website based on WordPress, how to build the structure for the photography gallery, and how to style subsequently that photography gallery.
Creating the content template in GeneratePress
As with all photography galleries I will be showcasing, this minimalistic option uses a Content Template Block Element. There are only two blocks in this Block Element: A Container and a Dynamic Image, which is part of GeneratePress. The Dynamic Image doesn’t need any adjustments other than selecting the size and linking it to the featured image.
To separate the photos in the gallery, a slight padding of 3px is added to the GenerateBlocks Container. In terms of effects, a slight Box Shadow and a Transformation are put in place. The Box Shadow will highlight the photo whenever the visitor moves their mouse over it, and the Transformation will scale the photo itself ever so slightly larger.
Adjusting the bottom margin
If you have been following my guides on how to build a photography website using GeneratePress and GenerateBlocks, you will be facing an issue at this point: a large margin will be appearing underneath each photo. Luckily, this isn’t an issue that can’t be dealt with. Because previously the CSS class wp-block-image had been assigned to the container, it was obviously using that class’ bottom margin. A few lines of custom CSS can solve that issue:
.wp-block-image {
margin-bottom: 0px;
}Simply insert these lines as custom CSS in the Customizer, under “Additional CSS”. Keep in mind, that this will be applied to all images. If you already have pages or posts set up, you might want to place already inserted photos in to a container and add a bottom margin that way.
