→ Download the Safe Encode extension, version 1.0

What does it do?

Whenever you use {encode=""} in your weblog entries to display email addresses, this extension will generate an accessible link, instead of the JavaScript generated one. There is hardly any obfuscation, except that the . are replaced with . and the @ is replaced with @. This also means the email address is more likely to be picked up by bots and harvesters, so use at your own risk.

If you’re using the encode-tag in your templates, this extension will have no effect. But then again, you could just as well not use the encode-tag there.

Example

Using the extension, this…

{encode="example@domain.com" title="Send an email"}

…will be converted to…

<a href="mailto:example&#64;domain&#46;com">Send an email</a>

→ Download the ExpressionEngine Google Mini plugin, version 1.0

• Search results
  • Parameters
  • Conditionals
  • Single variables
  • Variable pairs
  • Example
• Keywords
• Search form

Search results

The main tag pair you will need is {exp:googlemini:results}. This contains several single variables and variable pairs that let you set up your search results page.

Parameters

• host="googlemini.domain.com"
• Request Parameters

host=

host="googlemini.domain.com"

The host name assigned to our Google Mini search appliance.

Request parameters

All Request Parameters used by the Google Mini search appliance are available. All Request Parameters will be overwritten by GET variables in the url. For example:

client="default_frontend" site="default_collection"

Conditional variables

• {if keymatch}

if keymatch

{if keymatch}
 content
{/if}

This conditional lets you display content if a KeyMatch was found for the current search.

Note: in addition to these conditionals, all single variables can be used as conditionals as well.

Single variables

Variable pairs

• {entries}
• {synonyms}
• {pagination}

entries

{entries}
 <div{if filtered} class="filtered"{/if}>
  <h3><a href="{url}">{title}</a></h3>
  <p>{excerpt}</p>
  <p class="meta">{display_url}</p>
 </div>
{/entries}

synonyms

{synonyms}
 {synonym_count}: <a href="{synonym_url}">{synonym_name}</a>
{/synonyms}

pagination

{pagination}
 {if is_active}
  <strong>{page_count}</strong>
 {if:else}
  <a href="{path=search}{query_string}">{page_count}</a>
 {/if}
{/pagination}

Example

{exp:googlemini:results host="googlemini.domain.com" oe="utf8"}
	
{if keywords}
 <p>Searched for <strong>{keywords}</strong><br />
 Results <strong>{start_result} – {end_result}</strong> of about <strong>{approx_results}</strong>.</p>
{/if}

{if keymatch}
 <p>KeyMatch: <a href="{keymatch_url}">{keymatch_description}</a></p>
{/if}

{if total_synonyms}
 <h3>Also try:</h3>
 <ul>
  {synonyms}
   <li><a href="{path=search}?q={synonym_url}">{synonym_name}</a></li>
  {/synonyms}
 </ul>
{/if}

{entries}
 {if count == 1}<ol id="searchresults">{/if}
  <li{if filtered} class="level2"{/if}>
   <h3><a href="{url}">{title}</a></h3>
   {if excerpt}<span class="excerpt">{excerpt}</span>{/if}
   <span class="meta">{display_url}</span>
   {if more_url}<span class="sitesearch">[ <a href="{path=search}?q=site:{more_url}%20{keywords_url}">More results from {more_url}</a> ]</span>{/if}
  </li>
 {if count == total_results}</ol>{/if}
{/entries}

{if total_pages > 1}
 <p class="pagination">
  <span class="count">{current_page}/{total_pages}</span>
  {if previous_qs}<a class="prev" href="{path=search}{previous_qs}">Previous page</a>{/if}
  {pagination}{if is_active}<strong>{page_count}</strong> {if:else}<a href="{path=search}{query_string}">{page_count}</a> {/if}{/pagination}
  {if next_qs}<a class="next" href="{path=search}{next_qs}">Next page</a>{/if}
 </p>
{/if}

{/exp:googlemini:results}

Keywords

To display keywords outside the results-tags, use the single tag {exp:googlemini:keywords}, for example:

<title>{exp:googlemini:keywords} - Search - My Site Name</title>

Search form

To create a search form, simply point a form to your search results template and use an input field with name="q". For example:

<form action="{path=search}" method="get">
 <fieldset>
  <legend>Search this site</legend>
  <label for="keywords">Keywords</label>
  <input type="text" name="q" id="keywords" value="{exp:googlemini:keywords}" />
  <button type="submit">Search</button>
 </fieldset>
</form>

Drag the following link to your browser’s toolbar and behold the speediness of bookmarklets (also known as ‘favelets’): !ee

That will speed up your support searches big time.

What does it do?

The queries will truncate some tables and insert some defaults that I work with regularly:

• Delete all template groups and insert a new one: home
• Delete all templates and insert a new one in home: index
• Delete all html-buttons and insert buttons for <h2>, <h3>, <strong> and <em>; usually all the formatting an editor would need
• Delete all categories and category groups
• Delete all weblog entries
• Delete all but one weblog fields

That’s it. You could probably do more, but this gives me a great start for new projects.

The SQL

# get rid of template groups
TRUNCATE TABLE exp_template_groups;
INSERT INTO exp_template_groups (group_id,site_id,group_name,group_order,is_site_default,is_user_blog) VALUES (NULL,'1','home','1','y','n');

# get rid of templates
TRUNCATE TABLE exp_templates;
INSERT INTO exp_templates (template_id,site_id,group_id,template_name,save_template_file,template_type,template_data,template_notes,edit_date,cache,refresh,no_auth_bounce,enable_http_auth,allow_php,php_parse_location,hits) VALUES (NULL,'1','1','index','n','webpage','','','0','n','','','n','n','o','');

# better html buttons
TRUNCATE TABLE exp_html_buttons;
INSERT INTO exp_html_buttons VALUES (1, 1, 0, 'strong', '<strong>', '</strong>', 'b', 4, '1');
INSERT INTO exp_html_buttons VALUES (2, 1, 0, 'em', '<em>', '</em>', 'i', 3, '1');
INSERT INTO exp_html_buttons VALUES (3, 1, 0, 'h3', '<h3>', '</h3>', '3', 2, '1');
INSERT INTO exp_html_buttons VALUES (4, 1, 0, 'h2', '<h2>', '</h2>', '2', 1, '1');

# no categories please
TRUNCATE TABLE exp_category_posts;
TRUNCATE TABLE exp_categories;
TRUNCATE TABLE exp_category_groups;
TRUNCATE TABLE exp_category_field_data;

# no weblog entries please
TRUNCATE TABLE exp_weblog_titles;
TRUNCATE TABLE exp_weblog_data;
TRUNCATE TABLE exp_weblog_fields;

# just one weblog field
INSERT INTO exp_weblog_fields VALUES (1, 1, 1, 'body', 'Body', '', 'textarea', '', 'n', 0, 0, 'blog', 0, 'date', 'desc', 0, 10, 0, 'n', 'ltr', 'y', 'n', 'xhtml', 'y', 1);
ALTER TABLE exp_weblog_data DROP field_id_2, DROP field_ft_2, DROP field_id_3, DROP field_ft_3;

→ Download the Title plugin, version 1.1

By default, the plugin will output a title, formatted with xhtml light (you don’t need that plugin, by the way). In some cases, you can use the custom_field-parameter to display a custom field of your choice instead of the title, which could be useful for multilingual sites. The closing tag is not required.

Entry title

{exp:title:entry}: Get the title for a weblog entry.

Parameters

• entry_id
• url_title
• weblog_id
• weblog (the short name of a weblog)
• custom_field (the short name of a custom field)
• show_error (only in combination with the custom_field parameter, defaults to “no”)

Examples

{exp:title:entry entry_id="15"}
{exp:title:entry url_title="{segment_2}" weblog="default_site"}
{exp:title:entry url_title="{segment_3}" custom_field="title_{language}"}

Category title

{exp:title:category}: Get the category name for a category.

Parameters

• category_id
• url_title
• category_group
• custom_field (the short name of a custom field)
• show_error (only in combination with the custom_field parameter, defaults to “no”)

Examples

{exp:title:category category_id="18"}
{exp:title:category category_id="C24"}
{exp:title:category url_title="{segment_4}" category_group="1"}
{exp:title:category url_title="{segment_3}" custom_field="title_{language}"}

As you can see, you can use C24 as input for the category_id parameter. The C will be ignored.

Weblog title

{exp:title:weblog}: Get the title for a weblog.

Parameters

• weblog_id
• weblog_name

Examples

{exp:title:weblog weblog_id="3"}
{exp:title:weblog weblog_name="{segment_1}"}

Site title

{exp:title:site}: Get the title for a site.

Parameters

• site_id
• site_name

Examples

{exp:title:site site_id="1"}
{exp:title:site site_name="{segment_1}"}

New in version 1.1 – 2007.11.12

• Added category title
• Added weblog title
• Added site title

→ Download the Nice Date plugin, version 1.0

Parameters

• date (any date string)
• format (just like the Date Variable Formatting)
• localize (yes or no, defaults to no)

Examples

{exp:nice_date date="2007-05-20" format="%F %j%S, %Y" localize="yes"}

This will output something like May 20th, 2007.

{exp:nice_date date="{segment_3}-{segment_4}-01" format="%F %Y"}

For a url like http://www.domain.com/index.php/blog/archive/2007/05/, this will output May 2007.

Instead of clicking a month, waiting for the page to load, look through the entries, click Back, repeat, rinse, etc, you can now get served almost immediately. So, how to go about and do this, you ask? Let me explain.

Create your templates

First of all, make sure your archives work without all the fancy stuff. Create your list of archive links with either the Archive Month Links Tag or my own Yearly Archives plugin, and make sure those links work. Also, make sure your list has a specific id — for example: “ya” — so we can refer to it later on. Once that’s done, we can begin progressive enhancement.

In a separate template, put your weblog entries that you’re going to retrieve with Ajax. This should be a very basic template: you’re going to use its output to refresh your normal archives page. Something like this:

<ul>{exp:weblog:entries weblog="blog" display_by="month" sort="asc" disable="custom_fields|member_data|pagination|trackbacks|categories"}
 <li>{entry_date format="%d"}: <a href="{url_title_path=blog/entry}">{title} ({comment_total})</a></li>{/exp:weblog:entries}
</ul>

Add some JavaScript

I’m not going to start a discussion about JavaScript libraries here. In this case I’m using Mootools v1.00, which gives me an excellent start to work with. For the actual magic to happen, you need a custom script. I prefer to objectify my JavaScript, which means you could start like this:

var YA = new Object();

We’ve just created an object called YA (as in Yearly Archives), that we’re going to extend with several functions.

YA.init

YA.init = function() {
 window.addEvent('domready',function() {
  if (!$('ya')) return;
  YA.build();
  $$('#ya a').each(function(el) {
   el.addEvent('click', YA.get);
  });
 });
}

The init function adds an anonymous function to the domready-event, which will fire as soon as the DOM is ready (duh). The anonymous function checks if an element with id “ya” exists, executes YA.build() and adds the function YA.get() to the onclick event of each anchor in the ya-element.

YA.build

YA.build = function() {
 // create result div
 this.container    = new Element('div');
 this.container.id = 'ajaxresult';
 this.container.injectAfter($('ya'));

 // create throbber
 this.throbber = new Throbber('throb-target');
}

The build function creates a div-element. This element will be filled with the archive entries: it’s the container for the results. After it’s created, it’s inserted immediately after the ya-element. Secondly, a throbber is created to indicate activity. I’m using my own Throbber class for that one.

YA.get

YA.get = function(ev) {
 var ev = new Event(ev);
 if (ev.shift || ev.control || ev.alt || ev.meta) return;
 YA.throbber.on();
 YA.load(ev.target.href);
 ev.preventDefault();
}

The get function is fired each time an anchor in your archive list is clicked. The script aborts if a key was pressed simultaneously. It then turns the throbber on, tells our YA object to load the entries linked by the anchor and prevents the default action from happening.

YA.load

YA.load = function(url) {
 var url = url.replace('group/template','group/basic-template');
 new Ajax(url,{
  onComplete:function(r){
   YA.container.setHTML(r);
   YA.throbber.off();
  }
 }).request();
}

The load function is responsible for the Ajax request. First, we need to modify the url so it points to our basic template, instead of the full archive template. Change the group/template and group/basic-template bits to whatever works for you. We then call the Mootools Ajax class and add an anonymous function to its onComplete parameter, which will insert the results into the container we created with YA.build and turns off the throbber.

That’s it!

Or is it? There’s only one step left: execute the init function, thus:

YA.init();

Now we’re done. Want to see it in action? Check out my archives. They’re in Dutch though, but the effect is the same.

Path to relativity

You can define any number of variables in your path.php file, which will be globally available, just like the standard URL segment variables. This means we can also define a {last_segment} variable, if we add some clever code.

function getLastSegment($uri)
{
 if (!strlen($uri)) return '';

 if (substr($uri,-1,1) == '/')
 {
  $uri = substr($uri,0,-1);
 }

 return substr($uri,(strrpos($uri, '/')+1));
}

At the bottom of your path.php file (but before the ?>) add the above function. This function will check $uri — a variable created by the index.php file and available for use — for the last segment, after stripping a possible trailing slash. Now you only have to call the function to retrieve your last segment. Add it to the $global_vars array.

$global_vars['last_segment'] = getLastSegment($uri);

Presto, you’re done! Just use {last_segment} anywhere in your templates and experience the joy of relative segment variables.

What’s this? A library?

Well, yes. It is. I’m using the compact JavaScript framework Mootools to make things easier. There’s nothing stopping you from altering my example to a library independent version, though… Enough with the small talk, let’s get crackin’!

var Throbber = new Class({
 initialize : function (target) {
  this.target  = $(target);
  this.status  = 0;
  this.img     = new Element('img');
  this.img.src = arguments[1] || '/images/throbber.gif';
 },

 on : function() {
  if (this.status == 0) {
   this.target.appendChild(this.img);
   this.status = 1;
  }
 },

 off : function() {
  if (this.status == 1) {
   try { $(this.img).remove(); } catch(x) { }
   this.status = 0;
  }
 },

 toggle : function() {
  if (this.status)
   this.off();
  else
   this.on();
 }
});

Let’s go through the code, shall we? First of all, we define our new throbber class: var Throbber = new Class();. The initialize method will be executed upon class instantiation. In this case, we’ll need a target element to put the throbber, the status is set to 0 and an img element is created. The source of this image is either the second (optional) argument, or the default source: /images/throbber.gif.

The on method will append the image to its target and set the status to 1. The off method will remove the image from the DOM, if it’s not already gone (for example by an innerHTML call). The toggle method will either execute the on or off method, depending on the status.

That’s all there is to it! We’re now ready to put this baby in action.

Examples

Basic usage is easy. Just instantiate the class, giving at least one argument: the id of the target element, and turn your throbber on and off by using its methods. With Ajax calls, you can turn it on right before you make the call and turn it off as soon as the call is finished.

var throb = new Throbber('throb-holder');
throb.on();
// some more code
throb.off();

Check out this straight forward working example, which demonstrates the toggle method.

Need more control?

I chose to keep this class simple, but for extra control you could extend it by adding some attributes to the throbber image, like alt, class or id. Then use some clever CSS rules to display the throbber exactly how you like it.