April 18, 2008

ExpressionEngine plugin - Send Tweet

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.

Continue reading "ExpressionEngine plugin - Send Tweet" »

April 11, 2008

Macromedia and Adobe - newly combined?

I had to reinstall my CS3 package today and got a surprise when I logged in to retrieve my serial number. On the page listing your registrations it says "We’re making improvements to support the newly combined Macromedia and Adobe community". Wow? What can I say? Two years in the making and you still can't view the serial numbers of your licensed products.

I sure hope this only temporarily, or the Adobe customers will have to pay the bill in the form of foolish costs to call centers that just tell people what their serial numbers are. There's also a link to your Adobe registered products that is "Temporarily Unavailable". Good thing I'm not in a hurry then, after all I just make a living from Adobe tools... Luckily there's warez sites with serial numbers around, so you at least have a chance to run your software ;-P

Oh - and did I mention why I had to reinstall the entire CS3 package? Since I was part of the Dreamweaver Beta and I forgot to uninstall the software before it expired, I had to delete it manually by searching for files (The uninstaller would not start since it was expired too...). This in turn prevented it to be installed when I got my CS3 package. Not having Dreamweaver isn't such a big deal any more. I much prefer FireBug and TextMate, but Dreamweaver wasn't the only bit that didn't install.

The Dreamweaver Beta also installed Device Central and Bridge and the CS3 installer was unable to remove these as well. Another problem I've had recently is that my Photoshop CS3 crashed upon every Open or Save attempt. The last drop was that I needed Device Central yesterday and it claimed my product was expired, so I bit the sour apple and spent an hour deactivating, uninstalling and reinstalling it all. Amazing how much stuff the uninstallers actually leave behind.

Update: Photoshop and Dreamweaver now works, but Device Central just says "License Expired". It appears to be impossible to reinstall just this one bit. Any suggestions welcome!

Update 2: The CS3 cleanup script did the trick when used on level 2. Blahhh... what a day to spend a day :(

Here's something to cheer up anyone with similar problems: Elijah Wood gets mortified.

April 02, 2008

Portfolio and update

Lille.jpgAbout two years ago, I quit my own company to go freelance. I was working on a huge project with more than 50 small Flash apps, but I left the project some months ago more or less out of frustration. It's now more than three years since it was started and there's still nothing I can show publicly.

Well, I've not been sitting idle. I've made a kids game (with Netron) that has gotten rave reviews. The game was done in both Norwegian and English and it will soon get worldwide distribution in even more languages. With a fun storyline, more than 40 minutes of animation, 30 mini-games and a drawing program it's a solid package of kids entertainment. The game targets kids 3-10 but should work well for childish grownups as well.

I've also done an awesome looking 3D map for an amusement park (also with Netron) as well as changing the backend of Flashmagazine to ExpressionEngine. I've also been working on an AS3 version of an Open Source project that I'll get out the door soon. It's lagged behind because of fun commercial work, but I'll get it out within the end of next week.

tusenmap.jpg

I've also gotten myself an office downtown Oslo, in Storgata 51, straight in between the town centre and Grunerløkka. I share offices with two product designers that has a really cool device, one designer as well as three architects.

The architects website was designed by Junebug and I converted the design to ExpressionEngine and set it up. I'm yet again amazed at how flexible EE is. Every item written on the site can be associated with an architect and/or a project. If you look at an architects page, you can also see all the latest news for the projects they work on. Every project page also shows the news associated with it, so it's effectively a full project history. Every project has a unique RSS feed so anyone can easily track the progress in a project with next to no extra effort for the one filling in the content in the CMS. Really pleased with how the site tuned out.

March 25, 2008

My first EE plugin

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 :-)

March 17, 2008

Phillip Kerman also loves the Adobe Updater

I'm not very fond of the Adobe Updater and now there's even a hate-song out there :D

More fun from Phil here and some Flash and AIR bashing here as well.

March 16, 2008

Mini ExpressionEngine Dictionary

icon_ee_logo.jpgWhen I started using ExpressionEngine (EE), many of the words used in the documentation was confusing. I made a list as I went along and I'm posting it here in case others find it handy.

Control Panel - This is where you set up your EE website, the backend if you will. This is where you edit Templates, Weblogs, Categories, Members and all aspects of your site.

Category - A list of elements that may have URL/image/description properties related to them. Categories are assigned to a Category Group. Categories may be added dynamically by site users based on the permissions you set (does not require the use of the Control Panel). May be considered as "tags". You can assign multiple categories to each Weblog Entry.

Category Group - A group of categories. May hold several Category Fields. You can assign any combination of Category Groups to each weblog. You'll find these categories under the Category tab when you add content to a weblog.

Category Field - An input field. May be of type Text, Texarea and Dropdown.

Embedded Template - Any template can be nested inside other templates. If an element is repeated across pages, break it into it's own template and embed this instead. That way, changes to it will be site-wide with just one edit.

Field - An input field. May be of type Text, Texarea, Dropdown, Date and Relationship. Using plugins, you can also get various WYSIWYG editors. Text types may be set up to support formatting. Dropdowns may get their content from from another custom field. Relationships are like "Advanced Search". They may grab content from other Weblogs and vice versa. Very powerful stuff that takes a little fiddling to learn.

Field Group - A set of custom fields that can be assigned to a Weblog. A typical set may be title, image, summary and article. A products weblog (section) use a Field group that has fields such as product name, weight, specs and price.

Template - A HTML-page with placeholders for fields that ExpressionEngine will fill in. The can be a complete or just a part of a page. The templates are setup to pull content from one or more weblogs. The Field Groups assigned to each weblog will decide what data EE will be able to fill into each template.

Template Group - A group of templates. Grouping affects the rendered URL's. If you want long, descriptive URLs, you can achieve this by grouping templates. To end up with a URL like this: http://www.adobe.com/aboutadobe/pressroom/ you can create a Template Group called 'aboutadobe' and create a 'pressroom' template in this group.

Weblog - Usually used to create sections in a site (Home, News, Products, About). Each Weblog have different design, user rights and input fields. Weblog can also be considered a Template group. Weblogs are only editable from the Control Panel.

Weblog Entry - A single piece of CMS content / article

March 15, 2008

Getting to know ExpressionEngine

icon_ee_logo.jpgI've recently changed the Content Management System we use for Flashmagazine. The old CMS was built in 2003. It was based on PHP and had a fancy Flash 5-based backend. The system is no longer in active development, so I needed something new for Flashmag. I thought others may be interested in hearing why I ended up using ExpressionEngine, so here it goes.

I spent a good deal of time researching potential CMS systems such as WordPress, Movable Type, Joomla, Drupal and EZ Publish. WP and MT just would not cut it. They were too simple, but I use them on several sites so I know what they're suited for. EZ Publish looked good. I bought and read an entire book about EZ Publish. If you ever need a book about EZ Publish, DON'T ever buy this book. It's really poorly written and totally convinced me not to go further with EZ. Drupal looked really flexible, but really seemed like a lot of work to get anywhere. It's kind of the choice for nerds that want to use the tool that "all the other cool kids use". Joomla looked alright, but it's history is terrible. So much useless fighting and it seems it may even go on. I was really uncertain what to do next.

I asked my buddy David Vogeleer what he used. He used ExpressionEngine at work and said he loved it. Expression Engine (EE)? Never heard of it. I checked it out and I instantly liked the website. The syntax looked good and easy to learn. Hmm... They offer managed servers on clusters so I don't need to fiddle with the setup? Cool. A bunch of official and user contributed plugins and extensions? Really good documentation (with user comments), wiki, knowledge base, active forum with lots of users (but also very active professional admins)? Wow. This really looked promising.

I downloaded the free version, played a bit with it. Tried the $10 hosted trial and sent an email with a bunch of questions and got good answers within 2 hours. That really impressed me!

I thought a bit about this and decided to give it a try. Before starting, I bought and read a very well written PDF book that I recommend buying for anyone getting started with EE. The PDF is a compilation of a free article series but the PDF is worth the $25.

After reading, I used the $10 trial and started setting up. Flashmag had content in four main categories; News, Articles, Reviews and Tutorials. Articles are really just long "News" stories, so I figured I'd just merge the two and rather highlight the articles and other content in a special sidebar. After setting the structure, I imported most of the 1500 stories in the Flashmag archives easily using the import utility. I spent a couple days tweaking and setting up the required templates and lo and behold - a site with 1200 articles converted to a much more powerful system.

I've now signed up with EngineHosting and pay $40 a month. Commercial sites pay a $250 license but that is reduced to $200 when you sign up for the hosting as well. Not bad?

I've now used EE for two more sites and I'm amazed at how flexible it is. It's not like everything is golden, but the good by far outweighs the bad. So here's my take on the pros and cons:

ExpressionEngine Pros
- Docs like no other CMS I've seen (I've never been this impressed. They even rival php.net at times)
- Development speed
- Flexible architecture
- Extendable through PHP, Plugins or commercial extensions
- A minute to learn, but not a lifetime to master
- Intuitive tag language that's easy to read and maintain
- Modules for virtually every occasion
- Support!
- High quality hosting at a very reasonable price
- Very helpful and responsive community

ExpressionEngine Cons
- Image upload / organization could definitely have been solved more elegantly
- Automatic thumbnails or scaling of images only available using a third party (non-certified) plugin (great quality tho)
- Not an app framework (but it's very flexible). You can bend it to do many things, but it's a CMS at it's core. You can also customize a lot using plain PHP straight in the templates.
- Some default settings are for bloggers, not professional sites. Most professional users may want to turn off these functions:
1. Admin > system preferences > emoticon preferences to turn off emoticon preferences
2. Weblog Administration -> Weblog Management -> (your weblog here) -> Weblog Posting Preferences -> Automatically turn URLs and email addresses into links?
3. Versioning of templates / entries are turned off by default
- There gotta be an easier way to loose the index.php in the URLs

If you have other pros/cons, please add them to the comments! Before starting the conversion process, Jarle told me that I should sign up for Google's webmaster tools. If you own a site and care about SEO, sign up to see how you can fix any problems (according to Google's spider. If you check EE out and end up getting a license, feel free to click this link and I'll get a little affiliate commission :)

PS: I haven't added many new features to Flashmag yet, but that'll come soon.

 

Jarles Link to Trygg og Sikker, Rene's link to his sweet, new Ariel Atom 2, My links for returning the favor