Wilhelm Petersson
asked 10 years ago

Hi,

I am wondering if rthe Wallpress theme is prepared for isotope or how would be the best way of configuring isotope on the theme without messing up the masonry.
I also want to ask if, if there is support for isotope, if there is any statistics connected to the isotope function.

Thank you.
//Wilhelm

3 Answers
DominicStaff
answered 10 years ago

Hi,
Fortunately, our theme does not support to compatible with the isotope.
Regards,

Allen
answered 10 years ago

@Wilhelm Petersson:
The theme does not support to compatible with isotope but i think , it can be done if you custom your theme. In my perspective, the best way to config it is that apply it to the category widget. Make a new category for isotope and masonry combine. You also need to config the class for each item by coding ( make sure it’s have 2 attribute : isotope and mansory ).

you can read more in these article:
http://isotope.metafizzy.co/
http://isotope.metafizzy.co/layout-modes/masonry.html

Thank you for your question, maybe it’ll be a good idea to update the theme. Glad.

nobita
replied 10 years ago

if you have problem with the masonry layout when you try to implement the isotope , you can try to refer to my answer in this link : http://www.designwall.com/question/image-based-issues/

Wilhelm Petersson
answered 10 years ago

Thank you for your answer.

I’ve used your answer to get the animated effect when the page loads, but I have a problem while filtering my "cards".

I think I have found a workaround (for this layout I´m working on at least) so I don´t have to use Isotope, if I can find out how to reload masonry after an event (click). I’ve tried your code snippets (see below), but can´t get it to work.

I have a function in /my_theme/assets/js/jquery.custom.js that filters the "cards" I am using that goes something like (I´ve shortened it a little):

jQuery(‘.selector’).click(function() {
if ("on") {
jQuery(cat).toggle();
jQuery(this).removeClass(‘on’);
jQuery(this).addClass(‘off’);
}
else {
//the same but reversed
}
});

I´d like to place some "reload masonry"-code in or after the if-statement Is this the proper way to do it?

nobita
replied 10 years ago

Well at first, i just think if you want to implement isotope, the layout can be broke so my code snippets just to make sure it’ll not be broken. You mean you want to reload the masonry after click event, that will not change page ? If you want that i can suggest option for you.

nobita
replied 10 years ago

I’m not sure about your situation so can i have a clearly look at it ? maybe your website or picture.

wilhelm
replied 10 years ago

Yes, exactly. I show or hide som elements with javascript and want masonry to arrange them nicely on the same page. 🙂

nobita
replied 10 years ago

ah , i see 🙂 , think in this case , you could use Ajax and PHP . You can use jquery to catch the category when click, send that category through ajax to the PHP file and then query the post with that category in that page.i think it my be a solution too.

wilhelm
replied 10 years ago

Yes, that´s what I´m doing, but the thing is I don’t get the card to re-arrange and I think the trick is to re-init masonry, but it won´t work. 🙁 I´ve tried different calls from the original query.custom.js-file. Do you know the magic call? 😉

nobita
replied 10 years ago

i think the point in here is about the content inside the masonry after you click your card and the action for masonry should be done after Ajax call. Maybe you should use this handle : .ajaxComplete( ) to call the mansory reload 🙂
try read more at here: http://api.jquery.com/ajaxcomplete/

nobita
replied 10 years ago

i think it could work 🙂

wilhelm
replied 10 years ago

Hi again and thanks for barring with me… I feel a bit stupid. I think you are on to a solution, but I´m not sure what the call should be.
The only way I get som functionality is with this code in the parent theme /assets/js/jquery.custom.js file:
//Ajax complete -> reload masonry
$container.ajaxComplete(function() {
itemSelector: item_selector,
isAnimated: true,
isFitWidth: true,
isResizable: false,
columnWidth: function() {
return (basewidth==0)?200:basewidth;
}
});
And this code in the same file in the child-theme:
//Filter functions
jQuery(‘body’).on(‘click’, ‘.search_check’, function() {
slug = jQuery(this).attr(‘id’).replace(‘filter-‘,”);
if (jQuery(this).children(‘.toggle’).children(‘span’).attr(‘class’).indexOf(‘filter_on’) > -1) {
jQuery(this).children(‘.toggle’).children(‘span’).removeClass(‘filter_on’);
jQuery(this).children(‘.toggle’).children(‘span’).addClass(‘filter_off’);
jQuery(‘.category-‘+slug).toggle();
}
else {
jQuery(this).children(‘.toggle’).children(‘span’).removeClass(‘filter_off’);
jQuery(this).children(‘.toggle’).children(‘span’).addClass(‘filter_on’);
jQuery(‘.category-‘+slug).toggle();
}
});

But that destroys the layout when the page is loaded and somehow overrides the animation feature.

This code is live on http://dev.wpwm.se/profil_wp/category/portfolio if you want to try it out.

Got any answers/ideas?

nobita
replied 10 years ago

Hi i realize some strange things in that site. the items there Are not masonry bricks( don’t have the class masonry-brick ) , some how that class attract to the <div id="item-search">. Well, i’ll try to work on this feature this weekend.That will be a very good improvement for the theme. Thanks.

wilhelm
replied 10 years ago

Yeah, I just realized that I somehow killed the masonry. Do you have an example how to use the .ajaxComplete()-call?

nobita
replied 10 years ago

$( ".someclass" ).click(function() {
//You will do the Ajax here to get all the Item you need by query them out, put them in the masonry class that wrap them( item_selector )
});
$( document ).ajaxComplete(function() {
$(‘.item_selector’) .masonry( ‘reloadItems’ );
});
I can advice you like this : the point here is the Item you will have after Ajax Call.

wilhelm
replied 10 years ago

Thank you again, but I just realized that there is no ajax call in the filtering function. It just toggles the categories. So I´ve made the function (for now) like this:

//Filter function
jQuery(‘body’).on(‘click’, ‘.search_check’, function() {
slug = jQuery(this).attr(‘id’).replace(‘filter-‘,”);
if (jQuery(this).children(‘.toggle’).children(‘span’).attr(‘class’).indexOf(‘filter_on’) > -1) {
jQuery(this).children(‘.toggle’).children(‘span’).removeClass(‘filter_on’);
jQuery(this).children(‘.toggle’).children(‘span’).addClass(‘filter_off’);
jQuery(‘.category-‘+slug).toggle();
}
else {
jQuery(this).children(‘.toggle’).children(‘span’).removeClass(‘filter_off’);
jQuery(this).children(‘.toggle’).children(‘span’).addClass(‘filter_on’);
jQuery(‘.category-‘+slug).toggle();
}
if (confirm(‘Masonry?’)) {
jQuery(‘.item’).masonry(‘reloadItems’);
}
});

The "confirm" statement should keep Masonry from reloading until I click "OK", right? But it does´t seem to work. 🙁
http://dev.wpwm.se/profil_wp/category/portfolio

nobita
replied 10 years ago

cannot call methods on masonry prior to initialization; attempted to call method ‘reloadItems’.. this is in the console tab.
And because the way you resolve this problem not like my idea so it’s a bit confuse for me then :). And i think removeClass() will not make the item remove from the masonry, it’s just hidden. in my opinion i think this could be done easier with isotope 😀 it’s only need to put the right class to each item 🙂

Powered by DW Question & Answer Pro