
I have been using NextGEN Gallery on my site since its first availability as a beta version plugin. I remember Alex Rabe writing on one of the forums that he would be releasing a new gallery plugin that would impress all users. He was right! I was quite pleased with the ease of organizing all the related images in folders and being able to display them consistently. I may be one of the longest users of NextGEN Gallery, if not the longest.
I still use it and am still very satisfied with it. But, at times, the basic thumbnail display may lack presence. A while ago, I asked Imagely if they would consider adding features like a wide-width display, but they said that it was not in the cards.
At that time, I had found a simple workaround to allow the gallery thumbnails to push their elbows out and spread their wings a little if the theme and layout allowed. That was under the classic editor era. The block editor broke that fix, and I had to find a new solution. I will share a few alternative ways to display the basic thumbnail grid. The options presented in this article may apply to the other versions of the plugin, but I have not tested it myself.
The NextGEN Thumbnails Block
Unlike many WordPress blocks, the NextGEN Gallery block does not have the option to change its width to wide or full to make it spread out or to apply a special CSS class to it. However, the new WordPress allows using nested blocks and this is what I used to add more styling to the thumbnail block.
There may be many ways, but I started with a basic columns block, set to one column. Inside that single column, I placed the NextGEN Gallery block. That was the starting point, simple and with no ill effects on the page. Due to the default margins and padding of the columns-block, the available space may become a little limited, and the number of columns displayed may lessen. That can be remedied using custom CSS if desired, but that’s not a problem for me.
Insert a Columns Block
The columns-block becomes the outer container, and its single column becomes the inner one. Set the number of columns to one and click inside the only column you have. There, you can insert any block you want, and pick a NextGEN Gallery block. When you select the outermost container, you can set its width to wide-width or even full-width and it will stretch outside the main content container area if your layout has room for that. The following screen captures show the structure; click to enlarge.
The custom CSS class in the advanced tab allows inserting any class you want. I have had that class, has-border, for a long time, to add a faint border around some images that may be on a white background. The light border you see in some of the screen captures is the result of having specified that class for the inner column. If you want to replicate the ideas, here is the CSS rule:
/* Add faint border on any block */
.has-border {
border: 1px solid #ddd;
}
/* Add faint border around images */
.img-has-border img {
border: 1px solid #ddd;
}
You need to add the above rule to your custom CSS using the method available to you. After that, for any block that needs that faint border, add “has-border” to the custom CSS field under the Advanced tab as shown in one of the screen captures above.
I have the results of setting the background color for various alignment settings, center, wide, and full as well as no background for align-wide set columns below. You can see a NextGEN Gallery thumbnail block aligned wide in an actual post, with a one-pixel faint border around it.
gia hung phuc
NextGEN Gallery is a good plugin for gallery!