Intro to Views - Creating Dynamic Lists of Content

morning good morning everybody so you

are in interpret views creating dynamic

lists of contacts very excited so my

name is Jake Anakin would be the

presenter today and we have a lot to

cover we're just gonna be going to

high-level introduction everything so

you're not going to get really detailed

on anything but you'll get to see some

of the capabilities that fuse can do so

I'm gonna have to talk fast so we can

get to construct contextual filters

which are really exciting those at the

end of the session so certain start a

little bit as I said my name is Jake in

the digital services librarian at

Madison Public Library in Madison

Wisconsin and digital services librarian

what does that mean I'm the web

developer for the library and in drupal

terms i'm the site builder i don't do a

lot of coding myself i do a lot of

configuring building so I've been doing

that for four years and so I built

Drupal websites for our staff for our

users I oversee daily web services

there's a broken link on the website I

fix it and train other users to actually

add content create documentation for

them and troubleshoot issues so today

I'm going to introduce you to views

we're gonna I'm gonna give you some of

the terminology we're going to go over

and look at what each part of the

interface of the drupal the views UI

looks like we're going to create a few

views of various configurations and then

look at a couple modules that extend

views and can make for some really

dynamic

expensive interesting displays so we're

gonna start gentleman Oh gage who's an

audience so who here is learning Drupal

for the first time or it's like a really

new user to journal okay great

who here has used Drupal for a little

bit but hasn't used views a bunch a

couple okay anyone say they're more

experienced really experienced at views

and is just waiting to six minutes days

okay I hope all of you get what you want

not a decision so we're gonna start just

what is views and because views is a

confusing term in Drupal because we use

it everywhere it's also a word that you

use pretty commonly so you might hear

someone's we know one would say this but

you could say after expelled views are

used views to create a bunch of new

views and those are all accurate

descriptions like uses of the term views

so we can talk about views as a module

so it's in core in Drupal Drupal 8 which

is great it's a contributor to 7 and

below and everyone use it in Drupal 7 so

it's great that is in court it is also

kind of described as the tool that we

use to create dynamic lists if you think

of it as kind of the user interface of

views I used views then when we're

talking about dynamic lists that means

the content changes based on what

content you have added new content new

filters that you add and we also use the

view term views to describe the list it

sets so the list of things which could

be content or users or taxonomy terms

blocks almost any sort of entity I'm

gonna use that term entity and

throughout the talk to talk about kind

of a a contained self-contained item

which could be a piece of content a user

and I'd like to say that it's not just a

list of things because when someone says

you can make lists I get a very specific

picture of what that means like I get

three dots and then that's my list but

with views you can create a series of

things so so any number of things in

some sort of order so these are all

examples of views so over on the top

left we got a list of content most

recent content we've got a list of users

in the middle we've got an RSS feed of

content that is also created with a view

and we've got a slideshow of content

which is also a few just a series of

images that scroll through so as I said

Drupal views is in core in Drupal 8

which is great and it mean and the

people who have built worked on core

decided to do something I think really

really makes sense now that the users in

core we should just build all of the

admin interfaces with views and so that

means that they're all they're all

available for you to edit which is

really powerful and very dangerous um

and so using views it's like just living

on the edge a little bit and so this is

the default admin content view that you

see when you go to just admin staff

content but we're gonna go over kind of

what each of the pieces of this you can

actually read because it's too small

we're gonna go the pieces of this and

I'm gonna talk about what each section

of this interface does and then we'll go

in later and actually build some views

so at the top of our view on the top

left we have a list of the displays of

the view now this is the second

confusing thing about views is that a

view is kind of a series of content as I

said but you can have multiple displays

of that series of content

to allow them to be created and built in

different ways and there's a number of

types of displays so there's a page

which has a URL you can go to it blocks

which you can add throughout on your

site on different pieces in different

regions of your site feeds like I said

an RSS feed there's so much more you can

make and then the reference views which

allow you to enhance the create like the

content creation forms by getting more

specific instead if there's nothing a

giant list of every thing in a specific

field so that's up in the top left are

the lists of the displays that you have

Oh in a really good example of why you

might have multiple displays on a single

view is you can think of like having you

know a standard blog the front page of

the blog is a list of you know the

recent posts that you've had kind of in

reverse order it's a teaser to the full

post but you might also want to have the

RSS feed for your blog so that's a but

it uses the same configurations as your

or much of the same configurations as

your page so you want to use it in the

same view so if you change anything it

changes to cross all the displays

instead of just the Bible you might also

want to have a block of just the five

most recent posts unlike just the titles

and put those on you know in a block in

the sidebar when you're looking at a

full post and if you use all of those in

the same view now this is great because

it's very powerful because it can change

things across many different spots with

just changing one configuration also

again very dangerous because you can and

will want to make specific changes to

individual displays and you have to be

careful not to make changes to the whole

view but so at the top left that lists

all of the available displays that you

have the admin content default view just

has one page and the top right the very

top is the view actions so you can edit

it change the title

delete it dangerous duplicate it great

so below that is the current display

settings so the current display is the

page that we're on and that has all the

options that we're gonna talk about in

we're going to go into after this but

have title format fields filters store

options and then the very top right is

the display options so above that you

can delete the whole view in this one

you can just delete the display and you

can keep the view itself or make

duplicates and actually a link to be

with the display as well below that is a

running preview of what your changes in

view are doing and so you kind of get

it's not meant to be literal but it does

get you are you to see what your changes

are but what effect they're having so in

the display configuration we've got the

display name and my default just goes to

the type of display it is so this is a

page so the display name defaults to

page and you can generally leave that

alone unless you add another page

because then the next one's just going

to be page two and you're gonna want to

change that so you can identify them in

the display list of the time below that

is the title of the view so or the title

of the display so this could be the page

title the block title the feet title

depends on what display you have bar

family everything below that is the

format now this is another turn that

we're going to use we're talking about

views is a view as I said it is a made

up of a series of things each of those

things views calls a row and so the

format you can choose how those rows are

displayed so by default in core you get

four types to choose from you get the

grid which is pretty self-explanatory

you get to choose how many columns and

it looks like HTML list which actually

wraps each entire view in a a list

element and then each

is its own list item so an ally tank

below that is a table which each row is

a row and each field that you have is a

column that's what the default content

view is the table and below that is

unformatted list which just wraps each

row in a div tag and that is the most

customizable I do most of my work with

unfermented lists because then I can

phim it however I want because it's just

a dip now below that there's nothing

here for the table view but for most

formats there's also a shell setting

which allows you to select the row style

and you just elect to have three options

so content fields or search results and

now content allows you to display kind

of the entity itself so if you have a

and using one of its I don't know

they're confusing term one of its

display view modes that's the term that

they chose to use even though views is

pink and when we're thinking about that

displaying a showing content that's like

showing the teaser format or the or the

the teaser mode or the full content mode

or the any custom mode that you add to

your set the other option is fields

which allows you to select individual

pieces of your entity and display them

in whatever order you want and not on

any preset mode search results is also

an option but I've never used it and

when I looked in the issue queue trying

to figure out what it's for it seems to

be broken so maybe don't use that there

are other ways to make search results so

I'm not really sure I'm never sure with

this one so below that if your display

or Yoram row style or format allows for

fields they'll show up there if you

don't if you're using the con

display room setting you'll get just

this little note that says the current

role fund doesn't support feels so great

that whereas you can select and choose

what actually shows up in the view below

that is the filter criteria so you

define which content is actually

included in the view because by default

a view is just a grabbing a like a base

entity whether that's content or users

or blocks or search results and then it

allows you to filter it to when in

almost infinite different ways to filter

to get a very specific grouping of

content in your in your view you can

also expose each filter to make it

interactive for your users and for your

staff below that is the sort criteria to

find what order they show up in you can

expose these as well to make it

interactive one thing to note is that

the table format also has other sort

options which allow you to like click on

the label field the field for them the

column label and then it will sort that

way so the table has other sort options

other than what's available right here

the middle section of the view is the

display specific settings and so this is

contextual based on the display you've

chosen so a page and a block are

different things so they have different

settings a lot of the same but some

different so for a page you have a path

for example because it has a URL a block

doesn't have a URL so you don't have the

path setting you can also add a menu

item right here from the view now of

course you could go back in later and

edit your menu and add a link to the

view with a specific URL but you can

create the menu item right here below

that is access permission so you can

define who can actually see this view

the default is just to anybody who has

the permission view published content

but you can change that to other

specific permissions

or it can be role-based below that our

header and footer stuff pretty

self-explanatory can add stuff to the

top of the view as to the bottom of the

view in Drupal 8 the no results behavior

are also here in Drupal 7 there over

here in the advanced column

that's where the no results behavior

again pretty self-explanatory what

happens when there's no content does the

view just not display does it show a

note that says like there is no content

right now at some and then below that is

the page and so the pager actually

defines how many items are in your view

and that also allows you to add and

define what happens when there's more

than that so you can have a pager and

just show 10 pieces of content but if

there's 11 what happens do you add a

more link to a different page that lists

everything do you have a mini pager a

full pager now over here in the advanced

settings which is collapsed by default I

think because they thought it was scary

maybe there are a whole bunch of things

we're not going to talk about everything

but I'm gonna go over each of those

they're some of most of those so there's

at the top is the contextual filters

which allow you to filter the view based

on the context of where it is or

variables that you're passing to it will

see an example of what that is at the

end of the session and I'm below that

are relationships which allow you to

grab fields from other entities that are

related to the content that you're

looking at a really good example of this

is relating content to the author that

created it so the student grant

additional fields about the author we'll

look at an example of that later on this

one below that is the exposed form so we

can change how that exposed filter or

expose sort options appear and display

and their their actions there's also

things like the machine

so for this display has its own you know

ID the you can just select whether it

uses Ajax or not

so whether when you change a filter or

click Next on the pager visit reload the

entire page or is just reload that part

of the page with the content in it

aggregation which allows you to do a

little bit of math sometimes um wanted

to squish content together and then

count them it also allows you to do some

sometimes can allow you to remove

duplicates sometimes below that there's

also like caching options query setting

options that are more kind of advanced

and then a fields for CSS classes where

you can add a class to just this view

you can also add classes to each of the

rows to individual fields it's great for

theming

alright so let's build some views okay

on my demo site that I'm going to show

you now it's got a now outdated version

of Drupal I installed just to

contributed modules so admin toolbar CH

so I have a drop down and view slideshow

along with its sub module view slideshow

cycle and of install the required jQuery

libraries so you're gonna the jQuery

libraries it's just an image but just a

couple changes to the site content

itself or the content types

so I added a field to the user entity I

added a new content type of location I

added a ending reference field to the

article content type that links to my

new location in content type and I

filled the site with some article

content from my library's website just a

little bit okay so let's go ahead and

open up my site so

as we can see it's just got the default

homepage on the front and this is

actually a view so we can edit this if

we wanted to but we're gonna start wanna

show you the whole process so we're

gonna create it from scratch

so we would go up into structure and as

I said I've installed admin toolbar so I

have that back down otherwise you just

click on structure and then click on

views okay and we can see a list of all

of the views that are on the site and so

many of these are the admin interfaces

which again that's great but if you're

gonna edit it I would highly recommend

duplicating it first so that you can

test your changes without breaking

something important so we're gonna go

ahead and click out of you and after

clicking this it brings us to this kind

of wizard to help us build the view

without having to go into all of the

settings so we're gonna give it a view

name I like to use this naming

convention so it is content and I want

to just show articles give it a

description Oh

article content and then our view

settings so we want to show the

alternate name that you owe like users

or blocks just kind of just

differentiating what the base entity of

the content is of the view is and so

that's what I'm saying I'm selecting

right here so I want this to be content

and I want it to be a type article and I

don't want to add a tag yet and want to

be sorted with newest first and so this

is going to fill in a bunch of the

fields in our air face without us having

to go through each one below that we can

kind of quick create a page or a block

I'm going to go ahead and open up the

page settings we get the page title I'm

gonna call it articles we get the path

I'm just gonna use that as articles as

well we get the format to choose what we

want to actually show as so we get the

four default that I said and I said I

installed the slideshow so that's also

an option

let's go ahead and make this a grid and

it gives us a couple row style style

choices to have frame so if we teasers

full posts files fields leaked titles

we're gonna go with the teasers oh there

we go

and I'm gonna change this to six because

I have eight pieces of content so I want

you to show show you what the page looks

like use a pager we can add a menu item

right here so that it to the main

navigation I'm going to call it articles

and we're going to click Save and edit

and poof wheeze out of you as we said

kind of here here are the page displays

then options we just have a page right

now we it gave us a title that we chose

it's a grid in teaser format it is the

filter criteria it defaults to published

content since we chose article it adds

this content type filter sorted by

newest first

the path is articles the menu item that

we added is right here and it uses a

mini major and if we scroll down we've

got our kind of grid format and this is

what the page looks like if you want to

change that to a full pager I would just

click right there and change it to a

full pager you know I got a bunch of

settings we'll just kind of skip through

those if I scroll down we now have you

know all the page listings as well

instead of just the next and previous

buttons question

yes we'll do that yeah the one thing I

do want to do is I'm gonna change the

column since I have six pieces of

content it makes sense to have three

columns so we're gonna do that they're a

bunch of settings in here that are just

for the grid format so a number of

columns automatic with alignment in

classes go ahead and click apply and now

when I scroll down I just have three

instead so I'm gonna click Save and

we'll take a look at what this view

looks like on a page to the grid or does

that CSS that you would hit through CSS

yes so that's what I was gonna say is

we've got our view like we can see

everything it looks kind of terrible

because the teaser format is not great

by default in the grid format but we've

got we got our view we've got our pager

up at the top we now have a new menu

item in the main navigation which was

cool but as you said this looks come bad

so let's go back and change the format

to unformatted list it's good because

that makes the pager looks or the teaser

looks a little better in that format so

to change the format we just click on

the format that we have right now and I

can choose from any of these options and

click apply now it brings us to the

unformatted list options which is

basically just add a class and we're

gonna click apply and now it looks like

this instead of our grid and go ahead

and click Save we'll reload this page

and now it looks almost exactly like the

homepage of the site and looks a lot

better

but let's say that we really liked that

grid format this is like I said the

teaser format doesn't look very good in

that grid format but we can separate

separate it out and just use the fields

style instead so when I go back and edit

this we're going to change the format

back to grit set it to 3 and we're going

to change the show row style from

content to fields and then there are a

couple rows style options but we're

gonna go ahead and click apply and now

when I scroll down

we've got just the titles because that's

what it defaults when you switch from

content to fields it just adds in the

title but so what things we might want

when I thought I want the image we want

a teaser of the body or a trimmed

version of the body and the tags so

let's go ahead and add that in and when

I click on add fields we get this modal

window everything in views is in a modal

window usually and there's a whole bunch

of stuff that we can add to this so you

can filter by category but even when we

select content there's still a ton of

stuff so we're going to use the search

bar so we're look for the image select

it we're gonna look for the body if I

can spell button and we're gonna add D

tags and we can see it it started this

little list of things are about to app

sure

so this first one is the actual tax this

one is the the Delta the order of the

tax so that's like you would get it's a

little confusing but it would be like

it's like the idea of the array for that

tag so if you have three tags on it the

like Delta for the third tag is going to

be two so delivered I've almost never

used the Delta in the fields section

we're going ahead and click Add and then

it brings us to the setting settings for

each of the fields that we've just

chosen now notice I select an image

first but it's giving you the body first

because it's inevitable order even that

in the order that I chose but for all of

the fields are about to add we can add a

bunch of things so we can add a label to

it we can choose to exclude it from the

display which would be useful for as

this says here grouping fields or using

as tokens in other fields we can combine

fields together which is pretty cool

click sorting for a table it's not a

table format so we don't worry about

that we've got the formatter and this is

based on the field type it is so the

body is a long text so we've got the

formatter of default somewhere your

trimmed returned we're gonna leave it up

default there also a bunch of collapsed

groupings of settings there's these

style settings which allows us to

customize the HTML of the field wrap it

in the new element so like I could wrap

the body in a details or a blockquote

element instead of its default based on

the template it's using we can also add

a class to just this field that would

show up on every row in our in our view

so they can style it very cool look at

the style settings this rewrite rule

results which allows us to override the

actual output of the field and make it

kind of whatever it was this is where we

would use tokens like we can add and

combine fields that were before it

we can also make the whole field into a

link which is not great for the body

code but can be really useful for images

that don't have links or making links

for specific items trim the field you

can also do it in the rewrite I like to

do this here because this has more

options so we're going to say 250

characters trim only a word boundary add

an ellipsis at the end and we can add a

read more link if we want and this is

the really important one field can

contain HTML if we just use this

trimmed format up here sometimes the

view that is delay outbreaks because it

doesn't properly close a tag if you have

rich text so my selecting this it'll

properly close the tags after it trims

that of our characters we can strip HTML

tags remove white space divert new lines

to break their break tags there's also

this no results behavior which similar

to the notary's also behavior for the

display we can set it to hide if there's

no content in it

or to show a little note if we want to

do that instead I'm also great about

this we can count the number 0 as empty

so why is that useful for boolean fields

mean when it's not selected in the in

the database it's listed as 0 it's not

an empty field but we can tell it that 0

is empty so that when we have a boolean

field it doesn't display and then when

it is selected it does display and I'm

tired of them to hide rewriting if empty

so we can change that off so we could we

could turn that off and have it rewrite

no matter what even if there's no this

administrative title just allows to

change the title in the interface and

that's useful because we add the field

multiple times and you could use

different for matters and labeling them

is very useful we're gonna go ahead and

apply and add the continue so I move on

to the image 1 it's got a bunch of the

same options except it's got a different

format or option because it's an image

inside of a body or a long text the one

thing that we're gonna change is going

to change the image style to large just

so that it doesn't bring us the whole

image you know it's gonna be in a grid

format so they're gonna be smaller so

they don't need to be huge and we're

gonna link the image to the cons that

the images partners so if you click on

the image goes theoretical weight we're

gonna leave everything else that

defaults and we've now got the tags

which that formatter since a tag is an

entity taxonomy term we can just have

the label which is just the tag itself

with a link to it or we can render the

entity itself and use one of its display

view modes again confusing but can be

really useful the

yes so in your content type so like you

have content types

you also have display modes for each of

those so like the base view modes for

content is like the full content the

teaser oh I made this address one RSS

for like users there's compact user

account and so we can actually display

the entire entity in the view instead of

just displaying its label this one also

has this multiple field settings and

that's because you can add multiple tags

to an article and so you need to tell it

what field of view what to do with those

multiple types by default it has display

them all on the same row so we can

uncheck this and have an article with

three tags show up three times each one

with a different tag but by default it

combines them together

and then it asks us what to do so we can

have just a list of the tags or we can

separate them with a separator and so

this is just a comma and a space so when

I click apply and scroll down we've got

my title that's already there the trend

body the image and my tags separated by

commas which is cool and the one thing

that I'm going to do is as the 40 by 40

yes so this is 40 by 40 and then shrink

down a little bit because it only fits

in a three column

but what we're going to do is just a

couple things that I wanna do before we

take a look at it on the site we're

gonna change the field HTML of the title

to wrap it in an h2 tag so on the click

apply when we scroll down now they're

much bigger much better for

accessibility because we now have h2

tags for each of them and I'm going to

change the order so we can add new

fields we can also change the order by

clicking on the Actions menu and

clicking rearrange so I'm gonna put the

came into the top and that's all gonna

change click apply I'm go ahead and

click Save I'm gonna reload this page

and now we've got this unformatted list

now again as you said there's like

fixing issues so what we can do is add a

class to this view and to use some

pre-made CSS that I added to the theme

so we'll be open up advanced and add a

CSS class example fluid grid for my

class name notice it doesn't have to

change anything in the admin theme

because I only added the theme rules to

the site theme know the head and click

Save

and we love page oh it's in a it's in a

grid alright so I want to change this to

on for many lists so that I can theme it

the way that I wanted to didn't do that

alright we'll go ahead click Save

now you've got this kind of a lot nicer

looking card layout again it's still not

perfect but it looks a lot better than

the teaser format that we said earlier

yes you know I don't know of any someone

else maybe although it's better yeah

yeah I own so I don't I don't know if

any that's built in the core

okay let's catch up with my notes

okay so we've got this view we've got it

a little nicer looking but let's say

that we actually don't want to show all

of the articles on the site we just want

to show articles that have this tag

reading we're gonna library so those are

the tags we have so I'm gonna go into

the view and the only thing we have to

do is add a new filter so in the filter

criteria we're gonna go ahead and click

Add again we get this giant list so I'm

just going to search for tags and the

first one not the Delta and we're going

to add and configure and then I would

get the option how we're gonna select it

we can even have a drop-down or an

autocomplete field I like to use the

drop down just so I can see you click

apply

and then now we get a bunch of operator

options so we can choose it to filter

for multiple tags to be one of multiple

tags it has to be all of them we can

have it selected so that things that

have or that don't have tags

we can just filter for those we can

filter for things that just have tags

there's just the sky's the limit but

we're gonna do is one of and scroll down

and select reading now notice we also

have this expose option which will allow

it to make it interactive

let's take a look that in an exam in a

little bit but if I could apply and I

scroll down there are now just three

items that have my reading tag and now

we can do that we could filter for just

about anything this is really powerful

but we're gonna go ahead and change the

settings for this and expose it so that

I can actually click we can what our

users select what content they want to

see so go ahead and change the label and

we're gonna leave everything else at

defaults by when I have it exposed the

defaults will I can select it to have a

default setting instead of just show

everything right click Save

and then when I reload the page oh I

didn't I yeah okay so we've got this

tags drop down that I can select and so

it's filtering right now to just the

reading articles I can filter it to just

the history articles and it reloads the

whole page and shows down filter to just

the events and now we have a whole bunch

yeah so this is this was with my

unformatted list this is a flexbox and

so when there's two it fills in the

whole of a lot of to fill in the whole

screen and when there's three it tricks

know yeah and when there's one I think

the Accord there's one equity event in

these eight fills up the whole thing and

that's just the flexbox CSS I chose

you i way to change that CSS right yes

so the question was in order to change

those kind of CSS settings you would

actually change those in the theme not

in the view right here and that's a lot

of scope of this okay so we've got that

we've exposed it

okay so we created view with an exposed

filter now what I want to go into is

adding a relationship to this view so

let's say that we wanted to add content

about we had information about the

author of the article to the view so

what I could do is like look in the

fields and look for stuff about the

author so if I type in author spell it

right there are only a few options and

the only one that really counts is this

authored by which actually just gives us

the username or the user ID of the

author which isn't helpful to people

looking at the same so what we can do is

add a relationship over in the Advanced

Settings so click add a relationship and

I'm going to type in author and so we

can select content author and this

allows us to relate to this content to

the user that created it now when I

click add and configure relationships

and we can change what to call it and

required everyone we're going to go

ahead and click apply and now nothing

actually changes in the view yet when I

scroll down but if I add a new field

there's now a new category in here

called user because I've added a

relationship to the user that created

the content and now I have a whole bunch

of new fields about the user and the one

that I want is this display name that's

the custom field that I said I added to

the user entity and this is just a plain

text field some time ago I could add and

configure and up at the top since I have

relationships we can now select to use a

relationship since this is a user field

it defaults to the to the author

relationship go ahead and click apply

and then now when I scroll down it has

this display name instead of a confusing

user name or user name so we've got you

know me Harry

uni with the next one and

to me again and so I could rearrange

this will put the author right below the

title click apply and save week and

let's go ahead and move it to events so

there's more stuff and then now we've

got a much more nice-looking information

about the user that created this content

so this was a custom feel that I added

to the user entity called display name

yeah but we can add the we can grab all

information about the user so their

email address when they were created

know if they're currently logged on I'm

you know a whole bunch of different

stuff okay now that's relating just to

the user that created this economy but

relationships can actually go so much

farther than that we can actually add

since this is an article and I said that

I added an entity reference field to the

article content type that links to the

location the location content type that

I created so the example of this would

be that I have articles I have library

locations

I have articles that might be about the

library location so I could link them

together and so I can add a relationship

to this view of articles and I'm going

to type in location because that's my

field name and we can link it kind of

both ways so we can either wing it to

the content referenced from the field or

the content using the field we want to

link to the content that's referenced

from it so the particle is referencing

locations we want a link to that so I'm

going to click add and configure and

apply and then now what I can do is I

can add fields about the location that

is referenced from the article itself so

I'm going to put in the address fields

that I added to the location again a

custom field on the custom content a go

ahead and click Add and I'm going to use

the relationship to grab the address

field from this content and click apply

and now when I scroll down the first

item doesn't actually have a location so

it doesn't have an address but the

second one happens at Central Library so

it's now pulling in the address from the

location content or the location content

piece of content it's rolling a little

farther Women's History Month there's an

event at I think that's a Sherman

library now here's the problem with

relationships we've got duplicates and

that is because this article is linked

to three different locations and views

interprets that as three different rows

of distinct pieces of content which it

kind of is in a way now there are a

bunch of ways there there are several

ways that we can attempt to kind of

remove these as I said there is the

aggregation setting which works

sometimes but can be a little confusing

it's much better for grouping and then

counting rather than collapsing but can

be used there is a setting in the query

settings for distinct which again works

sometimes it tries to make the entry

distinct but in this case as we'll see

it's still the same because they're kind

of distinctive because they have

different addresses we can

there was a great Drupal 7 module called

views distinct which allowed you to

filter on whatever field you want and

kind of and then choose what to do with

the content that has multiple fields

after you proofing them I'm still hoping

for a drupal 8 release but who knows and

so we can also add a filter on the like

Delta of the location rent reference and

so just choose you know the first one

that's referenced but then we're just

going to get one thing with one address

not great but can be use so sometimes

and in this case what I would do instead

of adding this relationship is add the

location

and instead of rendering just a label

which would be the library name I would

render the entity and use that custom

view mode of address that I created that

just shows well right now it shows the

title and the address and they would

probably get rid of the title but if we

add at this I'm gonna go ahead and

remove this other address and remove the

relationship so that it won't make the

duplicates anymore

and when I scroll down it's now showing

the rendered entity of the location with

the library location and the address

that's the custom View mode that I

created so it I I had selected leaving

it simple filtered but each of these is

like its own big article element so it's

going to be spaced out so I probably do

is change the multiple settings to like

importer an unordered list maybe no when

I scroll down we've know that this list

in stone I probably feel it a lot

differently yeah that's one option so as

I said you know relationships are hard

both times and so sometimes the best way

is to just not use a relationship and

use the new view modes that are in your

plate which is great for the new in

court

okay so relations are also great for

things that reference one thing like the

author there's only one author so you're

not gonna get duplicates like that all

right so let's make a slideshow because

that's a little easier before we go into

contextual filters

so we're gonna add a new block well with

some snake a page so we're going to add

a new page and we can see that it now is

called page two so I'm going to change

that so I've changed the display name by

clicking on it we're going to call this

page slideshow and apply and all we have

to do really great is just change the

format to slideshow and notice we now

have another display so now on many of

our selections or settings we're going

to have this option to change it for all

the displays or change it for just this

display and we want to change it for

just this display so that we still have

the old article page but we have a new

one with this my job so I'm go ahead and

apply and we have a couple options for

the slideshow format the sub-module this

new slideshow cycle is the only type

that I have installed if you have more

types you'd have a longer drop down with

different settings you can add a widget

and a pager or controls for the

slideshow we're going to leave that at

default for now just click apply some

things we'll need to do we could change

the title so particles slideshow and

again just this page change the path

articles legislature let's go ahead and

add another menu item so normal

Sly Joe main navigation and then now

when I scroll down this will start

cycling through the content and it looks

a little weird with like all the fields

that we had before so let's get rid of

everything except for the image so go

back up in the fields click rearrange

we're gonna get rid of the title get rid

of your name get rid of the tags the

location the body and just for this page

see you again dangerous good if I could

have changed everything

click apply it and now when you scroll

down it's just the image now the other

thing that we want to do is we might

want to add a pager and this can be a

little confusing at first because pager

for a slideshow what I'm talking about

is like it adds a a small piece of the

content that we can then select to like

bring up in the slideshow so we want to

do is add another image field that can

be formatted differently because we

don't want it to be the big one we want

to be much smaller so I'm going to add

the image field again and the only thing

that I'm going to do is change the image

style instead of the large one get

selected

I'm gonna make it a thumbnail and also

going to change the administrative title

so that it's different from the other

image so the pager image click apply and

now it shows up here we actually want it

to not display in the fields right now

this is a confusing thing but we can

exclude this and then use it in the

slideshow settings so now if we scroll

down it's not there right now but then

when I go into the slideshow settings

and scroll all the way to the bottom

we're gonna add a pager widget and it

tells me to select what field I want to

make into the widget and so I wanted to

be the pager image click apply and then

now when I scroll down

they've got the pager that I can click

on to activate and move through the

slideshow yes I wonder wonder if the

slideshow has a theme that works so now

I'm going to reload this page and we're

gonna see that there's now a new link up

here for slideshow by clicking on it

let's see yeah so that is a CSS setting

that you have - mm-hmm

okay so really simple just choose

slideshow from the format if you do then

solve everything and you can okay so now

the last thing that we're gonna do that

we have time for is to show how a

contextual filter works so what we could

do and what we might what we might want

to do for you know my library's website

is have the events that happen at a

location on that locations individual

page it should be great and we know how

to do this we can add a filter criteria

for that specific location and then have

a block that just has that and add that

to the location page for it now we could

do that we could create four blocks or

ten or 30 or 50 if your Denver Public

Library and have 50 branches but that is

a nightmare

to create that many blocks so what we

can do is we want to add a contextual

filter that says alright what page of my

on use that ID and filter on that which

is really powerful but so to do that

we're gonna go ahead and add a new block

and I'm going to change the title so

that it's helpful change it to this

black I'm going to get rid of all these

fields except for the title because

that'll be the one that's most useful

for this like a sidebar block of

articles just on this block I'm gonna

add in the authored on date and that's

something that's different interpolate I

wasn't confused about first created was

what it said in Drupal 7 was the name of

the lake when the article is created but

it's authored on in Drupal 8 so we're

gonna go ahead and apply leave it at the

medium format and then now we've got

just this table list I'm also going to

get rid of the tags for just this

blocked remove and I'm gonna change I'm

going to change the title so instead of

using the h2 the way that the Bartik

theme uses stuff in the sidebar it uses

h2s already so we want to use it have a

sub heading and so now we've got our

list and now we want to do is go over to

advanced click on add a contextual

filter and what we want to filter on is

the library location so we're in you

know the article we want to link to the

location that it's referencing in its

content

so I scroll down click on a field

location just this block

now we're changing a lot of things in

here so I mean we may have actually

wanted to create a new view because

we're doing a whole bunch of like

overriding this specific setting now

adding in textual filter doesn't really

do a lot at first because we need to

tell the view what to use as the

contextual filter and so really common

to do is click this provide default

value and the one that we want is this

Content ID from URL so we're telling

this view to you know grab this article

look at the location field and then look

at the ID based on the URL so look at

the path aliens and define what content

page work on and then show all of the

events that have that location selected

so we go ahead and click quite and now

when we scroll down there's nothing

there because we don't have a contextual

filter yet but if I add it in the ID for

one of my locations 9 is the node we've

now got just the articles about that

current library if I change it to 10 we

get a different list of articles that

are just at Ashland and 11 we just get

the ones at Hawthorne library so I'm

gonna go ahead and click Save

and since this is a block we now have to

add it to our page let me just use the

normal block structure so we go ahead

and go up here go into the block layout

and we'll put it over in the first

sidebar that's what Bartok does and if

we scroll down we can see the views that

I created

there's we just have this content of

articles one so that's the only block

that I've created and we just want it to

show up on the location content types

so when I go ahead and click Save it's

now there and then I can go to my

central page and over here in the side

part oh it's got that weird grid format

still so I want to get rid of that CSS

class for just this block so that it

just shows up in that list and reload

the page and now we've got just the

articles about this current library over

here in the sidebar and if I change it

to

Ashman it just has those two and this

works whether or not you know the path

alias or not so like if I go to node 10

which is Hawthorne library nope note 11

is a Hawthorne right it shows just those

articles so it's connecting the name of

the library with the ID yeah yeah it's

using yeah the path that you added to

the content to understand what the idea

of it is which is great so forth there

are a couple other things we can do with

the contextual filter which like if

you're not looking at the specific page

that you're on like that specific piece

of content but you can you can grab like

a raw value from the URL so like if

somewhere in the URL you have like the

idea of a tag you can grab that from

like say it's in the third um

component you can grab that to filter on

which is pretty cool but so I really use

this Content ID you can also use this

user ID so you can filter for just

content that the current user who's

logged in can see or like so you could

use that too what I've done on our on

our site is added in a table that has

all of the content that the currently

logged in user has created so that's on

their user home page when they first log

in so they can see all of the stuff and

just like go back in and edit it right

away okay

um so that is a lot of time we've got

through the contextual filters yeah

[Music]

so I've got a couple of things left just

a few view view modules that extend

views and I to do really cool things so

we added in the slideshow and that's a

contributed module there's a data export

which allows you to export content the

CSV I think is the most useful one so

you can just like grab all of them your

site export it into a PDF a CSV file

there's views infinite scroll which

gives you a twitter like interface like

you scroll to the bottom and then you

can have it auto load the next ten or

have a button to like load the next ten

which is pretty cool on the same page oh

and music export is in beta for Drupal 8

right now the infinite scroll is stable

entity queue which allows you to

manually select different types of

entities so specific content to add to a

list and then you can use that edit EQ

to populate your view so like we use

that for our main slide show unlike our

homepage instead of using the like

promoted to front page setting in the

content we have an NVQ that we just add

whatever we want to that's an alpha

version right now that does have a

company sponsor so I think that we'll

get to the stable version eventually

there are some calendars the main 107 is

just calendar but that does not have a

Drupal 8 release yet it's in it's in

development kind of if I don't know

nothing mincing um there are two full

calendar views modules that use the full

calendar javascript library full

calendar view is stable as of last night

at like 11:00 p.m. and then full

calendar is an alpha but those are those

one they're both like active development

being on them which is you know Drupal

modules do the same thing but yeah make

sure we need yeah which allows you to

use JavaScript grid that has a release

candidate and that's I'll show you an

example what that looks like and isotope

which is the dynamic filtering

javascript library and just to really

quick I can show you the Wisconsin Book

Festival site which is one of the sites

that I manage I didn't build it first

but this is what masonry allows you to

do so like each of these is its own

piece of content and then isotope allows

you to do this so masonry isotope

doesn't have a Drupal 8 version yet

that's also somewhat in development but

has a great Drupal 7 person okay I think

I think we're done

but does any questions

I've used using seven regular in it

trouble no so much right and start

getting an eight but I'm not positive

there's a book on abuser seven and break

bad readings because they came out but

in seven the first version w7 was

changed so the book was out of whack but

they said get the Drupal if there's a

Drupal eight use book together because

it was very similar to sevens like that

that books I would recommend more ever

more mastering and they go through all

those examples and the one way I had had

to learn this thing best was to actually

take an example go through and do it and

so the question or comment was saying

there's a great book called mastering of

Drupal eight views if you're interested

in learning more about views there are

also a ton of tutorials on YouTube there

are many actually several mid camp a lot

of them sessions on views from previous

years then I watch to help prepare get

to prepare for this session so that's

one thing that a little bit of time for

this but um watching Drupal cam

recordings from previous years great way

to learn right I think we have I think

that's it thanks