Streaming live at 10am (PST)

Messy gallery effect - Possible?


#1

Hey guys,
I have a question, this website: https://holliefernandophotography.com have some kind of messy/gallery-grid.
Is this achievable in any way with webflow cms?

The website above is using WordPress and I guess that the owner can update it by herself.

Thanks in advance! :slight_smile:


#2

Do you mean masonry layout? There are examples in the forum, please utilize the search functionality :slight_smile:


#3

Hey Sam,
First of all i would like you thank you for your quick reply :slight_smile:

After I did utilize the search function I didn’t found what I was looking for.

All of the examples I found are more related to the Pinterest grid style and less to the style in my example.
As you can see on the website I have mentioned the pictures are placed in a messier arrangement, and even overlapping each other.

Perhaps you have another advice for me?

Thank again :smile:


#4

Oh, those images are definitely done using something similar to masonry by the same author (packery), plus additional custom code that looks like this:

https://holliefernandophotography.com/wp-content/themes/hollie-fernando/library/js/scripts.js

A small part of the code showing use of packery:

	if ($(window).width() > 767) {
		$('.grid section').each(function(){
			$(this).packery({
				itemSelector: '.item',
				gutter: -50
			});
		})
	}

I don’t think you can arrange each item in a collection list just by using Webflow, as you cannot add individual classes to them.


#5

Thanks again Sam,
Ok got it.

If I won’t use Webflow CMS will it be possible to implement this plugin on regular elements?


#6

This site didn’t just use the plugin, but a lot of additional custom code.


#7

Ok thanks.

Any insight on a way that I can recreate this effect in a “dumb”/non-elegant way?(No CMS involved)


#8

Yes, you will give each item a different class, then use the positioning settings to place the item where you want them to display on the page.


#9

Thanks, I really appreciate your help :pray: