You are here


Edge Suite - Integrate Edge Animate into wordpress


In this tutorial you learn how to publish your Edge Animate composition on your wordpress website.

We will be publishing the composition to an OAM file, upload it through the plugin "Edge Suite" and place the composition on the website.

Composition preparation

  • Start off by creating the composition (who would have thought). I will be using Simon Widjaja's example for flexible layouts as it demonstrates how great the flexible stuff works. Get the source here.

  • When you are done, publish the project with option "Animate Deployment Package". It will generate a single OAM file. Get the hungry edge OAM file here.

Edge Suite installation

  • We are using a fresh wordpress installation, I named it Edge Demo. Download the latest version from the Edge Suite plugin site. Unzip the file and place the edge-suite folder in your wordpress plugin directory, it should end up in /wp-content/plugins/edge-suite.
  • Login to your page and go to Plugins page. You should see the Edge Suite plugin, activate it.

Composition uploading

  • You will get a new menu entry Edge Suite at the bottom of the main menu in the sidebar. Go to manage.
  • You might see a warning message. If you don't you are good to go, if you do you are good to go as well - kind of. As we are uploading a oam/zip file, the server needs to extract it, save the contained files and alter some of the edge animate files. With some hosters your FTP user and the Apache www-data user are not in the same group, which means you could end up with files written by the server that you can't delete manually through FTP. As Edge Suite is in the early development state there are no fallbacks yet. I did implement an option thought that lets you tell Edge Suite it should completely remove all assets and everything that comes with it. Therefore you should be fine (I appreciate any feedback on this).

  • In case you get warning messages about file permissions, take a look here

  • Ok, now the hard crappy part is over. Simply select the OAM file from your project ("publish/animate package" folder) through the upload widget and hit upload.

  • Now is where all the magic happens. Edge Suite will extract all the needed files and parse some of the JS files to inject custom methods and what not, basically all the stuff that you really don't want to do for every composition manually.

  • You will see a screen similar to the one below, which means everything worked. Only certain files are being copied for security reasons, as of now these are js,png,jpg,gif,svg,css (this will be configurable soon).

  • If you run into problems or get error messages go to the Wordpress Edge Suite issue queue, check the issues there and post a message. I'll try to help you out.

  • The composition has now been uploaded to wordpress, time to place it somewhere on your site. You now have three different options:

Placement method A: Inline placement via shortcodes

The easiest way to integrate compositions into your website alongside other content is with shortcodes:

  • After uploading a composition, create or edit a post.

  • You see a dropdown menu at the bottom of the page, which contains all the uploaded compositions for selection with a theme. Selecting a composition doesn't do anything for now, but it lets you figure out the id of the composition that you want to use. In my case, as seen on the screenshot below, the id for the hungry edge header composition is 3.

  • Place the shortcode [edge_animation id="3"] in your text input field. The plugin will detect the shortcode when the post is being rendered and will then replace it with the according composition.

  • Shortcode usage:

  1. [edge_animation id="3" left="10" top="20"] this will shift the composition 10px to the left and 20px from the top.

  2. [edge_animation id="3" left="auto" top="10"] this will center the composition horizontally

  3. [edge_animation id="3" left="auto" top="10" iframe="true"] this will render the composition within an iframe. Only use this when absolutely necessary. This is sometimes the easiest way to avoid conflicts with other JS libraries and scripts, but please consider filing an issue before switching to iframes! "top" and "left" properties will be applied to the iframe instead of the stage div.

  • Here we go, we placed the hungry edge banner inline. Luckily Simon set this up with flexible layout, otherwise the whole thing would break when using fixed witdh.
  • Widget usage: If you want to use shortcodes within widgets, go to the general Edge Suite settings page and activate option "Enable usage of shortcodes in widgets". Now widget content will also be checked for shortcode tags.

One disadvantage of shortcodes is that for now Javascript files are being included inline (not in the head) as shortcodes are processed when the head is already rendered. This works for now, if you experience problems, let me know, there are other options...

We placed the hungry edge banner inside a post, which works great for a more "content oriented / single post approach" (or call it whatever you want). In case of Hungry Edge this is nor really what we want as it's a header and should be used as one. Therefore we thought of a more CMS like way to integrate compositions into wordpress:

Placement method B: Theme preparations

You can place a special PHP function call somewhere in you theme files, which then prints and injects a selected composition into your website (how to specify the selection will be explained in the next paragraph).

  • Twenty eleven theme / general usage: To tell wordpress where we want to place compositions on our site we paste the following PHP snippet somewhere within the body tag in our templates (don't forget the php tags):

    if(function_exists('edge_suite_view')){ echo edge_suite_view(); }

For twenty eleven we place it in twentyeleven/header.php. Use either the build in wordpress webeditor or edit the file through FTP. As wordpress doesn't care for anything like MVC, SoC or at least a clear template structure the template files are quiet a mess. Try and error. As you can see from the screenshot I placed the snippet after the image below line 113. If you don't want the edge animate composition show up alongside the image rotator, uncomment or delete the marked line (for me line 110).

  • PageLine Theme: I have written a small section extension for the PageLine Theme. With that you can just copy the extension to the PageLine folder and be done with it. It allows you to drag and drop an Edge Suite section wherever you want it. You can get it here. A more detailed readme file is included. Please post any problems to the issue queue on wordpress.

Placement method B: Selection of compositions

  • Now we can choose which compositions should show up. Every page can be configured on its own, which means you can upload different compositions and make a different selection for each page (if you want to). Besides that you can also set a default composition and a composition for the frontpage, which we will try first: Go to Edge Suite > Settings.
  • Select the default composition, in my case I want the hungry edge banner to show up on all pages, so I select it here. If you want another composition for the frontpage, upload it and select it for the blog page (the frontpage). Now go to your homepage, the composition should appear. Try to resize the window. Nice, "Hungry Edge" adjusts with the width, isn't that awesome!?
  • As mentioned before, you can upload more compositions and make a different selection for each post. You can also choose to not show a composition on a page in case you have set a default one. Selecting "none" will overwrite the default composition and you get a clean page.

Placement method C: Static inclusion

The third alternative is to place the PHP function edge_suite_view_inline($id, $css_style) somewhere in your template to always output the composition with the given id. Optionally you can pass additional css for the stage container. For example, somewhere in your template, put

   if(function_exists('edge_suite_comp_view_inline')){
     echo edge_suite_comp_view_inline(3);
   }

to output the composition with id 3.

I really appreciate any feedback, this plugin should be a community effort after all and it's really hard to test on various servers. You can also give us your thoughts about new features, we have more things planned, but let us know what you would like to see.

A good place for feedback/issues is the Wordpress Edge Suite issue queue. General instruction, a FAQ and everything else can be found on the Edge Suite plugin page. An overview of all resources can be found here on edgedocks.