My first EE plugin

25 Mar

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 smile

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

Phillip Kerman also loves the Adobe Updater

17 Mar

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.

Mini ExpressionEngine Dictionary

16 Mar

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.

Channel - Usually used to store the content for sections in a site (Home, News, Products, About). Each channel (called Weblog in EE 1.x) can have a different design, user rights and input fields. Channels are only editable from the Control Panel.

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 - Weblog changed name to Channel. See Channel.

Weblog Entry - A single piece of CMS content / article

Getting to know ExpressionEngine

16 Mar

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 smile

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