• Awning Works 1
  • Socaz 2
  • Socaz 1
  • Randy Montana 3
  • Randy Montana 2
  • Randy Montana 1
  • Rodgers & Hammerstein 3
  • Rodgers & Hammerstein 2
  • Rodgers and Hammerstein 1
  • Love Fine Art
  • Feb
  • 16
  • 2012

Drupal 7: How To Create a Views View from Within a Module (default view)

The whole idea in making a module is to make it, well ‘modular’, right? The person who is going to install the module should not have to create and configure a view. Chances are they would not get it just right anyway (you know, with all the exact settings the module depends upon). This is because the Views UI is so versatile that no two people are likely to set it up the exact same way. In many cases, if a module depends on data from a view, all the Views setting need to be just so in order for the module to work its magic.

Although this is very doable, I found it very difficult to locate documentation spelling out just how to do it. I’m not sure if it was not documented in a way that was easy to find or if it was the fact that I had a 3-day headache pounding away. Either way, I did finally come across a few links.

techcommons.stanford.edu

Drupal API

To give myself and others one more place to stumble upon what to do I have documented how to create a Views default view from within a module below. A default Views view is a view that weather enabled or not shows up on the /admin/structure/views page once a module is installed and enabled.

For the purpose of these notes we will call our module, ‘mymodule’. Everywhere you see ‘mymodule’ you need to replace with the name of your actual module name. This article assumes that you are familiar with module development basics and that you have already created your basic module files ( mymodule/mymodule.module, mymodule/mymodule.install & mymodule/mymodule.info ).

OK, let’s create a default view in a module!

Create a new file named mymodule.views_default.inc and save it into a directory named mymodule/includes/.

Inside the file you just created, paste the following function…

23
24
25
26
27
28
29
30
31
32
/**
 * Implementation of hook_views_default_views().
 */
function mymodule_views_default_views() {
 
  //PASTE EXPORTED VIEW CODE HERE
 
  $views[$view->name] = $view;
  return $views;
}

You can now create a View in the Views UI as you normally would.
Then export the view. Select the entire export text as presented in the textarea of the export result and past it in place of where you see “PASTE EXPORTED VIEW CODE HERE” inside the function you just made and save the file.

OK, next, inside the file your mymodule.module file, paste the following function (remember that everywhere you see ‘mymodule’ you need to replace with the name of your actual module name.).

47
48
49
50
51
52
53
54
55
/**
* Implementation of hook_views_api().
*/
function mymodule_views_api() {
  return array(
    'api' => 3.0,
    'path' => drupal_get_path('module', 'mymodule') .'/includes'
  );
}

Now you can clear your cache and see the default View you just created in the list of default views at ‘admin/structure/views’

Please feel free to register and comment.

  • Feb
  • 15
  • 2012

Drupal 7: How to Make a Drupal Theme Function in a Module

This is intended as a simple reminder for all of those out there who find making a drupal theme a bit confusing at times.
There are three main steps that all work together.

1) hook_theme which adds an array of callbacks and their arguments to the theme registry. You need to put this in your sites/all/modules/mymodule/mymodule.module file to rebuild the theme registry before it would be added.

23
24
25
26
27
28
29
30
31
32
33
function mymodule_theme($existing, $type, $theme, $path) {
  $theme = array(
    // This is in the mymodule.module file.
    // example theme template register
    // for sites/all/modules/mymodule/templates/mymodule_theme_name.tpl.php
    'mymodule_theme_function_name' => array(
        'variables' => array('node' => NULL, $param2 =>NULL),
        'type' => 'module',
       ),  
  return $theme;
}// function

2) The themable function itself which starts with theme_ followed by the function name that was added to the registry with hook_theme

45
46
47
48
49
50
51
52
// The $vars paramiter is an array of passed 
// variables corresponding to the 'variables' 
// key in the the above hook_theme() function.
function theme_mymodule_theme_function_name( $vars ){
... code here ...
// Return a string that contains the rendered representation of the data.
 return $output; 
}//function

3) Then call the function,

52
 theme('mymodule_theme_function_name', $whatever_argument );

which actually calls the function.

It is important to remember all three of these or the theme will not work.

  • Jan
  • 30
  • 2012

DRUPAL 7: How to Expose a Field in Views

DRUPAL 7: How to Expose a Field in Views

The other day when trying to expose a Filter criteria in a view of the Views module 7.x-3.1, I was frustrated by the fact that it would not function despite my best efforts. After triple checking my set up and reading a lot of documentation, there was no fix. Finally, after digging deep into some threads by a person having the same frustration with Views in Drupal 7 and exposed filters, I found the simple, although illusive, solution.

In the VIEWS UI, open the “ADVANCED” section and look under the “OTHER” subsection. Find the item “Use AJAX” and set the value to yes. I know, I know, (pause, make face) – right? Well, the guy on the thread that helped me complained enough about it so I’ll just keep my mouth shut.

I hope that if you were having this problem you found my post faster than I found that thread. : )

As, always, feel free to comment and make suggestions.

select yes for use ajax

  • Jan
  • 24
  • 2012

Drupal 7 Calendar New Interface Set Up (in Views)

I found this very helpful video by Arlin Sandbulte on the
Drupal Calendar version 7.3 configuration (Calendar 7.x-3.x-dev).

The interface on this Calendar is quite different than what is shown in other slightly older videos.

The new video for Drupal 7 Calendar New Interface Set Up.

  • Jan
  • 13
  • 2012

Mac OS: How to Change Screen Shot Save Folder

Posted by admin In How To | No Comments »

First of all, a big “thank you” to the author at snowleopardtips.net who wrote “Everything you need to know about customizing screen captures“! This very helpful article cut through the chase and made changing the screen shot folder easy.

OK, so here is the “How To”:

1) open your terminal and enter the following line. Note:The default location for screenshots is ~/Desktop.

    defaults write com.apple.screencapture location <your new path ie ~/screenshots>

2) Reset the System UI Server so you can see the change.

    killall SystemUIServer
  • Jan
  • 06
  • 2012

HTML5: How to Make a datalist for a Form Field Input Element

Isn’t it nice when web developers make it easy for end users to fill out a form? One way to make for a pleasant user experience is to offer suggestions on a form’s input field. HTML5 now has a cool feature that makes this easier for the developers too!

The HTML5 datalist element provides an “autocomplete” feature on form elements. With it, you can provide a list of predefined options to the user as they input data.

Now, when a user is entering some text into a text field, a list can drop down with pre-filled values for them to choose from.

How to Make a datalist for a Form Field Input Element
The datalist tag was introduced in HTML 5.

Use the ID of the datalist tag to associate it with the appropriate input.
For example, if the datalist tag has an id=”myDataList”, then the list attribute of the input element will look like this: list=”myDataList”.

You can fill the datalist element by nesting option tags inside the datalist tag. Here is an example of the code for the HTML5 datalist element:

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<p>
<label>
  Enter your favorite Star Trek character:<br />
<input type="text" name="favCharacter" list="myDataList">
<datalist id="myDataList">
 <option value="Captain Kirk">
 <option value="Spock">
 <option value="Bones">
 <option value="Scotty">
 <option value="Sulu">
 <option value="Chekov">
 <option value="Uhura">
 <option value="Jean-Luc Picard">
 <option value="Data">
 <option value="Geordi La Forge">
 <option value="Worf">
</datalist>
</label>
</p>


OK, so now you know. Go be nice to your users with the HTML5 tag!

  • Jan
  • 05
  • 2012

Git: Understanding how to use GIT

Posted by admin In How To, Web Design | No Comments »

An excellent read about GIT and how to use it: “A successful Git branching model” on a blog named nvie.com maintained by Vincent Driessen
How to use GIT
Great article, Vincent, thanks!

  • Jan
  • 04
  • 2012

CSS3: Drop Shadow on an Image

Posted by admin In CSS, How To, Web Design | No Comments »
CSS3: Drop Shadow on an Image

Drop shadows are a nice way to add dimension to a site. Creating them used to be a real task. Combining multiple divs and floats and trickery with CSS that were basically hacks. Not to mention how difficult it was to accomplish creating shadows programmaticlly. Well, making a drop shadow on an image is easy now thanks to CSS3!

Enter the box-shadow element! The box-shadow element is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. The syntax of the box-shadow CSS3 element is as follows:

box-shadow: h-shadow v-shadow blur spread color inset;

The box-shadow element is a comma separated list of properties that effect the position and size and color and even the opacity of the shadow. Note the inset perimeter. That controls wether the shadow is inside of or outside of the object getting the shadow.

23
24
25
26
27
28
 
.image-framer img {
border-radius: 5px 5px 5px 5px;
/* box-shadow: h-shadow v-shadow blur spread color inset;*/
box-shadow: 3px  3px 5px 0 rgba(0, 0, 0, 0.5);
}

CSS3 image drop shadwo

The first to parameters control the horizontal and vertical position of the shadow.

Next is the optional blur distance measure followed by the optional spread (or size) of the shadow.

The next paramiter is the color parameter. Here is where you can use the new CSS3 rgba(0, 0, 0, 0.5) element. With the rgba(0, 0, 0, 0.5) element you can control the opacity as well. Or you could use the color number here if you like without opacity.

OK, well, enough talk. Go try it out!

  • Jan
  • 02
  • 2012

Drupal Security Best Practices When Outputting Text Into HTML

When creating a module in Drupal it is very important to be aware of some security best practices when outputting text into HTML. This helps prevent XSS (Cross Site Scripting) exploits and keeps your code in general good health as it prevents problems with user input like angle brackets or ampersands.

Be sure to read the documentation for db_query() on how to use the database API securely.

When passing plain-text from the user to HTML markup, you need to pass it through the check_plain() function first. Drupal’s check_plain() converts quotes, ampersands and angle brackets into entities. This causes the string to be shown in a literal way on the browser screen.

There are a few themeable functions that automatically sanitize text by first passing it through check_plain(). They are: t() , menu items and breadcrumbs, Block descriptions (‘but not titles’), theme(‘ plain-text placeholder’), theme_username() and Drupal Form API #default_value element and #options element when the type is a select box.

Examples:

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?php>
        $form['safe_way'] = array(
          '#type' => 'textfield',
          '#default_value' => $user_supplied,
        );
 
        $form['not_safe_way'] = array(
          '#type' => 'select',
          '#default_value' => 0, //FORM API will pass this through 
                                 //check_plain(),
          '#options' => node_get_types('names'),  // DANGER: FORM 
                                 // API will NOT sanitize the  
                                 // '#options' attribute with 
                                 // check_plain().
        );
?>

As a Drupal module developer, it is important to commit to memory some common places where sanitizing plain text is important.

Setting the page title:
Examples:

23
24
25
26
27
28
29
30
<?php>
 
        drupal_set_title($node->title);//BAD, XSS vulnerability
        drupal_set_title(check_plain($node->title));// Correct way
        //NOTE: The same applies to block titles that are 
        //      passed through hook_block().
 
?>

Form elements #description and #title
Examples:

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php>
 
        $form['wrong_way'] = array(
        '#type' => 'textfield',
        '#default_value' => check_plain($user_supplied),  //←-escaped twice
        '#description' => t("Old data: !data", array('!data' => $user_supplied)), // XSS
        );
 
        $form['right_way'] = array(
        '#type' => 'textfield',
        '#default_value' => $user_supplied,
        '#description' => t("Old data: @data", array('@data' => $user_supplied)),
        );
 
?>

Form elements – #options when #type = checkboxes or #type = radios
Examples:

23
24
25
26
27
28
29
30
31
32
33
34
35
<?php>
 
        $form['wrong_way'] = array(
          '#type' => 'checkboxes',
          '#options' => array($user_supplied0, $u_supplied1),
        );
 
        $form['right_way'] = array(
          '#type' => 'checkboxes',
          '#options' => array(check_plain($user_supplied0), check_plain($user_supplied1)),
        );
 
?>

Form elements – #value of #type markup and item need to be safe.
Note that the default form element #type is markup!
Examples:

23
24
25
26
27
28
29
30
<?php>
 
        $form['wrong_way'] = array('#value' => $user->name); //XSS
        $form['right_way'] = array('#value' => check_plain($user->name));
         //       - or -
        $form['right_way'] = array('#value' => theme('username', $user));
 
?>

This information was gleaned from the Drupal documentation at “Handle text in a secure fashion”, which covers this topic more extensively than this post.

  • Dec
  • 31
  • 2011

How to Get All the Selected Values from a Multi-Select with jQuery

Need to know how to get all the selected values or text values from a multi select element (drop down)? Its simple with jQuery!

Start by declaring an array. One for the values of the multi select element and one for the text values. Well, if you even need the text values from the multi select, that is.

Now we can use the ‘ :selected’ jQuery selector. That we get all the items from the select element that the user has selected. We can use the jQuery ‘each()’ function to iterate over the select element and gather the values and texts into the arrays using jQuery’s standard ‘.val()’ and ‘.text()’ functions.

Next iterate through the selected items, using the standard val() to return the selected option’s value or text() to grab the actual display text that made up the list item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$document.ready({
 
var vals = [];
var textvals = [];
 
function getMultipleSelectVals( id ){
  $( '#' + id + ' :selected' ).each( function( i, selected ) {
      vals[i] = $( selected ).val();
      textvals[i] = $( selected ).text();
  });
}// end function
 
});//$document.ready

Flickr Stream