Masonry gallery with option "View more photos" or "+7 photos"

3 replies · opened Aug 25, 2020

EEchionltdAug 25, 2020

Hi,

So I would like to know, if we can limit the number of photos to display in grid or column say I have 10 photos and I only wanted to display 6 photos and then to view other photos I have to press "+ 7 photos" tile or "last photo have overlay message".

Is it possible?

Thanks

SSemicolon WebSTAFFAug 25, 2020

Hello,

Absolutely! Consider using this code:


	[
![attachment](images/portfolio/2/1.jpg)
](images/portfolio/full/1.jpg)
	[
![attachment](images/portfolio/2/2.jpg)
](images/portfolio/full/2.jpg)
	[
		
			
![attachment](images/portfolio/2/3.jpg)

			
				
					+ 3 Photos
				
				
			
		
	](images/portfolio/full/3.jpg)
	[](images/portfolio/full/4.jpg)
	[](images/portfolio/full/5.jpg)

This will definitely work fine. You can use this with any Grid: http://themes.semicolonweb.com/html/canvas/gallery.html . Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

EEchionltdAug 26, 2020

Hi,

Thanks for your help! really appreciate the quick response.:)

I've one more question. So if you look at my attached image "issue_1" then you'll find that if I use a long image then the "+3 photo" tile is cut off. However, it should be adjusting the size of thumbnail to adjust and fit itself within that area. This is not happening so can you help me to find the solution for this. I have only changed following from 600px to 530px as I don't want that large area to cover with the photo gallery.
.portfolio-single-image-full {
position: relative;
height: 530px;
overflow: hidden;
margin: -80px 0 80px !important;
}

My code is the same as yours just change the images with one long image. I have attached that long image as well.

image issue_1_1 is the one where I have used the smaller image then the thumbnail is fixing itself fine in the area but not if I use one long image.

All I want is consistency which is not maintained at the moment.:(

Thanks a lot:)

SSemicolon WebSTAFFAug 26, 2020

Hello,

The Masonry Grid or the Gallery does not fit the Elements according to the available height of the wrapping container. The Masonry simply arranges the Elements in the Grid according to their Widths and Heights. In your example, the Images should have same Heights so that it fits appropriately or your Wrapping Container should have a Flexible Height (height: auto;) in order to work correctly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard