Building a Dynamic display block with Minipanels

By shane
Sat, 2015-03-07 23:19
1 comments
Series: 
Daily Dose of Drupal Episode #196

Share with Others

Sometimes you need to display something dynamically based on the page the user is currently viewing. Sure you can accomplish some of this with blocks, or even just panels, but sometimes it's nice to have the best of both worlds.

In this video, I walk through the steps to build a dynamic minipanel block display based on taxonomy term. What this means is that you might have posts tagged with different taxonomy terms. Wouldn't it be great if you could display something different in the sidebar (or any block region for that matter) based on the taxonomy term of the post? Using Minipanels you can do just that!

The steps are really pretty simple. You will need Panels and Minipanels installed, and need to be using the page manager to display your Node View page using Panels. You then create a Minipanel and add some visibility rules based on taxonomy term to the different items that you add in your panel. If you are confused by now... no worries. Just watch the video to see it step by step.

This is really similar to how we do some things on CodeKarate.com. For instance, if you take a look at one of our Git posts, you will notice an email signup form specific to Git posts. You will see this in a few places across the Code Karate site.

Let me know what you think and if you either plan to or are currently using a method like this to dynamically control what is displayed on your Drupal sites.

Hello everyone and welcome to another Daily Dose of Drupal. Today we’re on episode number 196. Today we’re going to be doing something a little bit different than normal. We’re not just looking at a specific module but we’re going to look at how to build what I guess I’ve been calling kind of a dynamic display block with mini panels.

So you might want a little familiarity with panels if you’re going to follow along but you should be able to keep up even if you don’t have too much experience. So what we’re going to do, first I’m going to show you what I mean by dynamic display. So on the Code Karate site if you go to a Drupal Commerce related post if it’s tag with Drupal Commerce and you scroll down to the bottom you will see a block here that says we received our free collection of Drupal Commerce videos. If you go to a Git tag or I guess technically a version control tag post, you will see a completely different block here.

Just getting started with Git block and so what we really built is a way to base on the taxonomy term of the post, choose what kind of block or which block we want to display here and it’s just using panels so there’s probably ways you can do it especially if you wanted to spend a little time with some code you can do it more efficiently but it’s still a pretty easy way to create this without using any code at all. So make sure you’d have the panels module downloaded on your site and I’ll go ahead and get started with how to create this.

But before we do, make sure to check out codekarate.com. We have a whole bunch of things changing all the time on the site so you can check out the EBook, check out the Drupal Commerce course and just let us know if you see anything that you think we should do videos on the future. So I have our test site here and I’m going to go to the modules page and show that Panels and Mini-Panels are enabled so you can see mini-panels on and panels are also on. And if you go to our homepage there’s two articles here. This one is a test article and you can see it’s tagged with test and this one is called inspiring quotes and it’s tagged with the tag inspire.

So what we’re going to build is we’ll just build a mini-panel that will display something different depending on which post we click on depending on the tag. And we can go ahead and we’ll be able to put that block anywhere whether it’s on the sidebar, whether it’s below the post. You could actually put it within the post itself if you wanted to really did use panels. One thing to keep in mind when you’re doing this is you want to test this especially with caching because your page is completely cached. There are some things depending on tags so I just want to keep that in mind. Just test it beforehand but you should be okay to follow along with this.

So let’s go ahead to structure mini-panels and we’re going to create our first mini-panels. Let’s just call this Dynamic Display, we’ll leave everything else blank and hit Continue. We’ll then want to make sure we have a required context of node because we’re going to want them on a node page and you can leave the identifier and keyword, just set the defaults and hit Continue. For the layout it’s going to be a really simple layout so I’m just going to go to a single column.

You could make it as complex as you want but I’m going to keep it very simple. I’m just going to display one little piece of text depending on what type of article they’re on. So now we have our mini-panels or I guess similar to panels but editor where you can add content. So we’re going to first add a piece of content and I’m just going to use custom content here but you could use all different types of things. You could put other blocks in here, you could put comment form, you could do anything else that you could normally do with mini-panels or panels and add it into this actual mini-panel to display dynamically but I’m just going to go ahead and use custom content.

So I’ll do one, this one is going to be for…if the keyword or the tag is inspire so I’m just saying do you like inspirational post and I’ll click finish and then I’m going to add another one for that test tag and just say do you like post with the test tag. Just keep in mind that this is a really simple example but you can use it to put anything you want in here. So I’m going to go ahead and just finish this for now and let’s go ahead and look or add it to the sidebar and then we’ll look at how it looks just right now. So if we go down here and find mini-dynamic display, I’m going to put this in the sidebar first column just at the bottom and click Save.

I’m also going to come in here and configure it and only display it on article content types. You could of course determine how you want to do this and you might say, couldn’t we just use two different blocks and for this specific example you can’t because you can’t do it just based on taxonomy term if you want it to individually specify the pages, you could specify that, I only wanted to show the inspiring one on this page and the test one on the test page but that doesn’t work if you’re going to scale to hundreds or a couple of hundred posts on a site especially if you want it all controlled on taxonomy term.

The other thing to keep in mind with mini-panels is it doesn’t have to just taxonomy term. It could be controlled on specific field on a content type and I’ll go ahead and show you that a little bit but for now we’re just going to check just the article and now we’re going to go ahead and go back one of our articles and we should be able to see both of them, and it is not showing up. Okay so I think the reason that it’s not showing up is that in order for the mini-panel to actually get that node context that we pass in, we have to be using panels and page manager.

So what we’re going to do is we’re going to go ahead and turn that on for this article, and to do that we go to Structure Pages and you’ll see there’s a node view by default but by default it is disabled so we’re going to enable it. And then we need to make sure that our article page is actually using a variant in here. So we’re going to go ahead and add a new variant and we’re going to go ahead and do this just for articles so it’s not going to change any other content type. So to do that we add a variant and select Selection Rules, we’re to look for node type, click Add and find the article here.

This means this variant will only show up for article content type and everything else so all the other content types will go back to their normal display. So we’re going to go ahead and hit Continue and we’ll go ahead and keep this as flexible for now just in case we wanted to change it and we’re going to leave everything else on the panel settings page at its default and this is going to get us to a layout designer. So here is where we want to come in and add all of our fields, so we’d want to add our body, we’ll just add that quickly and I’ll also add the tags field so we can see that. I’m just going to leave everything as default so we can see it working. I’m just going to show that for now.

There’s more we can add but really what you want to do is you wanted to use panels to design out that article page and the it’s going to allow us to show the mini-panel in the block because the context of this panels page, this page manager panels page is going to then be pass into that mini-panel So that’s the only way that the mini-panel can be aware of the actual node that we’re going to need and we need that because without having the node available you’re not going to specify specific fields or specific taxonomy terms to use to decide which one to display. So that is important, so we’re going to click Create Variant and I’ll click Update and Save, you can see we are saved now so I’m going to go ahead and go back to the homepage. You’ll notice that the article page is going to look different, it doesn’t have the image, it’s not designed out quite the same.

We could change that of course but you will notice we have this little block here, this mini-panel and it has both. Do you like inspirational posts and do you like posts with a test tag? So what we’re going to do now is dependent on which article we’re viewing. We only want to see one of these. So how do we do that? Well we go back into mini-panels, so go back to structure mini-panels and we’re going to edit our mini-panel here. We’re going to go into content and we have our two different pieces of content. If we click the little Gear Icon over here there’s a visibility rule. And so what these Visibility Rules are and these are very dynamic and very flexible on what you can do but you can control what shows up based on specific conditions.

So we’re going to add a new rule here and we’re going to look for node tags I believe, node article tags field. So we’re going to select that, click Next and this is for the first one so we’re going to select the tag that we’re going to show and keep in mind this doesn’t have to be taxonomy. This could be a field you added. Maybe you’ll only ever going to have three blocks or three pieces of custom content and you want to add a dropdown with the three fields and based on what you select you want to show the specific one, you can do that.

The Visibility Rules, as you can see there’s a bunch of options you can actually put in php code if you don’t want it to be specific to one of the node fields. You could use similar blocks, you could use URLs, only show it for specific user, those types of things. But for this we’re just using the tags field so this one is only going to show with the test tag, is selected. So we’re going to click Save, now if I did this right and if we come back, if I click on the first article that’s tagged with test, you can see do you like posts with the test tag, if I come back to the other one you’ll notice it says do you like inspirational posts. So as you can see this is really dynamic and flexible for how you want to build out your site to show different dynamic blocks based on the taxonomy terms of the posts itself.

So you can get really crazy with it and put all of different kinds of things in these blocks so you could put the blocks anywhere but it’s very contextual in a way. It only shows what you want based on what is actually in the content itself. So it’s pretty cool and you can do all kinds of cool things similar to what we did with the Code Karate site and if you do use this, let me know, I’d like to take a look and we can definitely share it out and show off all the cool stuff you can do with mini-panels.

So that’s it for this time, I think we went a little long but I think it’s pretty useful and something that a lot of people would be able to use on a lot of different Drupal websites. Make sure to check out codekarate.com, sign up for the newsletter if you haven’t already and we’ll see you next time. Goodbye.

Comments

The steps are truly really straightforward. You will require Panels and Minipanels introduced, and should utilize the page administrator to show your Node View page utilizing Panels. You then make a Minipanel and include some imperceptibility rules based scientific categorization term to the distinctive things that you include your board. In the event that you are confounded at this point... no stresses. Simply watch the video to see it regulated.click here

Post new comment