Posted on September 25, 2013 by PJ McGhee
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
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.
Filed under: Drupal Design | Tagged: modules, node add/edit, panels, variants | Leave a comment »
Posted on August 13, 2013 by PJ McGhee
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
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.
Then, i created some CSS for the new class more-button-added. they are as shown:
background: url(“/sites/images/buttons/more-btn-blk.png”) no-repeat;
margin: -34px -19px;
background: url(“/sites/images/buttons/more-btn-ylw.png”) no-repeat;
margin: -34px -19px;
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:
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!
Filed under: Drupal Design | Tagged: css, html | Leave a comment »
Posted on August 5, 2013 by PJ McGhee
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
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.
Filed under: Drupal and CSS, Drupal Design, Good modules | Tagged: css, jquery, quicktabs, tabbed content | Leave a comment »
Posted on August 2, 2013 by PJ McGhee
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.
Filed under: Drupal Design, Good modules | Tagged: ajax, jquery, no page refreshes, tabs, Views | Leave a comment »
Posted on June 4, 2013 by PJ McGhee
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
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.
<a class=”colorbox-load” href=”content/media/about-docresourceorg?width=550&height=600&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
Filed under: Drupal Design | Tagged: colorbox, images as links, panels | Leave a comment »