Drupal7: Twitter-like login maken

Voor mijn Drupal-site http://www.market-locator.com was ik op zoek hoe een een login-formulier-tooltip te ontwikkelen net zoals het Login-formulier van Twitter.com.

Via Google had ik enkele alternatieven gevonden:

• http://adaptivethemes.com/twitter-style-login-box-for-drupal
• http://www.webappers.com/2009/11/20/create-a-twitter-style-login-form-with-jquery/

Bedoeling is dit te ontwikkelen zonder extra modules. Voordeel is dat je weet wat je programmeert ;-)

Na wat research heb ik volgende info gevonden op Drupal.org en in combinatie met de BeautyTips jQuery-plugin kun je onderstaande Login-form-tooltip ontwerpen.

Dit is het resultaat:

Stappenplan:

1. Download de Beautytips-plugin en plaats de scripts in je Drupal-installatie. Persoonlijk plaats ik  ieder script in een aparte map. 

Vb. voor Beautytips: /sites/all/themes/jmijn_theme/js/bt/Beautytips-scripts.js

2. Verwijs naar de plugin door onderstaande regels toe te voegen aan het '.info'-bestand ( /sites/all/themes/mijn_theme/mijn_theme.info )

 ; jQuery Beautytips tooltips

scripts[] = js/bt/jquery.bgiframe.min.js

scripts[] = js/bt/jquery.bt.min.js

scripts[] = js/bt/other_libs/jquery.hoverIntent.minified.js

scripts[] = js/bt/other_libs/excanvas_r3/excanvas.compiled.js

stylesheets[] = js/bt/jquery.bt.css

Opgelet: Kijk na in de plugin welke js-bestanden er aanwezig zijn. Er zijn meerdere scripts in de BeautyTips-plugin aanwezig, maar je hoeft ze niet allemaal toe te voegen.

Uiteraard kun je ook de scripts toevoegen via een custom-blok (editor instellen als PHP-filter!) met het commando:

<?php

drupal_add_js('sites/all/themes/mijn_theme/s/bt/jquery.bgiframe.min.js','inline');

?>

De reden dat ik deze in het '.info'-bestand plaats is dat het script op alle pagina's toegankelijk is.

Zo kun je voor iedere CSS-selector een eigen tooltip ontwerpen.

In onderstaand voorbeeld heb ik beautyTips ook toegepast, om de bezoeker attent te maken als je op de 'target'-afbeelding klikt, je huidige locatie wordt toegevoegd.

De code hiervoor is:

...
<img src="target.png" class="afbeelding" />
...
<script>
jQuery('.afbeelding').bt();
</script>
...

.bt() is de BeautyTips-methode en tussen de ( ) kun ja allerlei opties toevoegen.

3. Voeg een custom-blok of pagina toe en zet de editor op 'PHP-filter'.
Opgelet: Mogelijk dien je PHP-filter in te schakelen in de Drupal-Modules.

<?php
$elements = drupal_get_form('user_login_block');
$rendered = drupal_render($elements);
?>

Met 'drupal_get_form('user_login_block')' halen we het login-formulier op en plaatsen we alles in de variabele '$rendered'.

Nu plaatsen we het formulier tussen 'div'-containers en geven deze een id mee; in dit geval #bt-login-wrap .

Deze container zetten we standaard onzichtbaar style="display:none;"

<div id="bt-login-wrap" style="display:none;">
  <div id="bt-login-form">
    <?php print $rendered; ?>
  </div>
</div>

4. Voeg nu een link toe. Deze link zullen wegebruiken om het formulier zichtbaar te maken.

<a id="login" href="#">Login</a>

Zoals je merkt wordt er geen verwijzing in deze link geplaatst. We hebben enkel de css-selector '#login' nodig om de verwijzing te maken via jQuery naar het login-formulier.

5. Als laatste vragen we de BeautyTips-methode op:

<script>
jQuery(document).ready(function(){
jQuery("#login").bt({
  trigger: 'click',
  positions: 'bottom',
  fill: '#FFF',
  strokeStyle: '#777',
  spikeLength: 5,
  spikeGirth: 10,
  padding: 8,
  cornerRadius: 5,
  shadow: true,
  shadowOffsetX: 3,
  shadowOffsetY: 3,
  shadowBlur: 8,
  shadowColor: 'rgba(0,0,0,.9)',
  shadowOverlap: false,
  noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
  contentSelector: "jQuery('#bt-login-wrap').html()"});
});
</script>

Als je nu op de Login-link klikt krijg je een tooltip met daarin het login-formulier!
Nu kun je dit formulier opmaken via CSS.

Heb je nog vragen/opmerkingen, mail ze gerust via het contactformulier op mijn site.

Veel succes!