meteoracle

Wygwam by Pixel & Tonic is a WYSIWYG editor powered by CKEditor 3.4 and CKFinder 2.0.1 and is available as a module for Expression Engine.

It makes it very easy to set up a custom WYSIWYG editor with the just options you want to make available to the website content administrators. It’s dead simple. Until you want to change the styles available in the drop-down.

It would be great if you had an easy way of editing the available styles directly from the Module configuration, but unfortunately we can’t, so I had to hunt down the file which I eventually found here (I’m using Expression Engine 2):

/themes/third_party/wygwam/lib/ckeditor/plugins/styles/styles/default.js

This javascript file, hidden deep within the folder structure, contains the script we need to edit to get the styles we want to be easily available to the administrator whilst editing their content.

Here’s a shortened version of what you’ll find (I’ve adjusted the formatting to make it easier to read):

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}}
]);

As an example, I’d like to add a style that will highlight a paragraph with a a light green background colour, my javascript would now look like this:

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}},
  {name:'Boxout Text',element:'p',styles:{'background-color':'#EAF5F4'}}}
]);

At the moment, we’re only adding a single style element to our intended target element. What is we want a whole bunch of style rules? Well, in that case we can do this (again I’ve formatted this to be easily readable, the whole script should be kept to a single line):

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}},
  {name:'Boxout Text',element:'p',styles:{
    'background-color':'#EAF5F4',
    'border-left':'2px solid #08B1A2',
    'color':'#08B1A2',
    'font-style':'italic',
    'margin':'0 auto 1em',
    'padding':'1em'}}
]);

So there we go, we’ve given the website content administrator the ability to style their content, without giving them enough rope to hang themselves with (by which I mean make the site look awful with different fonts, colouring and styles).

With my first attempt at producing a ‘simple’ contact form I realised that the email sent by this module is very basic indeed. It reall only caters for a user to enter their name, email address, subject (which you may well have as a hidden field) and message.

It just so turned out that the firtst site I’ve attempted to use this module on is a corporate site, and they generally want the company name of whoever is using the contact form. So my contact form looked like this:

{exp:email:contact_form user_recipients="false" 
recipients="info@domain.com" charset="utf-8" form_id="contact"}
  <label for="name">Your Name: </label>
  <input type="text" name="name" id="name" value="" />
  
  <label>Company Name: </label>
  <input type="text" name="message[]" id="company" value="" />
  
  <label for="from">Email Address: </label>
  <input type="text" name="from" id="from" value="" />
  
  <label>Message: </label>
  <textarea name="message[]" id="message"></textarea>
  
  <input type="hidden" name="subject" value="A message from your 
website." />
  <input type="submit" value="Submit" class="form-submit" />
{/exp:email:contact_form}

Unfortunately when the email is sent (in plain text of course), there’s no formatting to tell what the info in the email is. For example, the body of the email from this form would look something like:

Widgets Ltd
I am writing you to find out more about your wonderful widgets. 
Please send me lots of widget based gubbins.

So, in order to tidy the format up slightly I’ve used the message field a few extra fields:

{exp:email:contact_form user_recipients="false" 
recipients="info@domain.com" charset="utf-8" form_id="contact"}
  <label for="name">Your Name: </label>
  <input type="text" name="name" id="name" value="" />
  
  <label>Company Name: </label>
  <input type="hidden" name="message[]" id="companytitle" 
value="Company:" />
  <input type="text" name="message[]" id="company" value="" />
  
  <label for="from">Email Address: </label>
  <input type="text" name="from" id="from" value="" />
  
  <label>Message: </label>
  <input type="hidden" name="message[]" id="messagespacer" value="" />
  <input type="hidden" name="message[]" id="messagetitle" 
value="Message:" />
  <textarea name="message[]" id="message"></textarea>
  
  <input type="hidden" name="subject" value="A message from your 
website." />
  <input type="submit" value="Submit" class="form-submit" />
{/exp:email:contact_form}

This will now produce something along the lines of:

Company:
Widgets Ltd

Message:
I am writing you to find out more about your wonderful widgets. 
Please send me lots of 
widget based gubbins.

Admittedly not the most beautiful email you’ll ever get, but it’s now much easier to understand what’s been sent in the body of the email, and still only utilise the simple tags available in the Email Module.

Depending on who you want to see the SAEF (Stand Alone Entry Form), you’ll need to assign the relevant weblog to their Member Group.

In my case I have a form that a registered member can submit news to, but it’s not displaying on the front end. In order to correct this, log in to the Expression Engine control panel and go to:

Admin > Members and Groups > Member Groups > Edit Group > Weblog Assignment

Here you’ll have a list of all your weblogs and you can simply select ‘Yes’ for the weblogs you wish to allow a member to add content to.

Hey presto, your form is now visible on the front end and your users can add their content.

Some settings can be an absolute nightmare to find in the Expression Engine Control Panel, and the setting for how often a user can search your site is one of them.

By default, these are the restrictions on the search priveleges for member groups:

• Admins = No restriction
• Members = 10 seconds
• Guests = 15 seconds
• Pending = 15 seconds
• Banned = 60 seconds

In order to change these, you’ll need to go to:

Admin > Members and Groups > Member Groups > Edit Group > Search Privileges

There you’ll find ‘Number of seconds between searches’. Change this and the selected user group will then be able to search however many times you want.

Hopefully you can now avoid that awful grey box telling the user “You are only allowed to search every 15 seconds”.

I was looking for a way to create a historical log of every member that logged into an ExpressionEngine site. I came across the Statistics module which I was hoping would do the job, but this module only worked to display statistics of users currently logged in to the site, very much akin to what you would see in the footer of a forum.

What I needed to do in this case was to log a timestamp of when a member logged in to the site, and the members ID so that I can pull other data available on that member to generate reports at a later date.

So, first of all I need a new database table to hold this data. It’s very simple, and here’ the SQL I used to create it:

CREATE TABLE `UserLog` (

  `ID` mediumint(9) NOT NULL auto_increment,

  `MemberID` mediumint(9) NOT NULL,

  `LoginTimestamp` int(10) NOT NULL,

  PRIMARY KEY  (`ID`)

)

Now that we have our database table, we need the code to fill it.

The code below was added into the page which the user is redirected to once they have logged in. We need to make sure that this template has ‘Allow PHP?’ is enabled and the ‘PHP Parsing Stage’ is set to ‘Output’ for this to work.

{exp:member:custom_profile_data}

  <?php

    if ({current_time} == {last_activity}){

      global $DB;

      $DB->query('INSERT INTO UserLog (MemberID, LoginTimestamp)

        VALUES ({member_id}, {last_activity})');

    }

  ?>

{/exp:member:custom_profile_data}

There we go, you can copy and paste to your hearts content, but if you’d like to know what’s going on, and perhaps learn a little something, please read on.

Firstly we need to get the {last_activity} timestamp from the member that is logging in. This is basically the most recent time the user has logged in to the site, so we employ the {exp:member:custom_profile_data} tag to let us grab it.

Inside this tag we include our PHP. We compare the {last_activity} timestamp to the {current_time} timestamp. If they match, we know the user has just logged in, and that’s when we want to add a record to our UserLog database table.

We then use the ExpressionEngine database class to insert the {member_id} and {last_activity} timestamp into the table.

So there we have it. You’re now logging every member as they log in to your site. Once you’ve got some data in there you can explore the possibilities of generating reports and statistics on this data. I’ll be doing this myself soon, so I’ll be sure to share my ideas on this.

ExpressionEngine Edit Menu Extension

Extremely useful extension for the ExpressionEngine Control Panel. It adds a drop-down menu to the Edit tab in the same mould as the Publish tab. This will save you a LOT of time when editing content.

I’ve been working on a site which users must register to gain access. I’ve removed the need for a user to create a unique username by using their email address for their username. This also removes the need for the email field on the registration form.

However, the screen name, which I’m currently using to welcome the user to the site in a personal fashion, has to also be unique. Luckily the verification for unique screen names can be removed, so John Smith doesn’t have to call himself JSmith79 just to be able to register.

In order to remove the validation you’ll need to:

1. Go into /system/core/
2. Open core.validate.php
3. Find “Is screen name taken?”
4. Comment out the if statement below there

The resulting code should look like this:

/** --------------------------------

/**  Is screen name taken?

/** --------------------------------

if (strtolower($this->cur_screen_name) !=
strtolower($this->screen_name))

{

  $query = $DB->query("SELECT COUNT(*) AS count FROM exp_members

  WHERE screen_name = '".$DB->escape_str($this->screen_name)."'");

  if ($query->row['count'] > 0)
  {

    $this->errors[] = $LANG->line('screen_name_taken');

  }

}*/

And that’s it, users will now be able to choose whatever screen name they want, without the worry of duplicating that of another user.

Today I came across the eval()’d code error in core.functions.php in ExpressionEngine.

It occurred when I was posting the result of a form to the same (PHP enabled) page, which would update the page content depending on what the user had selected.

The problem was that I was attempting to use the $_POST variable to highlight the selected <option> in a <select>. Since the $_POST variable has not been set when the page first loaded (i.e. no variables had yet been posted by the form), the error sprang up.

In order to remove the error, we can use the following code at the top of the page (where the name of the <select> is “fld_select”):

$fld_select = $_POST ? $_POST["fld_select"] : "";

This will set the $fld_select variable, which we can use in place of $_POST[“fld_select”], and avoid the error by checking to see if a post operation has been performed and setting the variable value accordingly.

Using the {exp:query} tag in the licensed version of ExpressionEngine, you can pull the most recent searches performed by your users. The snippet below pulls the last 3 searches that returned a result, and links to the relevant search results page:

<ul class="recentsearches">
  {exp:query sql="SELECT * FROM exp_search WHERE total_results > 0
ORDER BY RAND() DESC LIMIT 3"}
    <li><a href="{path=search/results}{search_id}">{keywords}</a></li>
  {/exp:query}
 </ul> 

As is usually the case with forums attached to a main site, the forum is kept seperate in either a folder (yourdomain.com/forums) or a sub-domain (forums.yourdomain.com).

With the Expression Engine Discussion Forum Module, it’s easy to display your most recent topics in one of your main website templates. This is a snippet of the code I’ve used to display and link through to the top 5 most recent forum threads:

<ul>
 {exp:forum:topic_titles orderby="post_date" sort="desc" limit="5"}
 <li>
   <h3><a href="{auto_thread_path}">{title}</a></h3>
   <p>{topic_date format="%d/%m/%Y %h:%i %a"}</p>
 </li>
 {/exp:forum:topic_titles}
</ul>

You can find a list of the parameters and variables you can use with the {exp:forum:topic_titles} tag in the ExpressionEngine User Guide > Displaying Recent Forum Topics.