Webflow Filter and Sort Settings

okay now that we have listed some of our

movies let's take a look at how we can

start filtering some of these

based on the genre so if we go over to

our properties panel

click on the plus filters we can choose

from several types of

fields that we have created to filter

our content

so if i click on genre some of the

settings that it gives us is equals to

or does not equal to is set or it's not

set

so it's set means is there an existing

value on that field

and then equals it's just whatever the

value we put in here

so if we were to put in here drama and

save this filter

now we're only going to see the the

movies that are of

course tagged as drama so just about

three of them right now

another option for us to filter is that

it gives

us if we let's remove this filter

and it gives us the option to sort the

listings by

specific order we could filter by the

year

typically this works really well with

numbers

so if if it's filtered by year or if

it's filtered by the score

so maybe if we want to show only the top

rated we can show it like this

and so just like that we can see this

the lowest score over here

actually we don't have the score yet so

let's add in that

text field so let's add in here i'm

going to add a quote

and this quote is gonna pull the field

for

score so you can see this score number

is eight

and we can select the settings again

go from smaller smallest to largest or

largest to smallest

just like that and now this one is the

highest rated

so goes from nine and as you scroll down

you're going to see the numbers going

down

so that's pretty cool one thing to to

note is that the collection list

settings gives us the ability to limit

the amount of items we want to display

right so in this case going back to our

example we only want to show

four items even if the listing has a lot

we can show only four and just like that

just like that we can see that it's

limited to

our four value again let me put this in

four blocks right away you can see these

four movies laid out like that

and let's use an h5 like an h4

there we go that looks a little bit

better we're doing all these settings

and updates directly without creating a

class this is just for us to practice

and understand the different types of

settings

another interesting way that we could do

this is we could have

let's say we want to have maybe 16

items and instead of having those 16

items laid out like this in columns

we could add a paginate and what the

paginate does it it shows it limits the

amount of elements so we can turn this

into

four i'm going to remove this paragraph

because

it's getting a little bit busy but over

here we can see the covers

all right we have the four pages and

then preview

two out of four as you can use these

arrows to kind of swipe between these

pages

and this is something we're going to be

doing on one of our

templates as we see here there's a

pagination tool

all right pretty cool one thing to note

is that when you create

a collection what what webflow does

automatically is create a template

whatever the name of that collection you

created so if we open up our entries

template

this entries template is a dynamic

template

what this means is that whatever value

that we put in here let's say we have a

heading for example the h1

i can call this right away like that

without having to create a collection

list

because the collection list component is

to pull

data on other type on other pages that

we create

but the actual template the dynamic

template

allows us to preview all the movies

and have this work as the place where

users would come and play the movie

itself so think about it like the

preview page

this exact same template is what webflow

has created for us

already but it's empty so in this case

we would have to start

applying all the different styles

in order for this to start looking like

our wireframe so i've already gone ahead

and done that

so that we can see how to interact with

these types of dynamic pages so let's

jump into that