Drupal 7 Fieldable Panels Panes

By shane
Fri, 2014-07-25 07:10
Daily Dose of Drupal Episode #159

Share with Others

The Fieldable Panels Panes module allows you to create re-usable and fieldable entities that can easily be dropped into Panels pages. This can be useful if the traditional Add Content panes inside Panels is too limiting for you. This also allows using fields (which are translatable) for your Panels content.

In this episode you will learn:

  • What the Fieldable Panels Panes module is and some examples of where it can be useful
  • How to configure re-usable fieldable panels panes and drop them into a panels page
  • How to create fieldable panels panes from within the panels interface

Hello everyone and welcome to another Daily Dose of Drupal. I am Shane Thomas and today we’re going to be going over the Fieldable Panels Panes Module. What this module allows you to do is it basically allows you to build a Fieldable Entity that can be used inside your Panels pages and that may sound a little confusing if you’re not too familiar with the Panels terminology but we’ll go ahead and show you how that works.

Before we get started you can follow me on Twitter at smthomas3, you can also check out code.karate.com and check out the 5 Secrets EBook that we recently released. So let’s go ahead and get started with the Fieldable Panels Panes Module. You’re going to want to make sure you get that downloaded. You are going to need the C Tools Module and really the Panels Module to really make it work the way we’re going to show here.

So the thing that we’re going to do is make sure we get it turned on. So we’re going to enable this Module and first we’ll go over, I’ll kind of show you the problem that it can help solved.

There’s a lot of different reasons you might use this. Almost always there’s probably other ways to accomplish the same thing but this can make things a lot more efficient. So that may be one of the main reasons you really want to use this module. So I do have a Panel page here, so if you’re Panels this will be familiar.

So I have a Panel page and currently there’s nothing in it. Looks like this is old because testing Panes that I was using, we’ll go ahead and get rid of these. But often you may use this Add Content and you may add new Custom Content. So you may put some things in here and that works great. And you can even, there’s even ways to use this custom content but you weren’t allowed to add fields to it and you weren’t allowed or you can but it’s very difficult to add images.

So what we’re going to do is we’re going to actually create a field of Panels Pane where we can drop one in here and one in here and show different types of content. So I’m going to go ahead and get rid of this.

So kind of help solve the problem of instead of using that new custom content and you can use a field of a Panels Pane which has the benefit that each field is translatable and it’s also easier to use. So we’re going to just save this and we’re going to go to the Fieldable Panels Pane Administration page.

You can see there are current no entities of this type so we’re going to add one. But we do, actually we want to go back. You’ll notice that there’s a list page, there’s a Manage Fields and a Manage Display page. We’re going to first start by adding some fields. I’ll go ahead and create an image field and we’ll call it Logo Image.

So it uploads some logos here. We’ll pretty much just keep the basics, the basic defaults and I’m also going to add a Headline Field which will just make it text field. And we’ll keep the defaults here as well and we can rearrange these, we can also go to this Manage Display section which is pretty familiar if you dealt with content types. So we’ll start with the title then we will put the headline and then the image.

We’ll go ahead and hide the labels here and we will save that. Now we’re going to come back to the actual Fieldable Panels Pane admin page and we’re going to click the Add Fieldable Panel page link. You can make the link or the title of the Fieldable Panels Pane a link.

So we’re going to do that and I’ll go ahead and do codekarate.com as the link. You can add a title, the headline, now we upload our image and these are of course are the two fields that we added. They wouldn’t be here if we hadn’t added those fields. This checkbox is important.

This makes this entity reusable, allows it to easily be reused in other Panels pages. We can give it a category, we’ll go ahead and just give it one so you can see where it shows up. The administrative title is where it’s going to show up under inside the actual Panels when you’re adding content.

You can give the description as well, we’ll leave that blank and now we’ll come back to our Panels page to take a look. So now when we go to add content there’s a logo section here and inside there you can see there’s a Code Karate Pane and that’s the name we gave it. There’s only one View Mode so we’ll leave that the same and we will click Update and Save.

Now let’s go ahead and go to this page, you see here it shows up, Code Karate website, our headline and the logo image that was uploaded. And you notice if I hover over this or click on it it brings me to whatever link I specified. So in this case it brings me to codekarate.com. I can hover over this and edit it directly from here and this will open up this specific Pane and you can make changes, revisions or track. You can also set up specific access control roles.

This is very similar to how access control or visibility roles work within Panels. So if you’re familiar with that you’ll be familiar with this. You can allow a specific roles, you could base it on other field. There’s a whole bunch of things you can do there. We’re going to just skip that for now and assume that we want everyone to see it. We’re going to go ahead and add one more just to show another way to add a Fieldable Panels Pane.

If we come back into our Panel Page and let’s assume we wanted to add one here as well. We could of course go back to the Fieldable Panels Pane admin page and add one. We can also add it directly from in here. So if you click on Fielded Panes, you can click Panels Page. So let’s go ahead and make one for to link out to Google. And if we want to make it reusable we can check here and then it will show up in the list alongside that Code Karate one.

So we’re going to go ahead and finish this and now you can see it show up, we’ll update and save. You’ll notice inside the logo there’s the Code Karate one and the Google one now. So they can be reused on other Panel Pages if you need to. We save that and come back you’ll see we now have both of those link showing up. We also probably want to make this images the same size which is easy to do.
You go ahead and back to your Fieldable Panels Pane and you go to Manage Display. You can change this to use specific image style. So we’ll set it to use the medium image style, you got to click save which I forgot to do there, update, save. Now if we refresh this page you’ll notice of the same size.

So Fieldable Panels Pane can be used for a whole bunch of different things. They’re very flexible so they can be used whether you want to display sections or different regions inside the Panels page and you want those to be fieldable, you want those fields such as this to be translatable. All that stuff is possible.

In a future video we’ll probably go over how you can style using the Panelizer Module I believe. How to actually style some contents inside this Fieldable Panels Pane. But that’s it for this time. Thanks for watching the Daily Dose of Drupal and make sure to follow me on Twitter and check out the EBook. Until next time, see you.