Koha-US The Terrific Every-Other-Thursday Training Videos, 1 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: TTEOT Training Video - S1E15 - jQuery & CSS: Placards

Description

It's time to boldly go where no man has gone before - or at least no Koha OPAC has gone before. Join us this week as we explore strange, new worlds with our hosts while they show you how to add placards (information panels) to OPAC search results for items outside of your normal collection. This is an episode that even Jean Luc Picard would be proud of. (Or is that Jean Luc Placard?)

Referenced code: https://wiki.koha-community.org/wiki/JQuery_Library#Add_database_placards_in_search_results_based_on_keywords_.28v20.x.29

Music: https://www.bensound.com

A

A

So hello, everybody, this is uh captain george williams and since we're beginning the month of april, uh we've chosen star trek the final frontier by diane carey to be this month's star trek discussion book, and we have of course chosen this book for april because it features captain robert april, who was the captain, the enterprise before captain pike and, of course his first officer was george kirk, captain kirk's father.

A

um So if you've uh never listened to one of our podcasts in the in the past, the way that this works is in each episode, we'll do a close reading of one chapter every day for the entire month and we'll include separate, shows, of course, for the prologue and the epilogues. This book will take 28 episodes to discuss um each episode's about you know 60 to 90 minutes so be prepared.

A

um I know that we don't always like to cover things that slowly, but you know we've only got a month to do this, so um I, of course, will talk about uh the social uh and historical um uh time period in which the book was written, which is 1988. So this is right at the beginning of star trek, the next generation and how that affects the content of the book and uh with me, as always, is patrick. Who was going to be talking about uh wait. A minute.

B

George, okay, george, that's enough!.

A

What's wrong hold on a second well you're, not patrick.

B

Exactly it's christopher, oh, am I in the wrong.

A

Recording, maybe that okay where's my calendar- oh that's this afternoon, okay! Well, this must be quahog us hold on a second, that's much better, all right! I'm ready for quahog us now.

B

All right well, that was that.

A

All right, so actually you know, I'm I'm not. Captain george wins, I'm george williams, I'm the next search catalog coordinator for northeast kansas library system and.

B

I'm christopher brandon, with the cooperative information network and uh the coeur d'alene public library today we're going to be talking about uh panels search panels.

B

This is uh something that was uh that I dreamed up back a couple years ago at an actual koha us conference uh on my off time, and uh so we're gonna be going through that today, but first as.

A

B

A

Remember you doing that you didn't actually do a presentation on it. Did you you I.

B

Did a brief, I did a brief show off on it. Yes yeah after I had come up with it, but um but uh first, let's uh talk about uh kaha us koha. Us is uh a great website uh for our uh uh affiliates in the us, or even those that are not that are curious about what we are doing. um Kohai us.org is the website and you will find all of our videos on the learn from koha us page.

B

Click on the koha us videos, it'll. Take you right there with all the great uh uh training videos that we've done so far. Although there's a typo in there, I have two episode 13s. I I need to fix that it should say 14. we're up to 14. Now this one will be very unlucky now yep, yep anyways, um so all of our great videos are on this page and today, as I said, we are going to be talking about panels. What are panels you may ask.

A

uh I've been calling them placards in our system, but panel works.

B

You know what I've been calling them placards too. I don't know why I just started calling them panels.

B

A

Yeah, sorry about that, I I'm getting prepared for this afternoon.

B

So panels placards whatever you prefer to call them, maybe just call them nuisances. I don't know um what are placards okay. Let me give you a brief uh demonstration of this. I actually had it up here um when you, when you do a search in the cohab catalog, and this is only I've only designed this for the patron side.

B

I I don't annoy staff with this this sort of thing, uh but uh when you do a search in the catalog, you get some great results, but we had some resources that weren't showing up, because we don't catalog them like some of our databases.

B

So, for example, um we have a news archive where we actually have local archives of old newspapers, and that does not come up. But if you search for.

B

Newspaper you'll get your regular results, but uh one of the results is going to be what we call the placard, and this uh is plugging our our archives. It has more than newspapers, but one of the key words that it comes up with is a newspaper.

B

I could do the singular or plural version of the word uppercase or lowercase I can do. I can. I have not only news in there but our newspaper, but I have news. I have uh quarterly press which is one of our papers. That's uh in there uh so.

A

So you're defining the keywords. Yes,.

B

You can define the keywords, and so this is what we're going to be showing off today. um It's still a work in progress, there's still some things I have to to tweak out it in it, and you know once we get the the code on the uh the library by the time, this video posts, hopefully I'll, have some of that uh uh cleaned up a little bit more.

B

uh I needed to revamp a few things just because of newer versions of coho and trying to make things a little more uh dressier and also the code more discernible as to where you plug things in when.

A

I, when I put it together.

B

Originally, uh it was just thrown together and I knew how to put things in there, but I wanted to make it a little bit more user-friendly for everybody. So I've been uh tweaking the code a little bit and I'm still, uh you know finessing that just a little bit, but it it'll be there by the time that this video is posted and I'll have links to it. In the uh the learn page.

A

I think code is a little bit like uh you're. Never gonna be really finished with it. There's always something you can change. You can always change something in it.

B

A

But I like this, I like the logo. I like the the way that it stands out. It's got the same background that you've got for your overdrive. uh Built-In overdrive, plug-in background, so.

B

Yeah and that that's a little bit more, that's another modification, it's not covered uh today, but yeah that you know I I have uh modifications up there for for that, so that that link stood out a little bit more. But um I want to also go into. Let me do another search here, and that was we have a service called mango languages, mango languages, and I have keywords for like you know.

B

If you search for french or spanish uh or chinese, um I I didn't put in every language in there, but if you search for those languages, uh it'll also come up on the results, this one's uh a little bit different because the content includes uh you know specifics for specific libraries in our group because they have their own sign-in panel right.

A

So you need to go to a separate page for those different libraries to sign up correctly.

B

So they'll you can choose which library group that you're with and it'll take you to the appropriate sign. In page.

A

That's cool I like to drop down. I I never thought of doing that with this, because we have some services here that are available at some libraries, but not all libraries, and so that would be a way of of adding these placards for those services just for certain spaces.

B

Right, you know, because you know you could be doing a search in the catalog and not necessarily logged in, and it's not going to know you know which library you're with right. So this is a good option for for something of that nature.

B

So let's we're going to play with this uh in the the koha us demo, okay website.

B

And there are, there are a couple sections for this. um First we're going to start off with some css. I have some css I'm going to plug in here. First, this just defines uh some layout this. uh This will show the the light yellow background in my example um in the border and give it a little bit of a radius and a minimum height and lay it out so that the um the it's it's in two sections. It's got a left section in the right section.

B

The left section will uh be floating to the left and the right section will be next to it. So it'll lay it out nicely.

A

B

um I also I have uh I defined a a class for the cell that it's in because I don't know if you noticed. I took that that cell out, um depending on where you you place it, it might land. You know if you decide.

B

Oh, it's uh it's going to be on the third result: it's not going to be a second result or it might be the first result wherever you place it, if it has that uh if it lands on a cell that has the the gray background that would show behind it, and so I just said I I don't want anything uh to show behind it.

A

Okay, that makes sense, because that way, yeah.

B

So that's pretty much all there is to the css I'm going to be tweaking this a little bit because well I'll go ahead and show it. um I have another service on here and I have to to tweak this. So I.

A

Notice mango's got the outline is broken in the upper left. Yeah.

B

There's and that might be a symptom of the.

A

Same problem, you were showing me.

B

Yeah, uh so you know I I need to tweak it so that it will properly size the the image to fit in there. So I'm still getting some of the the image uh settings down on this and by the time that this video video posts, hopefully I'll, have that that portion fixed in there. So the css will be slightly different, but it gives you the gist of of what we're doing with that css.

B

All right, so I'm going to do a search in the demo site. We have plenty of results, but we don't have a placard.

B

Yet so I've got the css in place now, I'm going to place the jquery and all of this by the way is going in the opac side. So this is the opec css, that's in there and the opac user js, and here is the js for this okay. So there's a bit quite a bit here, but I'm going to to break this down a little bit and, first of all, let me clear out: well I'll leave it in there.

B

um The first thing, that's in this js that that I want to point out- is I have a section here that that creates a new expression called I contains. This will allow you to do a search that is case insensitive uh because we use we use a. um If I use contains it's going to be case, sensitive and.

A

It will have to be an exact match.

B

Yes, and you won't have you won't always get the the results that you want, so this makes it case insensitive. uh This was something that I found that that really made this work a lot better.

B

Something new here that uh you may not have seen. George is I've added uh some variables uh or a new variable uh called placard row.

B

uh This defines where you want that result to show up okay before it was just you know, hard-coded in in the uh code, and you had to go, and you had to know where to find that in order to put it in its place, I also changed it uh where it's using that placard row uh we're using a before, whereas before I was using and after or uh yeah, I was using an after uh and.

B

There's some complexities as to why I did that, but I just decided it was easier to code this uh with a before. So it's placing things before, especially like if you want it to be the first result. I you know wanted to make that you know.

A

Right, that's not that's, really a lot more complicated if it's a before or if it's an after, because there's nothing to put it after. If you want to be number one.

B

Exactly- and you know it's not likely, somebody's going to you know be way down in the list in the results for that that placard, so this was a safer path to go. So I added that- and I made it so that you can. You can stick in the exact number that you wanted and it'll calculate uh correctly. What where that placement is.

A

B

So that variable is there. This is where you define where you want that result to show up. The next section is the variables that define the placards. What the placards are, and I've got three placards defined here and they're in these brackets. This it's actually built into an array.

B

So it's searching through this array and you have a basic, uh basically a small. It starts off the the array with a mini array within it, um so inside its own set of brackets. Here are the keywords that it's looking for, that it will, if you type in this this keyword, this result will come up okay. So if you, for example, this is our mango example. If you put in the word language, french, spanish chinese mango, it will pop up this result.

B

B

And after the keywords, so we have a comma. The next section defines the image that's going to show up on the left, so we're storing our image in this case on our consortium website.

B

So this is where that it's pulling that image. So it will take that that logo and put it in that left panel and then the next section, another comma and the next section is the content. That's going to go in the right side. So all of this information is just uh css and or not css. It.

A

B

And you know I put in a heading: it creates that heading in that drop down menu. The text and you know the link- and in this case it has the drop down menu. So there's quite a bit to this particular one for the news section: here's our our keywords for the news and then we have our image for the archive and then our linked text. That goes in that on the right side, then I had another one for freegle.

B

So those are our three placards that we had uh that. I had created.

A

And in each one of those you have a separate space there, where you can define what keywords you're. Looking for correct, perfect.

B

So again, the structure for this is keywords and those are in the brackets and then the next section. Next piece of that, that array is the the image and then the third part of that array is the content that goes next to the image.

A

B

After that, after you've defined those, you have your placard logic and placement. So it's going through a loop, it's it's checking uh it's looking for. um Basically, it is looking for uh the bread crumbs it's using the breadcrumbs and checking to see uh if one of your keywords exists. In section it says you searched.

B

If you searched exists, it's going to check that and see if your keyword exists in there so.

A

Here's a question that I.

B

Know the answer.

A

To you, but somebody, that's watching that's new to quahog might not know this. um What are the breadcrumbs.

B

A

B

Let's see here breadcrumbs are actually this line right up here.

A

B

So anytime, that you visit a page, the breadcrumbs change uh breadcrumbs is basically a trail back to uh how you got there. Basically.

A

Yeah and the breadcrumbs will always have the search terms.

B

Yeah, so in this case uh you know I searched for news. The breadcrumbs includes results for results, of search for news, so there's where it's it's checking to see. If one of my keywords exists and.

B

If it does, this is where it does. The placement of that panel.

A

I've never really thought about it before, but if you uh used a keyword like results or home that would those would probably be bad keywords to put in the placard search because they're going to be a lot of breadcrumbs.

B

Yes, probably um you know, and you know it could mean that we need to refine the uh the way it's uh searching the breadcrumbs as well. You know it's, it's been a while it's been a couple of years since I I created this, you know programmers are adding uh ids all the time and they may have made it a little simpler for us to id those breadcrumbs so.

A

Right to actually id the search terms out of the breadcrumbs instead of looking at the whole breadcrumb result.

B

So that's the loop. It's keeping track of uh the placard count, so you know it. It knows how many times to go through the the variable and the array searching for those terms.

B

So that is pretty much it. I'm going to save this.

B

And go back over to here now before when I searched search for news, I didn't get any results, I'll search for it again and now I have there, you go a result and that placard comes up and it comes up in the second place where we have defined it in our code. If I go up here- and I say I want it in row- 3- I can save that and search for that term. Again, if it's an nr3 puts in a row, three.

A

B

Nice, straightforward.

A

So I'm using your older version of this code and uh if you let me share my screen, I can show you where I'm using enter um go for it. Let's see, share screen one.

A

So you know I've got.

B

The older version.

A

Of it, so I don't have the variable, um I do have the placard count um and I'm using it for our. We, we subscribed to flipster for magazines. So if I do a search and I've got a ton of keywords in here, because essentially I use the title of every uh magazine we subscribe to with flipster yeah is in there. So if we do a search for um for flipster, we'll get her we'll get the placard we'll show up.

A

And I've got him set to be the third.

A

I didn't have the uh variable that you have so I've got it set to come up in the third position and then I've got it to come up again in the ninth position, but I wanted people blew over it. I wanted him to. I wanted it to pop up again, but it will do a if you do flipster or if you know the atlantic monthly.

A

Is one of the titles that we have in flipster?

A

And so if we do a search for any any individual title, um it pops up as a placard too and and then.

B

I've also, you know we added.

A

Recently, the hoopla app um we now have hoopla integration in our system, but we haven't always had it, but if we do a search for hoopla, that's the other uh placard that I've got.

A

Comes up as a as hoopla, and it takes you straight to the hoopla site, so we're doing it uh just for different things. We don't have the nice magazine subscription database that you guys have, but.

B

I think it adds a lot to.

A

The catalog to be able to remind people, you know the hoopla message, pops up when anybody looks for ebook or audiobook, or you know any of any of those terms that you kind of broadly associate with hoopla but having the ability to put it in there.

A

You know we have a ton of libraries with a ton of magazines, and so, if you do a search for something like uh for something like real simple, um you might get a lot of results, because a lot of libraries are cataloging your magazines differently and they're generally cataloging them on separate records. So the real, simple link for flipster, for I do have a record in there. That's just a link out to the flipster real simple that we own, but it might be the fourth or fifth one down.

A

But this way, if you do a search for something like real, simple there'll, always be that result with the placard in space number three and space number nine. So I think it helps identify those placard yeah. I kind of felt like you know, just having it once you know, there's 20!

A

We have our system set up for 20 results and if it's number two and you just scroll by real quick, you might miss it or if it's number three is what I've got it at, and so I thought, if I repeat it at number nine then they'll have two chances to see it without it being you know, I wouldn't want it in there.

A

You know every other. One would be too much, but you know having it a couple of times or you know having it be like you know, you get one result and then you get 19 placards uh and then you gotta go to the next big that you know. There's there's a bunch of different ways. You can do it, but uh I didn't want it to be overwhelming, but I wanted it to show up more than once so well.

B

Excellent, so great couple examples of how the placards are being used and how you can modify it to fit your own needs. I like what you've done with it.

B

I'm going to get that that code cleaned up to fit the graphic a little bit better and get that on the wiki, and we will have that for you and uh and.

A

When does this video go online.

B

uh This will go online april 1st april fool's day. That's crazy.

A

Okay well- and everybody remember- read star trek final frontier, it's not a very good book with that.

B

Said we'll see in a couple weeks.

B

B