Masonry CSS

ggppdk
Offline
Administrator

5 years 2 months ago - 5 years 2 months ago #77175 by ggppdk

Replied by ggppdk on topic Masonry CSS

Hello

i wrote the code for this,

e.g. inside the file

category_items(_html5).php

we have code that looks for CSS selector
ul.leadingblock
ul.introblock

and for the above 2 cases it applies masonry JS, (for our module carousel layout, it is very specific with a unique Tag ID so it cannot effect you)
do you have such CSS class for a UL list in your template ?

This is the code in our blog layout

Code:

// ITEMS as MASONRY tiles
if (!empty($this->items) && ($this->params->get('lead_placement', 0)==1 || $this->params->get('intro_placement', 0)==1))
{
	flexicontent_html::loadFramework('masonry');
	flexicontent_html::loadFramework('imagesLoaded');

	$js = "
		jQuery(document).ready(function(){
	";
	if ($this->params->get('lead_placement', 0)==1) {
		$js .= "
			var container_lead = document.querySelector('ul.leadingblock');
			var msnry_lead;
			// initialize Masonry after all images have loaded
			if (container_lead) {
				imagesLoaded( container_lead, function() {
					msnry_lead = new Masonry( container_lead );
				});
			}
		";
	}

	if ($this->params->get('intro_placement', 0)==1) {
		$js .= "
			var container_intro = document.querySelector('ul.introblock');
			var msnry_intro;
			// initialize Masonry after all images have loaded
			if (container_intro) {
				imagesLoaded( container_intro, function() {
					msnry_intro = new Masonry( container_intro );
				});
			}
		";
	}
}

-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Last edit: 5 years 2 months ago by ggppdk.

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

5 years 2 months ago #77176 by ggppdk

Replied by ggppdk on topic Masonry CSS

Hello

i see that you have a copy of blog layout
and i see inside HTML source

Code:

<ul class="g-grid introblock ..">

so the default code is to make it masonry,
even if you removed the parameter from category.xml , the code inside the file will use the default for the parameter which is yes

So you just need to remove the above PHP code (my previous reply) from your
files
category_items.php
or
category_items_html5.php

Please Log in or Create an account to join the conversation.

horsey
Topic Author
Offline
Premium Member

5 years 2 months ago #77190 by horsey

Replied by horsey on topic Masonry CSS

Hello, thank you for the clarification! Masonry does a perfect job stacking the containers horizontal with absolute positions. Flex couldn't do that. Masonry has an option for "gutter" to add vertical space between items, I just can't find out how to apply it. But nevermind, I'll keep trying.

Please Log in or Create an account to join the conversation.