Variants and Node Add/Edit Overrides

Variants in Drupal allow you to reuse Panel Page layouts to make your life easier. You use Selection Rules to allow the system to decide what variant to use based on any number of criteria. In my case, I use Variants on the node add/edit form to provide a consistent interface between several different content types. As with many things Drupal, there are a few idiosyncrasies.

I have a custom content type called member-galleries. This holds images in a gallery like display. To render the add node properly, I had to learn the hard way that using

Image

the “Node Being Edited: Gallery Image form” is not the correct form to use. Even though Gallery Image is the field name that I gave the Image field on the content type that I created. It just seemed to make sense, right? And even worse, it appears when you test the functionality that this is the way to go. But, I kept getting a red herring error about file size when I would try to save an image. It turned out that the Variant really needed the “Node Being Edited” Base form instead. It appears to be exactly the same until you try to save a node of the content type.

The “More” block link – make it look professional with css

I use a lot of views to display content. In the pager section of your view you have an option to include a “more” link. I like the concept but i really want more flexibility

Image

in styling and such. So, what ended up creating is a “more” link using a little custom HTML and some CSS. First, I used the Header section of the View to add the link with simple HTML. But I also added a class selector on the link (for the images and placement). I also added a <span> tag on the text that will be displayed for the link itself. This allows me to style the text of the link separately.

Image

Then, i created some CSS for the new class more-button-added. they are as shown:

.more-button-added {
background: url(“/sites/images/buttons/more-btn-blk.png”) no-repeat;
position: relative;
float: right;
margin: -34px -19px;
}
.more-button-added:hover {
position: relative;
background: url(“/sites/images/buttons/more-btn-ylw.png”) no-repeat;
float: right;
margin: -34px -19px;
text-decoration: none;

these allow the image to be inserted and moved to the appropriate spot right along with the text for the link. Now, I don’t want a More text link in addition to the image, so, i use the selector i created in <span> called .more-link-clear to style this way:

.more-link-clear {
color:transparent;
text-decoration:none;
}
.more-link-clear:hover{
opacity:0;
}

now, the link is there, it is directly behind my image and it can’t be seen! and since it is a class and not an ID, I can use it for many of the other “more” buttons that I will place. I ended up using this technique on five different Panels panes on the front page of my site and they work really well. all of the panes are views, so i simply have to change the HTML link target to make it custom for that view. the css remains the same. very nice!

Quicktabs with CSS

Quicktabs is one of the best modules that I have found as far as getting a really nice, tabbed-style, JQuery layout. The mod comes with several different style, out of the box, and it wasn’t too hard to add some cool customizations via CSS. The bottom image is the way the Nav tab style looks out of the box. It gives a nice cle

Image

an vertical set of links. But what I really wanted was to have images along with some text to make the menu look sharp. There are some files in the modules CSS folder that I overrode in the .info file. Some of the changes I was able to make in my own custom CSS file. There appear to be a few issues with the “active” LI items vs the non “active” items. But, i was able to get this to work without too many issues. VERY NICE MODULE.Image

Quicktabs – AJAX, Views and Panels

This module turned out to be a a real blessing for me. My site offers the ability to research news, court cases and legislation. As this content is viewed, my users are able to drag and drop links, text, pics, pretty much whatever and then save the node as a custom content type.

Originally, I was faced with the idea that each type of content was going to have a separate “Notes” area. This was OK but not ideal. Drupal users AJAX quite a bit so I started digging around and found Quicktabs. You can see from the ss below that this module allows you to place content in tabs areas for easy organization and quick access. It uses JQuery and AJAX (It also uses a non-ajax mode) to allow seemless loading of all sorts of content. For me, I really need to be able to display Views. This is not a problem and with the View that is being displayed enabled to use AJAX as well, allows for a really great way to see content without having to do page refreshes.

Quicktabs as an install base of over 35k so it is well-vetted. GREAT module.

Image

Breadcrumbs – Path Breadcrumbs, Disable Breadcrumbs and more

You wouldn’t think that BCs would be such a sore subject, but in Drupal, apparently they are.

I have pretty simple needs for my BCs; I really only need them on the Forums pages. and the ones that come with the core are pretty limited. I think that I have come up with a pretty good workaround.

I am using the Path Breadcrumbs and the Disable Breadcrumbs modules. I use the DB module’s Disable All feature to completely get rid of the core crumbs and the Path mod to set the ones that I do need.

I also looked at Custom Breadcrumbs as well and it certainly has a great install base, but the documentation seems to be really light.

There is a nice CodeKarate video for Path that helped me quite a bit. Frankly, I’m getting a bit tired of slogging my way through modules that are powerful but difficult to implement and poorly documented as well. Drupal is already tough enough.

 

Tokens in a menu – edit the current node without the edit tab

This is a really handy module for me. https://drupal.org/project/menu_token

what this allows me to do is use tokens in menu URLs. What this means is that I can create a simple URL that references content dynamically. and since it is a menu, I can easily place it with panels.

so, I have a URL whose relative path is

node/[node:nid]/edit

I place this on the node view variant page for my specific content type and I now have a movable link that will edit whatever node I am looking at. one link will allow me to edit any node.

the tabs from drupal will allow you to do this of course, but I hate the tabs because they always interfere with my CSS and I use Tab Tamer to hide them. But, I still need the functionality. and with this solution, i can style it pretty easily with css.

Image

Image Linked to a Colorboxed Image

I have my nice “About Us” page contained in a colorbox now. And the link that leads to it is embedded in a text area of a View’s header. But what I really want is to have a fancy about us button image that links to the colorbox.

I have the image link module installed but that just allows for a regular hyperlink. The way that I load colorbox in this case is via “colorbox-load” within the tags of the link itself. So, I simply added a piece of content that allows for full html (and isn’t available for anyone

Image

else to author), uploaded my button to the custom images folder that I have within /sites and it works really well. Here is the way the link looks in the body of the html body field for the piece of content that i added. after the content is in place, i simply add it to the page via Panels, referencing it by the name of the node.

this is what the html looks like in the editor of the piece of content.

<p>
<a class=”colorbox-load” href=”content/media/about-docresourceorg?width=550&amp;height=600&amp;iframe=true”><img src=”sites/images/buttons/About1.png” /></a></p>

The images above show the end result. I still need to move the button around with a bit of CSS but that will be pretty straightforward.

Here are the highlights of making this work:

  • Image uploaded manually, not a part of a piece of content
  • Hyperlink embedded in the body field of a Full HTML Drupal piece of content
  • That content piece added to a Panel Page