Quản lý Drupal Content Layout với Panelizer

By default, the fields in a content type are displayed from vertically, one field after another. For simple content types, this might not be a bad thing, but if you want some variation in the way your content fields lay out, you have options.

When selecting a strategy for managing content layout, your first decision is 'to code or not to code.' If you are like me, you'll choose not to code. The next decision is which module do you want to use?

There are three popular modules that allow you to arrange the fields in your content such that not all fields are stacked on top of each other:

• Panelizer
• Display Suite
• Panels

In this tutorial, we are going to explore the Panelizer module. In order to do this, you will need to have added the following modules to your site: Panelizer, Panels, and CTools.

Step 1: Decide What You Will Customize

Go to Configuration > Panelizer (Note: Panels and Display Suite configuration will appear under Structure. This can be confusing, I know, so just remember ... Configuration).

In our example above, the Bog module has been turned on and the plan is to define how all blog posts will be displayed and Article will have options.

For each type of content, you have the option to design the layout of your fields:

• As you can see from the image above, you can use Panelizer to tap into Panels' override feature, thus allowing a blog post or a basic page to override the blocks that might be configured to display (Full page override).
• You can go a more traditional route and simply control how content appears in the content area of your page.
• If you are using any of Drupal's default teaser pages, you can manage how the teaser for your content is displayed.

Once you make your decision as to the layout you want to control, you then have the option to:

• Dictate how every node created by the content type is layed out
• And/Or, you can allow the user to select from multiple, predefined layouts.

Once you have made these basic decisions, and before you perform any of the options, you need to configure the content type.

Step 2: Choose What Will Be Available

Go to Structure > Content Types and then click on Panelizer for the content type you want to configure.

Observe that the two default settings are not checked by default. Checking both options tells Panelizer you want all options for each tab below the default tab to be checked.

Give it a try, check the two options and then click on each tab below. Notice you cannot uncheck anything.

Of course, if you want to manually disable a content option, then uncheck the default and manually configure what is allowed.

In the next step, we need to configure the content items that are being allowed. We can do this one of two ways:

1. Click on Default in the top right corner
2. Or, return to Configuration > Panelizer

We are going with option 2 first but we will explore Default later.

Step 3: Configure the Layout(s)

Return to Configuration > Panelizer.

At this time, your blogs are appearing as they always do. Let's change that.

1. Click on Layout for the Blog entry.
2. Select a category. Let's choose Columns: 2. (The builder feature allows you to create your own layout.)
3. Click Continue.
4. Click Save.

Step 4: Configure the Content

By default, as soon as you save the layout, you are taken to the content configuration interface. Notice two content items are available. Click+hold+drag the node links to the right side.
Notice the small gear. This is how you add additional content items. Let's do that next.

Step 5: Add Content Items

After you click the gear, click Add content in the popout menu. From this interface, you have several options (assuming you didn't disable anything when configuring the content type in Step 2).

Start by clicking on Node and observe that not only do you get the fields associated with Blog entry, you also get the image field that is currently available on Article as well as Tags and Forums. If you have a complicated site, you might want to return to Step 2 and turn off the fields you don't available to those designing layouts.

For practice, let's select Node author and then click Finish (we'll go with the default for now).

When you are sent back to the content configuration interface, click Save.

Step 6: See Your Results

As you can see, our layout isn't pretty but I did this to make a point. Your theme is going to play a role in how content items will appear. For instance, the node links are still right justified. Let's make this look nicer.

Step 7: Customize your Content Items

Click on the Panelizer tab that now appears with View, Edit (and any other tabs provided by modules you might have enabled ... such as Tracker).

1. Drag the node author content item to be above the node links.
2. Click on the gear for node author and then on Settings.
3. Check Override title and leave title blank.
4. Click Finish.
5. Click on the gear again and click on Change under Style.
6. Click on Rounded corners.
7. Click Next.
8. Save the content configuration.

Step 8: Observe Your Changes

Return to a blog entry and observe the following:

1. Author name is now above node links.
2. There are rounded corners around the content item.
3. "Author" label is now gone.

Create Alternative Layouts for Content Developers

The steps above focused on configuring just one layout for Blog entry. In Step 1, the Article content type is configured to allow users to select the predefined layout they want to use.

1. Click on List next to Article default layout.
2. Observe you are taken to the Default configuration (this was mentioned above).
3. Observe the storage status for default is Overridden (that's because of what we did in Steps 3, 4, 5, and 7).
4. Observe two additional options have been added for illustration purposes: Cooking articles and Technical articles.

How was this accomplished?

1. Click on +Add in the top left.
2. Name it.
3. Click on Layout and Content from the drop down under operations ... just like we did when configuring Blog entry.

Summary

As you can imagine, there is a lot more you can do. Try exploring the other types of content items such as Activity and Entity. Recall, these are just two options illustrated in Step 5 above. As you can see, you have many options available to you. The more you experiment, the more you will see what Panelizer has to offer. I strongly recommend you plan your layout before diving in because not all layout modules offer the same options. Remember, if Panelizer doesn't offer what you need, consider Display Suite.