Backdrop CMS Instructional Videos, 16 Oct 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: User Time Zone Tokens - Backdrop CMS Module

Description

This module converts a date field or dates in the a text field to the users local time zone, based upon their browser detecting their time zone.

This is a pretty simple module, but the video is a bit long because of time spent explaining something about date formats and text filters, both of which are required to make this module work.

A

Hello, my name is tim erickson, I'm often found on the internet under the name of saint paul tim and my company triplo, and our website simplo are here today to present you with a screencast on how to use the user time zone tokens module for backdrop cms.

A

This module is available to us thanks to the hard work of robert lang. Thank you, robert for this great module. The module can be found on backdropcms.org under the add-ons modules tab, and the purpose of this module is to solve problems like this. We are currently planning a cool event. I hope uh that you will come or we're there depending on when, when you watch this video backdrop live. This is an uh an online uh international event.

A

With people participating from many different time zones, we usually have at least seven or eight different time zones represented and in theory we could have uh quite a few more um and we want to display uh things like this, like a little block showing when different sessions are or session blocks are, but also we have a full schedule here of uh individual sessions or topics, and we want people to be able to see when these will be happening in their local time zone, and we have already enabled the user time zone token module to solve that problem.

A

So these were programmed originally with pacific coast times. This one was at 7am and thanks to the user, timezone token module, that's being translated to use the timezone of my browser because I'm not logged into the site. So I can't this. The site doesn't know who I am or where I live. But the browser does, you know know something about me. The browser knows that I um I'm in the the central time zone, and so this is being converted based on the center center time zone.

A

Previous versions of backdrop, live we've resolved, uh resorted to sort of complicated spreadsheets to help people find out when sessions are we're, hoping this works much better. There are some possible glitches with this we'll talk about those later, but let's, first of all, just see how this module works. First of all, this module is dependent on the token filter module the token filter module.

A

It supports a lot of other modules that use tokens, so we don't need to say anything more other than you will have to download and enable this depending on how you use the user time zone token module you may or may not need the luxon module.

A

The luxon module provides a library, the luxon library which is used by this module and could, in theory, be used by other modules as well. This library is going to be required for our use today, but again there are some scenarios where you may not need this uh we'll we'll get to that later.

A

This is our demo site. I've done a couple of things to prepare this so that we can move along quickly. Today. First of all, I added a content type called event and under that event, content type I added basically just a date field. I pretty much use the default settings for the date field. I haven't done anything else. You'll see, I also did add one node called test event.

A

This was showing up on the front page. You might have noticed it already. This event basically has a body field and a date and let's take a look at it edit it um basically I've hard coded a date here. There's no filters, nothing special here and in the date field I put the same date, so we have the same date. This is a week from today um october 20th at 7, 00 pm central time, and that's listed here. Twice the time zone user time zone token, module can help.

A

You translate date fields or it can help. You translate dates that are in the body field. This makes it particularly powerful and helpful. Let me go ahead and save this change, so, as I start to so, let's get all of those modules enabled.

A

The next thing we need to configure is under configuration, regional and language. There's user time zone tokens and really this just gives us a choice of three settings and that is to use either the the user's time zone. uh This is for logged in users for authenticated user or the server time zone for anonymous user.

A

This can be done with core, but it doesn't core- wouldn't have the token available for this, that this module provides uh the other two options both uh get a little bit more complicated. This is use the user's time zone for if you're authenticated in the browser's time zone for anonymous users.

A

This is where the magic starts to happen. This requires this module and that luxon library and the third is to always use the browser time zone, whether the users are authenticated or anonymous, and I worry about option number two, because there is some possibility for confusion. uh If a user is logged out in one browser and logged in in another, they could easily end up with two different times appearing, and there are ways around that, but anyways we're going to work with this third option.

A

Today we want always the you: are the the site to figure out what time zone the browser is using and use that so I'm going to go ahead and save that configuration.

A

The next thing we're going to have to do is that the way the user time zone token module works with the date field is in the display it lets you change the display of that date field.

A

So we have to go to the content types and we have to go to events, and then we want to manage the display and if you hopefully, work with display modes before this is the default display mode that we use on the the node page and in here we have the date field and you'll, see, there's a date format and the user time zone token module provides an alternative date format, so I'm going to go ahead and select that and then I'm going to hit, save and now we're gonna go back so we're here um at our test event, uh which is an international user group meeting on the topic of date formats.

A

So at this stage this should work now. This should be converting that date to the user's time zone, but I'm in the central time zone. So there's no conversion happening. What I'm gonna do is switch to another browser uh where I'm not logged in. First of all, to just make that clear that being logged in is not affecting this and then I also need to figure out a way.

A

How do I make the browser think that I'm in a different place uh or in a different time zone- and I did a little research on that today and I found that if you have the developer tools, you can open up the developer tools I get to them by right-clicking and then clicking on the inspector, and then I have these developer tools in the right sidebar. If you don't know about these developer tools, check it out.

A

Do some googling learn about the developer tools, they're, really powerful and helpful if you're building a site, especially if you're doing theming, but even for things like this and then what I'm going to do? Is I'm going to switch to the console? Okay? So I'm going to switch to the console- and this is a little complicated uh up under these three dots in the console. I go to more tools and I click sensors and basically, what this lets me do is.

A

This is have the browser, think I'm in a different location and then see how it will behave. So I can tell the browser that I'm in moscow I can come over here, refresh the page and boom sure enough. This time was now converted to thursday october 21st uh at 3am.

A

uh We could uh jump over to say not sao paulo, let's go to tokyo and refresh the page and boom. That time is. Trans is automatically translated to 9am a little more reasonable for the folks in tokyo to participate.

A

um That's part of what we can do, but there's another thing that I want to show you with the user timezone. We haven't actually used the tokens, yet we've used the user time zone, but we haven't used the tokens. So let's go back to our previous version and we're going to edit this node and what I'm going to do is copy a little bit of code.

A

Well, a little bit of text really not code. Basically, this is some text saying here is the token, and then this is the token. These are what tokens look like in backdrop and there's a number of different ways. We use tokens uh do a little bit of research. If you don't know about tokens, this token has a format.

A

We can see the format here in the user time zones, documentation which is bracket and then the words utz dash date, time uh colon that is hard-coded, that doesn't change, but then you put the actual date time of the you know the the original date time and then the format you want that date, time displayed in and there's a little bit of stuff here to help you with that in the in the description, I've went ahead and done that, and what we can see is from here to here is is so we've got that we have to be very explicit about the pm or am, and we also have to add a time zone here.

A

So it knows what our original time zone is and I'm starting with cdt, and then what we're doing is displaying the format we want to display this in and you'll see why this is important that we do this particular thing, because I've done things like I want to display the time zone in a sort of an expanded way, to avoid any chance of confusion that the user is looking at or thinks that it's in their local time zone, and it's not uh so this.

A

This d, comma y g, colon, I a e and then capitalization is important. Here- is all based on the php uh uh sort of codes for for formats, and so these gives you these are in a way kind of tokens or variables. You can use to build custom date formats and, if you maybe haven't thought about it before there are just almost an infinite number of ways that you can display dates things differences between.

A

Are you using abbreviations for the day of the week or the long version of the day of the week or not using the day of the week at all? Are you adding an st after the first?

A

Are you putting a zero before the date if it's one, digit or not, and we've got different tokens for all of these different options and you can combine them in any combination? You want to display the date. The way you want, so I went ahead and created a display which I think is going to work for us. Let's go ahead and save this and we can see right away. I don't need to to check in the browser that this isn't working.

A

It's just showing me the date format and that's because there's one more bit of configuration that we haven't done yet.

A

Okay, we need to create a text format that recognizes this token and there's a text filter that we have to enable and use, and I had a little problem- I'm not sure if that text, format, conflicts with other text formats, but anyways, let's go to configuration content authoring here we have text editors and formats, and so I'm going to go back to the text formats and I'm going to add a new one and I'm going to call it raw html um and raw html means we're not filtering the html at all.

A

Anybody can put any html they want in this page. So please use this with caution, because uh if you've got users, editing your site and then I'm going to put a time zone.

A

So this is a raw html fill format that specifically set up for time zone. We're not going to be using ck editor with this we're going to have to enter our code in raw and I'm going to hit save config. So now I have a oh. I have to configure this. I'm sorry! I forgot one more thing. This is only we're going to leave this only available for administrators and then we're going to come down here.

A

We can see, none of these filters are enabled, but we need to enable the the token the replace token filter. So now we have a raw html time zone text format with only that one filter. So now we can go back to our content.

A

Go to edit this, it's all still here, but we're going to change. If we go to formatting options, we can change from filtered html to raw html time zone. There we go. We lose our little wysiwyg editor because in this format, we're going to have to hard code everything, but what we can see is that we've got a. We could probably get rid of this. These are just some blind spaces.

A

We've got some paragraph tags here and some text and then we have our token and this token should work just fine inside the paragraph tags like this no problem, so I'm going to go ahead and save this now with that filter. Let's go to the page. Now we can see that this has changed. It's now. The token is working it's displaying a date and time. However, it's still the same date and time so in order to test this we're going to switch over again to our other browser, there we go.

A

I had to refresh it twice and again, everything's still at 7 pm on the 20th, but that's because again the browser still thinks that we're in the original time zone. So what I need to do is come over here. uh Well, I don't need to go anywhere, but I need to switch this, so I can change this to berlin.

A

Come back here, refresh this and boom both the the date in the body field and in the date field have been converted. Both of them are now october, 21st at 2 a.m, um and both of them are using, whichever date format was set for them, and this is the long date format that I set up with all those things that shows europe slash berlin. I, like, I think, if you're going to use a module like this, you want to display.

A

You want the user to know what time zone it's being displayed in and I'm not sure if everybody around the world understands the same um time zone abbreviations anyways. So this uh seems to be working and really, um I don't think, there's anything more to show you right now. This is how the time zone token filter works. You could use the same thing in a block. uh You could put it anywhere. You're gonna have to get creative with how you use this. So for my testing with this modules, it's worked pretty good.

A

It does require javascript. So if a user has javascript turned off this module's, not gonna work um and- and that might be another- you might want to be thinking about fallbacks for that, so I'm gonna hang it up for today, and I look forward to seeing you in our next video. Please do check out our youtube channel team trip low thanks.

A