More on Variants for the node add/edit forms

So I have Forums, Blogs and Galleries. And I want to style each one differently. So my first thought is to put the form inside of a Panel Page so that I can add other content. And that is the right direction, but it isn’t enough.

The Node Add/Edit form is already in the Page Manager as a Panel Page. It is disabled by default. By enabling it, I will have the ability to customize the form’s display. I already explained the part about the contexts

Image

method of determining what node type will be affected by the change. But here is something to keep in mind.

If you enable the page, and then create a variant for a content type to be used (when you add a node to that content type for example) you will find that the add form for ALL content types looks like the variant you created for example, for the Blog entry content type.

You will need to create a variant for each of the content types individually or they will all inherit the one variant’s customizations. and what I had to do to make THAT work properly was to use a selection rule for the variants that come at the beginning of the list. Since variant order determines in a large part, what is applied, you have to create selectors so that the “filtering” process works properly.

This is one of Drupal’s great strengths, but it is also kinda strange to me and took a while for me to get my head around. Look at the SS. Each of the three content types has a variant. and a context that applies to it. But, without a Selection Rule that also applies to it, the variant will simply inherit its appearance from a rule above it, the first one that happens to apply. There are other ways to do these same things with selection rules

Advertisements

Put the “Add Content” form into a Panel Page

I had this idea in the back of my mind for a while. Really, it was the idea that there was something that I was going to run up against. And I have and I figured out what to do about it too. The problem:

How do I put the add/edit forms into my panels pages so that they have the consistent look and feel as the rest of the site. And so that they have access to my nice Superfish menu that I have at the top of the page for all my navigation. And the answer is in the Variant of the Page via its Content type Context. Clear as mud, right?

Think about this first: don’t look at the editing process where the content comes first then the editor for that content. It’s the other way around. The Add/Edit form comes first, THEN the Context determines what Content is edited. To me, this seems a little backwards. But I am just an infrastructure guy historically. But the Add/Edit functionality is independent of the content type in a way. So you invoke the add/edit first, then tell it what it needs to edit as far as a content type goes.

Go to Pages and enable the Page for the Node Add/Edit System Page:

context for add edit form0

Create a Variant. See SS 2. Make sue to check the Context check boxImage

Add the Context that you want. In the SS 3 you see that I have chosen Forum as the Content Type.Image

When you create a variant for the Forum Content Type in reagrds to the the Add/Edit form, you can place it in the nice Panel editor that we know and love. The trick seems to be, that you have to choose the General Form as seen here.

context for add edit form3

Once you add this, the rest will fall into place. I’ll add more to this later.

Add an easy to manage Footer

My site is coming along nicely but I needed a simple, but appealing footer section. I use Panels and have gotten pretty good with CSS so I put this together as shown:

Image

Image

Here is a summary of what I did to make this.

  • I created a panel style for the footer element called footer1.
  • I edited the css for footer1 in my custom css file in my subtheme and added a background image, a little 1k blue gradient sliver, that is repeated via css to cover the entire bottom of the page.
  • I made sure to check the “make this style available to other..” as seen here. The name that you give the region/pane will then be easily assigned to other panel elements in the in-place editor
  • Create a custom menu with whatever you want. Add that menu to a Superfish block. The superfish menu block doesn’t have to be handled by the Block Admin at all; it will be available via the in-place editor in Panels under Misc. as seen here.
  • So once I have configured the Superfish settings for the Block the way I want (without enabling the block in Blocks Manager at all) it will be ready to go. In this case, I have used CSS for the superfish menu I created to center the menu, make the text color white. That is tested in Firebug and Inspector (the chrome tool) and then added to my custom css file.Image
  • Since the background image and the menu are separate entities and handled by different css classes, they can sit on top of each well well.
  • Now, On any Panel page that I have, any at all, all I have to do to add this footer is add the fotter1 style to the region in Panels Pages, and add the Superfish Menu from Misc as a piece of content, also in the Panel in-place editor.

This is a little complicated to get set up. But I now have a lot of flexibility on the footer. It is easy to maintain (the menu items are just menu links in the standard m

enu config) the footer image takes a few clicks to insert. and if I wanted to update the image itself, all i would have to do is place a new “sliver” image with the same name in the same folder where it currently resides. Quite nice once it si in place. If you want more detail, let me know and I’ll be more specific.

  • Image

Gallery Formatter Module

I have been struggling for days to get an image gallery solution that will work for me and I think that I am just about there. Gallery Formatter is the latest piece of the puzzle. This post is a WIP, so here are a few bare bones details:

http://drupal.org/project/galleryformatter – module

http://drupal.org/node/1086962 – documentation

http://drupal.org/node/1271064 – readme

Overview for my approach

  • Custom Content Type for images – one for members of my site one for admins
  • Gallery Formatter – for the format at the Content Type level
  • ME Alias module for replacement patterns, like Token, uses Token, I believe
  • Views/Panels (of course)
  • Multiupload – module
  • Colorbox – module
  • Field Formatter Class mod – Module – Helps define CSS classes at the content level

That’s it for now. I hope to put this to bed today if I can.

Define Custom Content Type CSS classes

This is a really cool module. And surprisingly, it doesn’t seem to have gotten a lot of attention. But the Field Formatter Class Module is really pretty simple and straightforward. And with Drupal, I really like the KISS rule…

This module allows you to define a CSFF class1S class on a per field basis. You do this in the Display Settings for the field of the content type taht you are working with. So,

  • I create a Content type called admin galleries for image galleries taht I, an admin, create.
  • On the image field, I assign the class admin-gallery. this option is available because of the module
  • now, i can add CSS as seen below to that specific class and only that content type will be affected. so I can style any
  • gallery this way as long as I use that content type for the gallery. which makes sense anyway. Image
  • I can also create a content type for user-galleries and style all those in a consistent way. and that is the real point that i wanted to acheive anyway.

 

 

 

Very cool module. And this post is where I heard about it. It has some other useful ideas on this subject too.

http://drupal.stackexchange.com/questions/30561/add-a-css-class-to-field-in-content-type

 

 

CSS – Quicker with CSS injector

Here is a module that will allow you to make CSS tweaks without all the subtheming that I usually bring up.

http://drupal.org/project/css_injector

I heard about this module from FRJO (drupal handle), the main guy behind the colorbox module. I haven’t used it yet myself but FRJO is really good at Drupal and he uses it. Worth a look. 

Image Galleries in Drupal using Views

I have been back and forth with different options on how to approach building an image gallery in Drupal. And I am getting closer to really seeing what will work well and what won’t.

I use Views. For many things. Views and Panels are the backbone of my site. So I really want to use Views for my Galleries. I found this great tutorial from James Tombs on how to create galleries that will be displayed via colorbox from a custom content type AND, how to use Views to build some really cool flexibility into the galleries. Basically, his tutorial will show you how to create three (or more) galleries, then have the first image in each gallery serve as a link to the rest of the gallery from a View. So the View will give you a nice way to show a top level grouping of galleries based on content type and an image specific to that gallery.

Check this out. Follow it step by step. I learned some cool tricks about Views that I never would have figured out on my own.

http://jamestombs.co.uk/2011-05-26/create-album-based-image-gallery-drupal-7-using-fields-and-views