Flashgamer

Just a quick update - I've published a very simple plugin for EECMS that can redirect based on group_id. I made this so that admin users could go to one URL and members somewhere else after login, but you could use it in other ways as well. I also use it for basic redirection in a SAEF-based application based on EE, so it's good for that as well.

I love the Expressionengine CMS and these days I do a lot of projects with it. Today I lost an hour hunting for a stupid bug, due to a strange default. In my current project I needed a tooltip, so I did what I've done in dozens of projects before: I added jQuery + jQuery Tools at the top in addition to my own "ready-function" that would init the tooltip. It didn't work and it took me a long time to figure out what this error meant:

Uncaught TypeError: Object [object Object] has no method 'tooltip'

It looks like there's a problem finding the object, right? All the links I found led to things about the incorrect loading sequence of the Javascript files, but I knew that wasn't the fault here. I DID include the files in the right order. It worked standalone, but not in my EE templates. In other words - there had to be something inside EE that caused the problem? Strange!

A very nice module that I've only had a need for recently is SafeCracker (formerly called Stand Alone Entry Form or SAEF for short). It turns out - even if you don't use any features that require it, SAEF will include it's own version of jQuery and JQuery Tools? The code will be embedded at the bottom of your form, so even if you have everything in order at the top of the file, it'll be overwritten at the bottom. 

Fixing the problem is  as easy as adding a tiny snippet to your Safecracker tag

{exp:safecracker ...  include_jquery="no"}

This is 2012 and JS libs are updated on a weekly basis to fix browser bugs. Auto-incuding unrequested features based on outdated libraries is NOT the way to go (as default). Hope this post can help others to not spend time on this...

Back when I started this blog in 2006, I installed Movable Type and just left it there. Kind of scary given the amount of hackers, but apparently MT is pretty safe now that WordPress has taken over? I’ve finally managed to move this blog to a more recent CMS, so that was certainly about time… I didn’t want to spend time on a new setup, so I tried installing Wordpress - just because it takes virtually no time. It turned out that my hosting company had not yet upgraded their PHP to the version required by Wordpress, so I had to look at other options.

I love ExpressionEngine, but setting it up for something as simple as a blog is totally overkill. Then it dawned on me that the brilliant Bjørn Børresen had created some simple and decent looking EE templates over at ThemeForest. Turns out he has found some really good solutions, so if you just want a simple EE site - go check these out. They come complete with a bunch of Bjørn’s nifty extensions as well so the blog has Gravatar support, thumbnail generation and video embedding support. By just copying the theme files to the server at setup time, everything is set up for you automatically. Very neat!

Next part was moving all the contents of the old blog into EE and the excellent DataGrab module by Andrew Weaver came to the rescue. All my content (including comments) converted perfectly on the first attempt and all I’ve had to do are some very minor tweaks to the content and templates. Have to say that I didn’t expect this to go as smooth, so kudos to Bjørn and Andrew! I also threw together a quick, static site for my ltd company while I was at it.

Now that all my projects are finished for this year and I’m almost done with all other private projects, I will kick back with some Android and iPhone development on my brand new 27” monitor (I needed more pixels!). If you have any challenging Flash projects in January/February - please get in touch! I have extensive device experience and I wouldn’t mind doing some Stage 3D either…
(Note: the usual banners and microsites are not challenging/interesting…)

While on the topic of 3D - we just launched a new version of away3d.com!. I did the ExpressionEngine part of it, Richard handled the JS/CSS and Alejandro got all the old content into the new site plus a bunch of other things. He also has the role of webmaster for the site.

Great fun to do another EE site and my first time working with the Forum module. Skinning that thing is ... quite a job. It took me about two days to get all the skinning right and it’s far from as easy to work with as EE in general. We also needed a custom field to go with all forum posts (to enable filtering) and adding that wasn’t exactly easy either as the classes are not really written to be extended like that. I ended up extending the base class and overriding the relevant methods. The resulting file contains quite a bit of copied code, but it should be fairly easy to maintain.

Please go check it out and tell me what you think?

I recently was hired to clean up a mess of a site done in EE1. I’ve moved most of my projects to EE2 by now, but this was a very fun task! The project was in such a dire state that I’ve never seen anything like it. Every template was strewn with hardcoded php and sql statements and not a single one of the many nice features in EE had been used. These guys had obviously never ever used EE but claimed to be experts. The company worked on the site for several months and eventually more or less gave up.

My first thought was that I had to make this more usable. The control panel looked like a mess so I decided to redo the whole thing from scratch. After 3 days of work, the client now has a site that is much simpler to use. All the features are the same, but 70+ templates have been reduced to ten, 20+ channels have been reduced to four, CSS reduced to half the size, all hardcoded parameters made dynamic and so on. Navigating the EE backend is much, much easier now.

As part of the job, I came across the need to remove duplicate output from EE. I was outputting a list of {categories} but since it was inside an entries loop I got lots of duplicate html. I could have solved this by doing some manual queries, but that may fail if EE is updated. Looping over a dataset of entries is more or less what EE was made for and just stripping off the duplicate code seemed like the most efficient solution.

I couldn’t find a smart way to do this, so I made a quick plugin that solved the problem. I just love how easy these things are with php and EE! The plugin is super easy to use and I’m posting it here so that others still using EE1 can use it.

The plugin works as a tag pair. Wrap it around any block of output to remove duplicate lines:


{exp:removeduplicatehtml}
<img src=‘image1.jpg’ width=‘65’ height=‘30’ />
<img src=‘image1.jpg’ width=‘65’ height=‘30’ />
<img src=‘image2.jpg’ width=‘65’ height=‘30’ />
<img src=‘image2.jpg’ width=‘65’ height=‘30’ />
{/exp:removeduplicatehtml}

This will produce an output like this:

<img src=‘image1.jpg’ width=‘65’ height=‘30’ />
<img src=‘image2.jpg’ width=‘65’ height=‘30’ />


Click here to download

These days I do more and more sites and apps using ExpressionEngine (EE) as the backend. I recently did my 10th EE-driven site and I have request for a couple more in the pipe. It seems that EE is really starting to take off and also so with the publishers. I recently got a request to review an EE2 book from Pragmatic Bookshelf and thought why not?

I’ve read a couple books on EE, but this is the first I’ve seen that covers the new ExpressionEngine 2. The book is written by Ryan Irelan (of EE-insider fame) and has a foreword by Rick Ellis (the creator of EE) so it sure seems solid.

The book covers everything you need to know, from the initial setup to building a complete site. Every core feature is explained and the examples are well written and very easy to follow. When learning to use software through converting a site like I did, you tend to learn only the parts that you think is relevant. Learning from a book that covers all topics is good as you’ll know even more about those not so often used features that a very nice to have. I didn’t learn anything new in the first half of the book, but from there and out there were several useful bits that I picked up.

Especially the chapter explaining how to build relationship between entries is very well thought out and written. This is something I’ve always had a hard time with, but now I feel that I fully understand the power of it. It’s the kind of feature that I’ve had to do a lot of testing to get right, but thanks to this chapter I now feel that I’ll get this right the first time.

On thing I missed in this book was the solid discussion that you’ll find in Michael Boyink’s PDF-book  on how to plan when building a site from scratch. How does it make sense to structure the site? What requires that you make it it’s own ‘channel’ and how can you break down existing designs into smaller bits. The ‘EE2 - A quick-start guide’ is however much more complete in that it goes through and explains every core feature in a pedagogically correct way, but I would probably recommend someone planning to convert a big site to EE to read both books.

All in all - many things to like about this book. Chapter 10 that covers optimizing your EE site alone is worth the money for this book as getting the caching right can actually save you from server upgrades. It’s a well written guide for the complete beginner and covers all the topics that such a book should. It could however have been more complete and covered more ground. This is however enough to get you started and from there on, you can lean on the excellent EE documentation and forums.

Some of the sites I convert to ExpressionEngine (EE) are made using Wordpress. I really like Wordpress. It’s super easy to use and set up, but for more complex sites it’s just not up to the task. EE is the soulution, but how do you migrate the old content into EE? There’s several possible solutions, but they all seemed cumbersome or outdated so I figured I’d make something better and easier.

Adobe AIR makes it a breeze to make utility applications like this and the result is “WP2MT”, a small app that reads the XML file you can export from WordPress and saves the contents to the Movable Type Import Format that EE can import from. Click the Badge at the bottom to install the application.

How it works

Start by exporting the Wordpress content to the WordPress eXtended RSS or WXR format. Depending on what version of WordPress you use, you’ll find this under the Tools or the Manage menu in your WordPress control panel.

Install and start the app. Click the “Open File” button at the bottom and browse to the XML file you just exported. The app will now show a summary of the XML file, showing the number of posts, pages, comments and discarded items (revisions of articles or attachments). You’ll also see how many of these that are unpublished and you can choose if you want to include these.

Next hit the export buttons to create a text file containing either the pages or posts. That’s it.

One thing not included in the MovableType format is the original URL of the entry, so I’ve added a custom field for EE that’s called ‘EXTRA FIELD-1’. By making an extra field for this, you’ll be able to look up what url entries had before and you can also check against this field to see if an entry was added after the export.

Feedback is much appreciated and if you have WP files that won’t import, send them to jenschr [at) gmail [dot) com and I’ll see if I can fix it.

You can also download the .air file directly from here. If you don’t use the Badge above, you may need to install the AIR runtime as well.

ExpressionEngine (EE) is the CMS system I use for Flashmagazine and other sites I build these days. While not related to Flash (as most of the content on this blog is), EE is a flexible way to create advanced websites fast. I review a lot of Flash related books for Flashmagazine and when asked by Packt Publishing to review a book about ExpressionEngine I felt that it could also be of interest to the Flash users reading this blog. Most of us build websites as part of our job and this book provides a basic introduction to a great CMS system.

There are not many books about ExpressionEngine. This is in fact the only book that’s listed on Amazon that covers EE exclusively so that’s certainly what one would call a competitive edge. The only other book that I’m aware of is Michael Boyink’s PDF book that I’ve also read.

TITLE: Building Websites with ExpressionEngine 1.6: A clear, concise, and practical guide to creating a professional ExpressionEngine website
AUTHOR: Leonard Murphy
PUBLISHER: Packt Publishing (August 8, 2008)
ISBN: 978-1847193797
PAGES: 373 pages B/W
CD: Not required as the code is simple enough that you’ll just type it yourself
PRICE: £23.74 UK / $32.97 USA / $42.29 CAN
Click here to order

This is a book for the complete beginner. The only requirements are that you know a bit of HTML and CSS. The book is well written and throughout the book you’ll build a website that sells - guess what - Toast. While a fun example, this book does not dwell a lot on design but if you know your CSS you’ll have no problem building something that looks better looking than the example in the book. Not focusing much on design is probably a good move as well since that would detract from the main purpose of explaining EE.

Content

The book starts off with a quick introduction to EE and what it can do. The next chapter explains setting it up on a Windows development machine. Here the concept of hiding “index.php” from the URLs is covered. Having that at the start of the book is an odd choice. I’d rather stick that in the Appendix as editing .htaccess files is not for the faith at heart.

Next up is the start of the main exercise in the book - building the Toast website. Working with weblogs and templates are well covered and important side-issues such as defining a custom 404 page and static pages are also explained. Chapters 6, 7 and 8 cover the modules for Members, Calendars and Galleries.  Since I already know the basics of EE, these were the only chapters that I really learned anything from as I haven’t used any of these modules yet. Each module is well explained and I gathered that I’ll probably never use the Gallery module. Using custom weblogs with Lumis Image Sizer plugin is just so much more powerful.

The last chapter rushes through the concepts of Plugins, Modules and Extensions. It delivers brief explanations of the Discussion Forums, the E-commerce module, the Wiki, searching, status groups, categories and related entries. Up until this point in the book, everything is very well explained, but I feel that the end of this chapter is kind of a rush. Too many things are touched upon and not explained well enough.

What I am missing

The dynamic nature of EE is not well explained. Every EE user will be bummed at how this works initially and a little on this would be of great help for the beginner. Basically, the URL decides a lot when it comes to what EE displays, so when your URLs get long, some content may no show up as expected. This is usually solved by adding the “dynamic=off” parameter to your weblog:entries tag.

A very powerful feature in EE is related entries and reverse related entries. The book offers a good example of this, but it is not explained well enough. A quick search for “related entries” at the EE Forums will tell you that this is something that is hard to grasp.

The book provides little discussion around how to structure your site. Beginners are usually confused by all the new lingo and it takes a bit of explaining to get this all correct. When it comes to building sites, how you combine Weblogs, Templates, Template Groups, Field Groups will decide how flexible your setup is.

Embeds and Segment variables are explained, but only briefly. These are such an important part of building an EE site so more info on this would have been useful.

Another thing that I would expect in a book like this is some information on how to import an existing site / blog into EE. Many readers will come from a different CMS and while this is explained on the EE wiki, an example of importing for instance a Wordpress blog would be helpful.

Conclusion

This is a beginners book. It explains all the core features of EE and each feature is well explained. It provides insightful information on all topics and if you’re setting out to learn ExpressionEngine, this is a good place to start. The book could certainly do with more real-world examples and better explanations of the more complex things with EE (as mentioned above) but this is a solid book for a first time author.

In the next edition of this book (for EE 2.0?), I’d cut down on the last chapters that just rushes through features of modules such as the forum, gallery and e-commerce and rather explain more of the intricacies of the weblog module. This is after all where most of the work will be done and just rushing through provides little useful information.

A small introduction to online sources of information could be a good idea as well. Here one could briefly mention useful plugins/modules/extensions with links to more information.

This week, I wanted to find an easy way to maintain a Twitter channel for Flashmagazine. By following this Twitter user, you can stay up to date on current Community News, Reviews and Tutorials and get notified the instant something interesting happens.

I just love the ease of ExpressionEngine. Since I only could find EE plugins that can read from Twitter, I figured I’d make a plugin that can send messages as well. After some thinking, I made/setup/tested/implemented one in just 4 hours. I’m by no means a whiz with PHP, but making EE plugins is really easy and well documented.

I’ve tested the plugin for a couple days and it appears to work well, so I guess it’s time to release it for others to use.

About the plugin

This plugin will send messages to your Twitter.com account. I originally made this to set up an automated Twitter feed for my site Flashmagazine. Just seconds after I publish a new story, my subscribers can be notified of it. You could use this for a lot of other purposes as well, so feel free to email me with other use cases

The plugin receives a string of text and send it to Twitter. To prevent this from happening the script will write the text string to a file. Before sending another Tweet, the script will check against the contents of the text file on the server. This is a little “expensive” but should only be a performance hit on huge sites.

Setup

You will need to do some manual editing of this PHP file for this to work:

- Open the plugin PHP file in your favorite PHP editor
- Change the username and password variables at the top of the class to match your Twitter.com credentials
- Copy the file to your ExpressionEngine plugin folder
- Open the plugin settings in the EE Control Panel to look up syntax and check that the script installed properly

That’s all. The plugin works as a tag pair:

{exp:send_tweet}Text to send to twitter{/exp:send_tweet}

Usage Send_Tweet plugin for EE

To use the plugin to notify Twitter of new stories, paste this into your RSS template:

{exp:send_tweet}{exp:weblog:entries weblog="news" limit="1" rdf="off" dynamic_start="on" disable="member_data|trackbacks"}{title}: {comment_url_title_auto_path}{/exp:weblog:entries}{/exp:send_tweet}

This code will send the title and URL from the latest story published to Twitter. If the URL is long, Twitter will use tinyurl.com to shorten it for you. Keep in mind that Twitter won’t accept messages over 140 characters so keep the titles short to make sure the URL’s are not cut off.

Make sure you set the weblog parameter to reflect how you set up your site and that {comment_url_title_auto_path} works with your setup (You may need to use a different tag such as title_url, just check what is used in your RSS file). You can put this code anywhere in the RSS file. I have mine at the top of the PHP file.

How to make Twitter update automatically

Feedburner is a service that will grab and republish your RSS file. They offer a service that you can “Ping” when you have updated your site. They will then go grab the latest version of your RSS feed and re-publish it.

ExpressionEngine can “ping” FeedBurner automatically. All you need to do is to set up an account with FeedBurner and open the EE Control Panel. Go to Admin -> Weblog Administration -> Default Ping Servers and add the URL http://ping.feedburner.com.

(Note: you may use any other XML-RPC service. Feedburner is just a suggestion from me. http://rpc.pingomatic.com is another good service that’ll do the same, but for a bunch of sites at once)

Debugging

To see debug output from the plugin, edit the plugin file (as noted in the comments) and wrap the output with an empty node like this:

While making my second EE site, I needed a way to create a Slideshow from thumbnails. I found a slick JavaScript called Shadowbox that can display images, Flash, movies and more. It’s kind of like LightBox, but better and fully standards compliant (click the images of Hoss or Aral to test). Using the Shadowbox approach, you can accommodate users with anything from 2” to 30” screens easily. If a user have a nice, expensive 30”, why not give them a nice big image to feast their eyes on?

I really like EE, but the image handling is a bit weak.  I couldn’t find a user friendly way to associate a series of images with an entry, so I figured the easiest would be to have the user upload/add images separated by a comma and then do some clever parsing on this.

EE isn’t really clever at doing string parsing at all. You can enable PHP in the templates for complete flexibility, but that has some uncool security implications. I figured there had to be someone with a similar problem already, but I couldn’t find a plugin that could do what I wanted so I figured I’d roll my own. It was surprisingly easy and the result is the SplitAndWrap-plugin (feedback wanted!).

Here’s the doc on how it works:

Usage SplitAndWrap plugin for EE

Splits a string based on a delimiter and enables you to wrap code around the returned elements. The plugin works as a tag pair. You can wrap each returned element with code like this:

{exp:splitandwrap char="," str="image1.jpg,image2.jpg,image3.jpg"}
  <img src='{splitted}' width='65' height='30'/>
{/exp:splitandwrap}

This will produce an output like this:

<img src=‘image1.jpg’ width=‘65’ height=‘30’/>
<img src=‘image2.jpg’ width=‘65’ height=‘30’/>
<img src=‘image3.jpg’ width=‘65’ height=‘30’/>


The {splitted} variable will be replaced with each element across the loop. You’ll probably want to use this with a custom field, so to make a list of comma separated names, just do like this:

{exp:splitandwrap char="," str="{my_field_of_names}"}
  <li>{splitted}</li>
{/exp:splitandwrap}

Here is a more advanced example where I use a comma separated list of images with the excellent imagesizer plugin to produce a list of clickable thumbnails leading to the original image:

<ul class="img">
{exp:splitandwrap char="," str="{embed:images}" parse="inward"}
<li class="img"><a href="{splitted}" rel="shadowbox[myGallery];options={counterType:'skip',continuous:true,animSequence:'sync'}">
{exp:imgsizer:size src="{splitted}" width="65"}
<img src="{sized}" border="0" class="border_a"/>
{/exp:imgsizer:size}
</a></li>
{/exp:splitandwrap}
</ul>

Notice the parse=“inward” parameter. This ensures that the splitandwrap plugin is parsed before the imgsizer plugin. Without this, there’s no output. This output will work with another brilliant piece of code - Shadowbox.js - to produce a slideshow that both validates and looks good.

Shadowbox URL: http://mjijackson.com/shadowbox/
Imgsizer URL : http://www.lumis.com/

NOTE:
If used as a single tag, you can even use this plugin as general purpose string removal tool:

{exp:splitandwrap char=" " str="This is a sample text"}

The above will produce this output:

Thisisasampletext

(not really sure if that’s useful at all, but it’s an interesting side-effect)

Installing plugins in EE

Download and unzip this file and copy “pi.splitandwrap.php” to your plugins folder (/sysfolder/plugins/). That’s it

The site I made this for is now live: variousarchitects.no Click a project and try the slideshow