So, I’m having issues trying to get the Mix It Up plugin to work and show any of the blog post categories I have beyond the “All” setting. I followed the super helpful tutorial located here: mixitup-plugin Dynamic content
but I’m still at a loss on how to get the content for the different categories to show when I press the relevant buttons (and no other content) + do the same with the second row of collections (the grid of 3)
very simple - you don’t have a match for items. See this codepen (by chance this is mine):
The code is .mix and some extra “filter” class (“category-3” for example - in my example green or blue): <div class="mix w-dyn-item category-3" style="display: inline-block;" data-bound=""><div class="categ">
VS your code: <div class="mix w-col w-col-6 w-dyn-item" data-bound="" style="display: inline-block;">
Summary - you missing this part “Building the Container”
This is why only “all” works. (the filter works. but no items match)
Look again on your code VS tuturial. The categ problem you do this step wrong (follow again):
So we will give ID #container to the Dynamic List and class ‘.mix’ to the Dynamic item. Inside of each item we will add text field and connect its data to the reference field “Category”. In this example I give class ‘.categ’ to this field (later we will use this class name in the code snippet).
After you will make sure that filtering works, you can make this text field display: none *
Hey @Siton_Systems thank you for the suggestions. I’ve changed things up a bit but it still isn’t working. I think that the steps you’re suggesting I haven’t done correctly. It just can’t seem to hook onto the blog post items itself. How do you suggest to do that?
Hey @sabanna
Awesome! That worked. Thank you so much But for some reason, the filter won’t display any of the “music production” items in the category even though there are 2 posts within that category. Super odd considering that the other two work.
Lastly, I have 2 different collection list wrappers. One for 2 headlines content items and another for 3 other content items on that page. This is just to have a bit of a nicer design, emphasise some posts and help to break up the page. It works fine with the “all” filter setting but then on the other filters it has different behaviour on each:
DJ filter: it displays only 1 big content item and the rest beneath.
Events filter: it displays no big content items. Only small ones.
Music production: it displays no items at all but it never did.
I imagine the above is due to how each content item is indexed in the cms. I did set for the 1st collection list to only show the first 2 items and the other one to show from 3 onwards. Is there another way for me to achieve showing 2 headline items and then the rest beneath without this issue occurring?
the reason is that you “divided” your collection into 2 parts and limited them:
Filtering plugin is working with the content that already on the page and can’t know what more you have in your database.
You could use custom CSS for make first 2 items have a different width, but then it also will look weird if only 1 of them will be elected by some filter and other items in that filtered categories will have a smaller width.
That problem exists because this category has 2 words. The code snippet takes the text “Music Production”, “reads” only 1st word (until it meets the space character), lowercase it and create the classname for the item. So you get the class .music. At the same time, current code that creates dynamic filtering menu doesn’t do that and you have different classname in the data-filter attribute
You will need to change a little bit the part of the code that creates dynamic filtering menu, so it will do the same.
Change this
to this
// Adding data-filter attributes for filtering:
$('#dyn-filter-menu > div').each(
function() {
var catName = "." + $(this).children('a').text();
var select = catName.indexOf(' ') == -1 ? catName.length : catName.indexOf(' ');
var classCatName = catName.substr(0, select);
$(this).attr('data-filter', classCatName.toLowerCase());
});
the reason is that you “divided” your collection into 2 parts and limited them:
