[Resolved] Creating a gallery (grid) from multiple posts, custom images

[Author]

Posts

[sharonL]

I am creating a gallery ...like a photo wall. I have an upload form where users can upload multiple images (with captions). These get stored in the custom post type gallery and are named by the title they list. hidden link

I want to display ALL of the images that are added to a certain category of ALL of the posts in that category. I want to display them in a grid (with captions) that is tight, without spaces between. When I set up a view to do this, each post has a gallery with however many columns I specify and this creates a lot of space in the "wall" of photos as some posts have 3 images, some have 4 and some only have 1 and so on. hidden link

Any advice on how to do this so that I can have tight wall of photos with captions on some?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I checked the link that you shared, but I don't see any images on that. Looks like I'll need to be logged in to see the gallery.

Can you please share temporary admin login details, in reply to this message? This will allow me to see how this gallery is set up in the admin area and suggest the next steps accordingly.

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[sharonL]

Just to be clear, I want to achieve a look more like the attached (but with flexibility to change the number of columns)

[sharonL]

No reply after 4 days?

[Waqar]

Thank you for waiting, as we had some unusually busy forum queue, after the weekend.

I was able to access the website's admin area, but the user that you shared seems to have a limited access. I couldn't access the section that a user with 'administrator' role can, including the Toolset view block settings.

Because the each 'Galleries' post item has different number of images, making the complete list look like a one singular gallery with a uniform space is challenging. This will require some custom CSS and/or JS code.

I can help you with that, but, for that I'll need to have access to make changes to the view's block. Can you please make sure that the temporary user that you've shared with me has the 'administrator' role, without any restrictions? This will allow me to suggest the changes and the custom code, accordingly.

[sharonL]

Okay I changed your access. Please try again.

[sharonL]

any luck?

[Waqar]

Thank you for enabling the administrator role access.

In your view 'avonmery', on the page 'Avonmore Berry Farm Walk Run for PF', I've made the following changes:

1. From the view's loop style settings, I selected the 'Unformatted' option.
( screenshot: hidden link )

2. In the view's custom JS section, I included the following script:
( screenshot: hidden link )

jQuery(document).ready(function( $ ) {
	$( ".js-wpv-loop-wrapper > .wpv-block-loop-item" ).hide();
	$( ".js-wpv-loop-wrapper > .wpv-block-loop-item:first" ).show();
	
	$( ".js-wpv-loop-wrapper > .wpv-block-loop-item > .tb-gallery > .tb-gallery--grid .tb-gallery__cell" ).each(function( index ) {
		if(index > 0) {
			$( ".js-wpv-loop-wrapper > .wpv-block-loop-item:first > .tb-gallery > .tb-gallery--grid" ).append('<li class="tb-gallery__cell">'+$( this ).html()+'</li>');
		}
	});
});

This custom script gets the image from all the different gallery blocks and appends them in the first gallery, hiding the rest of them.

The advantage of this approach is that the look of the gallery will still be controlled by the settings of the gallery block.