Useful Drupal Links

I often seem to forget all the good places on the web to find info and things about drupal, So I thought I would start a list, mainly for my own reference.

  • Drupal API Reference Drupal API reference. Every Drupal dev. should be taking advantage of this site.
  • TopDrops Listing of most popular Drupal powered websites.
  • Drupal Jobs A group on Drupal Groups dedicated to job advertisements in the Drupal space.
  • Drupal paid services Another page dedicated to job advertisements.
  • Drupal Project applications A list of Drupal projects that are waiting review and approval to become full Drupal projects.
  • pareview.sh A site to review your Drupal module code. This should be used on all of your Drupal projects.
  • simpletest.me Easily test a drupal theme or module.
  • Drupal 7 Template (Theme Hook) Suggestions
  • Drupal X-Ray Tool to view the modules a Drupal website uses.
  • Create forms in a safe way to avoid cross-site request forgeries (CSRF)
Modules to remember
  • Fields
    • Conditional fields
  • Taxonomy
    • Hierarchical Select
  • Input formats
    • Pathologic
  • Image carousels / sliders
    • Slick Carousel
    • Owl Carousel
  • Development
    • Object Log
    • Security Review
  • Views
    • Foo table - responsive tables
  • Paths
    • Query parameters to url
  • Performance
    • CSS Embedded Images
    • Views Litepager
    • Views content cache
  • Emails
    • Mail logger
    • Reroute email
Useful modules when inheriting a Drupal...

Removing the entity ID from Drupal entity reference fields

On a site I am currently working on I have a content type that includes an entity reference field. When creating a node, the entity reference autocomplete includes the entity id in the field after selecting the entity desired. This can be confusing for the user.
When trying to find a solution to this problem I came across many issues and different proposed solutions including a sandbox module called Entity reference trim .

I tried the entity reference trim module but it has problems when the form was submitted and had errors.
Taking a closer look into this module I could see that it was altering the widget (adding a hidden field) and overriding some of the core Drupal js to do with the autocomplete functionality. While poking around the autocomplete javascript I noticed that the autocomplete fires a 'autocompleteValue' event.
Using this event I could change the entity reference field value and store it, then change it back when the form is submitted.

Below is the code that I am using but be aware that I have not yet tested it extensively and not tested it with multiple entity reference fields. Also, as the event bubbles, a more generic version could probably be coded.

NOTE: you will have to change the jQuery selector.

 (function ($) { 
Drupal.behaviors.damnId = {
attach: function (context, settings){
// Get the entity reference input
$eref = $('#edit-field-postcode-suburb-und-0-target-id', context);
if($eref.val()){
// If field has value on page load, change it.
var val = $eref.val();
var match = val.match(/\((.*?)\)$/);
$eref.data('real-value', val);
$eref.val(val.replace(match[0], ''));
}
// Listen for the
...

Drupal views exposed form in a bootstrap modal

I am currently working on a site with the Bootstrap theme which has a fullscreen views map ( Goomap ) with exposed filters. As the map is full screen I want to have the exposed filters inside a bootstrap modal. Luckily it is quite easy to theme the views exposed filters form.

To do this you have to override the views exposed filters form theme file. Copy the views theme file (sites/all/modules/views/theme/views-exposed-form.tpl.php) and place the copy in your own theme folder. To get this to work you may have to click on "Rescan template files" under "theme" in the view. Your site should now be using the new template file and you can edit it as you please. You can get more specific with the naming of the template file to target a single exposed form, (views-exposed-form--VIEWNAME.tpl.php for example).

Below is the code that I am using in my views-exposed-form.tpl.php

 <a data-toggle="tooltip" title="<?php print t('Filter Results'); ?>"> 
<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#filterModal">
<i class="glyphicon glyphicon-cog"></i>
Filter
</button>
</a>

<div class="views-exposed-form">
<div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="filterLabel">Filter</h4>
</div>
<div class="modal-body">

<div class="views-exposed-widgets clearfix">
<?php foreach ($widgets as $id => $widget): ?>
<div id="<?php print $widget->id; ?>-wrapper" class="views-exposed-widget views-widget-<?php print $id; ?>">
<?php if (!empty($widget->label)): ?>
<label for="<?php print $widget->id; ?>">
<?php print $widget->label; ?>
</label>
<?php endif; ?>
<?php if (!empty($widget->operator)): ?>
<div class="views-operator">
<?php print $widget->operator; ?>
...

Three.js car paint shader - recreating the Radeon 9700 demo

Recently while experimenting with three.js shader materials I stumbled across RenderMonkey . It is old software that is no longer supported and the description on the website says: "RenderMonkey is a rich shader development environment for both programmers and artists that facilitates the collaborative creation of real-time shader effects."

As I was going through the different shader examples that RenderMonkey comes with, I noticed a car paint shader which I remember was a demo when ATI released the Radeon 9700 back in 2002 (I actually had one of these video cards and the demo can be seen here ). As I have an interest in creating cars in Three.js, I thought it would be a good exercise to try to recreate the demo with a shader in Three.js.

Notes:

  • I did not use the original model, I used a model available here as it was free and included a normal map which the original RenderMonkey shader used.
  • I computed normals form the normal map the same way as the PhongMaterial in three.js rather than the way it was done in the original shader.
  • The normal is quite rough, turn the normalScale down to see the effect with a more smooth surface.
  • I used a different environment map with a brightly lit floor so the reflections will look different. You can turn on the cube map with the controls on the right.
  • I am in no way a GLSL expert, I am barely even a novice and have pathetic math skills so there are probably better ways to do it or there may be errors. It was really just a learning experience for me that I thought I would share.
  • I really hate writing long blog posts so wont be
  • ...

Drupal taxonomies pre configured and ready for import

Many times in the past I have wanted a taxonomy structure for things like car makes and models or Australian States and Suburbs and find myself recreating them every time. So today I decided its probably better to have them stored somewhere. Luckily the Taxonomy Manager module easily allows you to export and import taxonomy data easily. I know there are other options for importing and exporting taxonomies, but I found this one is probably the easiest.
Here is a few for you to use, and for my own use late :)

Simple list of car Makes and Models
 Abarth 
-500
-595
-695
-Other
Alfa Romeo
-147
-156
-159
-164
-166
-33
-75
-90
-Alfasud
-Alfetta
-Berlina
-Brera
-Giulia
-Giulietta
-GT
-GTV
-MITO
-Montreal
-Spider
-Sprint
-Other
Armstrong Siddeley
-Star Sapphire
-Other
Aston Martin
-AM
-DB4
-DB5
-DB6
-DB7
-DB9
-DBS
-Lagonda
-Rapide
-V12
-V8
-Vanquish
-Vantage
-Virage
-Volante
-Other
Audi
-100
-200
-5+5
-5E
-80
-90
-A1
-A3
-A4
-A5
-A6
-A7
-A8
-Allroad Quattro
-Cabriolet
-Fox
-Q3
-Q5
-Q7
-R8
-RS Q3
-RS4
-RS5
-RS6
-RS7
-S1
-S2
-S3
-S4
-S5
-S6
-S7
-S8
-SQ5
-TT
-V8 quattro
-Other
Austin
-1800
-A 40
-A 60
-A 99
-Freeway
-Kimberley
-Lancer
...

Three.js standard materials vertex and fragment shaders reference

When playing around and experimenting with Three.js ShaderMaterial I often want to take a look at how the standard Three.js materials are done. Looking through the code or constantly outputting the shaders in the javascript console is a pain in the arse. I though I would post them here for future reference and in case anyone else was interested. These were output from Three.js version 70.

MeshBasicMaterial Vertex Shader
 #if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP ) || defined( USE_ALPHAMAP ) 

varying vec2 vUv;
uniform vec4 offsetRepeat;

#endif

#ifdef USE_LIGHTMAP

varying vec2 vUv2;

#endif
#if defined( USE_ENVMAP ) && ! defined( USE_BUMPMAP ) && ! defined( USE_NORMALMAP ) && ! defined( PHONG )

varying vec3 vReflect;

uniform float refractionRatio;

#endif

#ifdef USE_COLOR

varying vec3 vColor;

#endif
#ifdef USE_MORPHTARGETS

#ifndef USE_MORPHNORMALS

uniform float morphTargetInfluences[ 8 ];

#else

uniform float morphTargetInfluences[ 4 ];

#endif

#endif
#ifdef USE_SKINNING

uniform mat4 bindMatrix;
uniform mat4 bindMatrixInverse;

#ifdef BONE_TEXTURE

uniform sampler2D boneTexture;
uniform int boneTextureWidth;
uniform int boneTextureHeight;

mat4 getBoneMatrix( const in float i ) {

float j = i * 4.0;
float x = mod( j, float( boneTextureWidth ) );
float y = floor( j / float( boneTextureWidth
...

Useful Three.js Links

Here is a list of useful Three.js links, mainly for my own reference but other may find it useful too.

  • Three.js homepage
  • Three.js documentation
  • Three.js Google+
  • Tutorials
    • Intro to WegGL with Three.js
  • Tools
    • Three.js template generator
  • Articles
    • The Hobbit Experience - a Good article to read up on three.js performance optimisations

  • Demos
    • Three.js examples
    • stemkoski.github.io

Not another Drupal mapping module: Goomap

Yes, I have done it, created yet another Drupal mapping module. I call him Goomap .

The first thing you are probably going to ask is "why?". Well, here's why:

  • Complexity
    Most of the time when trying to use one of the other Drupal mapping modules I would find the process far too complex. Especially the last time I used the Openlayers module. I wont go into detail about this but if you have used it you will know what I mean. Every time I have needed maps on a drupal site over the past couple of years I have found it easier to just use the Google maps api itself and not even bother with a drupal mapping module.
  • Map provider support
    Many people may consider this a step backward as the Goomap module only supports Google maps where as other mapping modules support other map providers. But I have only ever used Google maps as it has always served my purpose and the documentation is fantastic. So why support other map providers if I (and probably many others) never use them?
  • Map color customization
    Now I'm not exactly sure on how to customize the colors on the other modules, but with the Goomap module it is quite easy because the goomap module gives you access to the mapOptions object that is send to the Map constructor. The mapOptions object has a "styles" property which accepts an array which represents the styles (colors etc.) that the map will have. This "styles" array can simply be pasted into the mapOpions textarea in the map settings. You can easily generate and copy this JSON array from sites such as https://snazzymaps.com/
  • ...

Android apps to test your mobile cell and wifi data

Often when traveling I have to rely on my trust Nexus 4 android phone to connect to the interwebs, be it on the phone itself or when tethered to my laptop. As such, I often want to test both the wifi and cell data connection on my phone. Most of the time I need to run these test when looking at a new hotel or condo to rent, but also when the connection seems a bit dodgy in an area that was good.

Here is my list of recommendations of apps to test your mobile data connection

3G 4G WiFi Map & Speedtest

This is the app that I have used the most lately when testing my connection.One of the main reasons being is that it has a coverage map built in allowing you to see what mobile carrier has the best coverage, and also which carrier has no coverage in your area. I think this data is collected from people using their app which may be a good or a bad thing in your opinion, but it if it improves the app and does not collect any of my other data, then why not (this feature can be turned off).

The good:
  • Good dashboard giving much information
  • Cell data and Wifi
  • Signal Compass
  • Coverage map
  • Cell tower map
  • Free
  • No ads
The bad
  • More detailed information would be good
  • Speedtest download reported in "KBPS" (all capital). unclear is this is Kilobits or KiloBytes
Network Signal Info

This app seems to be a more general purpose app rather than an app to help you improve or find a better signal. What I really like about it is the extensive information that it provides....

Changing the Inline Entity Form autocomplete field to a select list

The Inline Entity Form module for Drupal is an awesome module. Most people probably have experienced using it with Drupal Commerce, but it can be used when ever an Entity Reference field is used. I have personally used it on many projects, most of which were not commerce related.

Sometimes though, the autocomplete field to select an existing entity is not appropriate, say if you only have a few entities that can be referenced.

Luckily though we can make use of the hook that the Inline Entity Form module provides which is "HOOK_inline_entity_form_reference_form_alter(&$reference_form, &$form_state)".

Below is an example of how to change all the autocomplete fields to select lists when the reference field references any type of node.

 function MYMODULE_inline_entity_form_reference_form_alter(&$reference_form, &$form_state) { 
// change the entity reference 'add more' autocomplete into a select list
if($reference_form['#entity_type'] == 'node') { // only change the forms that reference a node
$field = field_info_field($reference_form['#parents'][0]);
$nodes = node_load_multiple(array(), array('type' => reset($field['settings']['handler_settings']['target_bundles'])));
$options = array();
foreach($nodes as $node){
$options[$node->title.' ('.$node->nid.')'] = $node->title;
}
$reference_form['entity_id']['#type'] = 'select';
$reference_form['entity_id']['#options'] = $options;
}
}