Views

Views Bulk Operations and Taxonomies – school of hard knocks

Views Bulk Operations is a great tool for making batched changes to large amounts of data. I have been using it for the last couple of days to add taxonomy terms to the around 17,000 new nodes that I added recently. And I just learned something the hard way.

Take care if you make bulk changes to taxonomies. It is not too difficult to inadvertently add the same term to a specific vocabulary over and over this way. Vocabs are meant to be updated dynamically; as the user add new terms to content, they are added to the vocab. On a individual basis, the autocomplete or dropdowns would ensure that the same term is reused if supplied instead of adding a new term for the SAME TERM. Which is what I did by mistake yesterday. And it was a mess.

Because I didn’t approach the VBO operation properly, I added the same term over and over again, to the tune of 8,000 times. Yuck. So, when I realized what I had done, I used VBO Delete to remove the extraneous terms. But what I didn’t consider was the overall impact of such a move. When I deleted all the individual terms that way, I deleted the nodes as well. 8,000 of them. Ouch.

A quick call to the BEST HOSTING COMPANY EVER – Blackmesh – and a restore was underway and the lesson was absorbed with tail between legs. I lost a whole day’s work, yes. But I gained a lot of insight as to how not to make this mistake again.

This is a fairly high level approach to what I did:

Created a vocabulary for the Content type
Created all the terms that I plan to use for this project
Added a term reference on the content type linked to the vocab
Used the autocomplete widget for the field
In the VBO View for this, chose the field for that content type that will hold the tax term
When running the VBO, I made sure the choose the predefined tax term. Since I used the autocomplete widget, i would type the first letters and wait for the complete choice to appear. This ensured that the existing term was being used
There was one node that needed its own term. I ran the VBO against this one node and added a new term to make sure that I was correct about new terms being added automatically. I was correct. This also confirmed that previously I had added what the system thought was a new term, every time the VBO changed a node
as I went through this, I checked the vocab to make sure that the number of terms was consistent with the original terms I had added.

Create a Gallery to Present groups of HTML objects

I need to be able to display a bunch of books that are on sale from Amazon that interest the site’s audience. Amazon’s Associate Program makes it easy to monetize your site by advertising their stuff. And since the product (if placed properly) can be a value add to your clients, it is a win win.

In the SS, you can see the book ads from Amazon. Each one of these ads is a small node from a custom content type

called Ads-Books. This type is nothing more than a piece of full, unfiltered HTML that allows you to create any kind of node that you want to. I have created buttons, help graphics, all sorts of things using these types of nodes. And by using Panels and CSS, they are easy to style and place.

The View uses the Grid display. This uses <TR> and <TD> tags so the tables are added easy and don’t require much in the way of styling. I know, TABLES… but they still have their uses at times.

In addition to the Grid display, I added three pieces of CSS to make things fit together properly:
.book-ads-cell-class > p {width: 25px; /* helps align indiv cells*/}

.panel-pane.pane-views.pane-all-books.no-title.block {left: -8px; position: relative; /* moves the whole panel pane content around inside the table rows/cells*/}

.book-ads-cell-class { /* more help for cells*/
position: relative;
left: -33px;
top: 23px;
}

the other SS shows what one of the individual book nodes looks like in code within CKEditor.

the nice thing about this view is that it is maintenance free. As long as I add book ads to that content type, they will appear properly in the view.

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.

Flag Content right from a View

I installed the Views for PHP module. 33k installs and somehow I missed this. Then, I found this great post on how to use the Global:PHP “field” to add PHP that will allow for a Flag entry right on the View.

This gives me a nice simple way to bookmark content. Very nice. The screecast tells you all you need to know. Plus, the info given can have many applications. VERY COOL.

Thanks to the guys at http://projectricochet.com for the info.

https://drupal.org/project/views_php – Module

http://projectricochet.com/blog/how-add-flag-link-drupal-view#.Ubjpque1Fns – Screencast on adding the PHP using the Views PHP module

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

Keep Views results IN the Panel

I have everything built in Panels. So, by default, a View with an exposed filter will show its results in the View URL rather than the Panel URL. So all the nice Panel elements will disappear. So, I go to the Panel config for the View and add what you see below. I had to add the URL of the Panel itself and not the View. This will keep the results of the View iwthin the Panel after the exposed filter has been changed.

View URL – tn/views/search-news-archive – wrong; loses Panel elements

Panel URL – tn/pages/search-news-archive – correct; keeps the results in the Panel

Add a custom hyperlink to a View

This is similar to what I did last night with the More buttobn PNG file. I have the same file in a Panel Pane for a View that I put together. And I want it to go to a completely custom URL that links to a searchable View of the same aggregator items.

First, I need to get the link and the text on the screen. Since it is View, there are better, more flexible options than there were on the Block that I was working with last night. I decided to add a Link via the Header part of the View as seen below. Because there is a text area option for the header and you can place full HTML in there, I was able to add all of the styling elements directly in the header. So, it is really Inline CSS. Which is fine for here because I want complete flexibility over the element. I added positioning elements, opacity and a title to the More text and I now have my link right on the More PNG file button.

JQuery Slideshow and Content Animation Effects – Using VIEWS!

I have been looking for a widget that will allow me to show pieces of content in a rotating slideshow. You see ’em all over the place and they look great. And, of course,

there is a module for that. The Views Slideshow module. This is a Jquery Cycle plugin based module that gives you all sorts of options.

When you install it, you will have an option in Views that will allow you to format the View as a Slideshow. There will then be other options available. The image here is a little coarse but it will give you an idea. Check this one out!

When I get mine implemented, I’ll repost and let you know how it went. But I did a little testing last night and it looks really easy.

Performance – Blocks Vs Panels

If you are curious about whether Blocks is better than Panels in terms of performance then check out this post:

http://www.codeenigma.com/blog/performance-panels#comment-4855

This is great. It tests both components and gives the data in a nice, clinical summary. The long and short of it is that Blocks is SLOWER than Panels, especially if you are using Views. But check out the post for yourself.

Thanks to Greg Harvey for doing ALL the heavy lifting on this one!

Customize CSS for Views

This is the easy way. Tomorrow, i’ll tackle the hard way.

Copy the Views.css file from the modules/views/css dir and paste it into the CSS folder of your Subtheme. Do use a subtheme, that way you can upgrade the core theme using someone else’s work.

Edit the themename.info file of your subtheme and add the reference to the copied CSS file. Mine looks like this:

;———-// Stylesheets

; See each stylesheet for extensive documentation and help.
stylesheets[screen][] = css/global.base.css
stylesheets[screen][] = css/global.styles.css
stylesheets[screen][] = css/views.css

; Print – uncomment to load basic print styles.
; stylesheets[print][] = css/print.css

then use Firebug to check one of the selectors that was coming from the default Views.css file. The path should now point to the new one. Now you can style your Views using custom CSS. Here is a good link. Tomorrow, i’ll do this via the .tpl file via a function. Much more efficient. But harder to implement. Good thing I am a sadomasochist. At least as far as IT goes. 😉