Rock U - Lava - Lava Shortcodes

Transcribed Video Content

Don't you love flexibility and being able to build something once and then use it again and again? Now with Lava, you can actually do that in a really easy way. You can create really complex queries with a ton of parameters and instead of having to rewrite it, you can pass in dynamic values and really just make your life a lot easier. Rock even ships with a bunch of helpful Lava shortcodes out of the box. So let's look at what those are and how to create Lava shortcodes right now. Now we're on the Lava documentation and as you can see, the syntax for shortcodes are really simple. There's a curly bracket then a regular bracket, then you just say the name of your shortcode. And what we're looking at here is an example of an inline shortcode. Here's an inline example actually and we're gonna end up using both of these shortcodes just so you can see how they work. But an inline shortcode will simply be one line this. You just use the curly and the regular bracket and you close it the same way. On the other hand, there's also a block shortcode. And these are generally for larger shortcodes where you want to place other items within a block. For example, here we have hello world passed into the short code, but it's pretty simple still, you'll have the open curly bracket and regular bracket, then you'll close it. And afterwards, you'll put your content in and then you will have an end short code name, second set of brackets here. And that will mean that you can wrap content I've said. And a way to think about shortcodes is sort of as here's a placeholder, place in the actual content, Lava, HTML, whatever it may be behind the scenes that is within this shortcode. And we'll also pass in a couple different parameters so that you can specify things in this case for our YouTube shortcode, we're passing in the ID and we can also kind of alter what the player looks by using some parameters such as we say we don't wanna show info, we don't wanna have controls and I'll show you where all these different parameters are documented and how you can create your own shortcodes. But first of all, let's look at a real example. So I am on an HTML block right now and you can see I'm just using a simple syntax here and I have my YouTube video inline shortcode, then I have my block shortcode for a parallax here. I'm gonna save it. Then the first thing you see pop up is a RockRMS YouTube video. We've embedded that super easily just using our shortcodes. We haven't had to memorize how to use HTML or another programming language to insert this, we can simply use a short code. Then scrolling down, I'll just refresh the page so you can see this parallax. You'll see this image right here. It sort of has a dragging effect as we go up and down. And that's what a parallax is. It allows you to insert a full sized image and creates an easy parallax effect. Also, if we want to, we can do things I showed you earlier, we can pass in content such as we can say, hello world. And this content will go inside of the parallax image. Just refresh again. And as you can see, it's not the right color there but we have content now within that block shortcode. Now I'm gonna show you how to access shortcodes and see documentation on current shortcodes that you have available to you plus how to add your own. So you'll go to admin tools, then settings and start typing in shortcodes. Click on Lava shortcodes. We have this really nice block. There's all sorts of different shortcodes all listed along the side here. You can easily search or even filter based on the category. And let's look at some examples that we used already such as here's the parallax and there's a lot of text here and this is really just documentation. These are the out of the box short codes that Rock has created for you. And it tells you here, you can if you want, you can actually use this as a block short code which we showed. And you can pass in an image just using URL, then pick what you want your content padding to be. This is a simple example, but there's all sorts of different parameters you can put in to really customize what this looks . And just to give you an example of how it works and give you a mental model of what a short code does, We have the actual markup here and this is showing you how the parallax works. Then note we had a couple different parameters. What parameters are doing are taking whatever you put in that little parameter section of the short code and passing it into the short code markup so that you can really customize again what you're looking at. And here's just a list of all the different parameters, but I'm gonna show you what it looks if we add a new shortcode. When you go to add one, you'll be asked to pick a name and it's really nice to describe what a shortcode does so people don't have to guess or test it to see how it works. Then we have a really nice rich text editor that allows you to extensively document how the short code works, what it does and more. You can even do things add images. Then you can pick the tag name and that just means whatever goes between those curly and regular brackets. Then you pick whether you want an inline shortcode or block. And it really depends on the complexity of the markup you're using. And if you want people to put content within your shortcode. Then here is where you would write with Lava, HTML, whatever to create your actual shortcode. And then here you pick which Lava commands are available. So this is just for security purposes. You won't necessarily need to enable all these commands, but there might be some relevant ones to enable so that this lava runs. And you can pick whether the scope is isolated or shared. What that means is when the context or when the variable scope context is isolated, then anything that's defined within this shortcode, any sort of variable won't leak out to the rest of your lava. So imagine you're writing some lava and within it, you have a short code that you've added just this. And just have a simple short code and say outside of it, you assigned something else with the same name as something that you assigned within the short code. Do you actually want this short code to be able to override it mean it's variable scope leaks? That's a shared context. Or if you want anything that's defined within the shortcode to stay within this markup and you can only mess with the shortcode using parameters, then you'll wanna say isolated. Then to add those actual parameters that we saw earlier, here's how you'll do it. You can add the key and the value here and that makes it really easy to allow people to customize your shortcode. It's also nice to pick a category just so you can find this easily in the future. And we have all sorts of different helpful short codes. And I suggest if you're working on a project, just take a look through our list and you might find something that serves a purpose that you need. For example, there's chart short codes, there's heat maps, maps, date pickers, all sorts of different components and visual items. As you're building with Rock, don't forget about lava shortcodes. Just remember, if you build it right, you won't have to do it twice. So save yourself some time and create some more shortcodes. Thanks for watching this video. Have a great day.