by Sarah Hunt

Created

June 13, 2012

Edit June 16 2012 – The following post is a way to integrate your Edge content without the use of iframes. For detailed information on how to integrate your Edge compositions using iframes (which will also allow you to preserve your Muse project for editing) visit the Muse documentation page here.

This post will show you how to integrate your Edge compositions into Adobe Muse. Be warned, this does involve some code – BUT – don’t let this intimidate you! If you’re the type that would rather poke a fork in your eye than code, fear not. All we’ll be doing is copy and pasting.

This post also assumes you have the basics of Muse and Edge down and is not a tutorial on how to use either. For resources on how to use Muse, check out muse.adobe.com. For resources on how to use Edge, check out edge.adobe.com.

Getting started

View the Page
Download the sample files

I’ve created a very basic site in Muse which has some simple navigation and a placeholder for the banner I will later create in Edge. There’s two caveats to integrating Edge content into Muse;

  1. Integrating Edge compositions requires HTML export out of Muse, and therefore you will not be able to edit your site in Muse once the Edge content is integrated. Make sure your site is good to go before publishing. If not, the process of merging your Edge content is fairly easy once you’ve done it a few times so if you need to change your site, you’ll just have to republish and reinput the Edge snippets.
  2. You will not be able to upload your site via Business Catalyst in Muse after you’ve integrated your Edge content, since the site is published as HTML from Muse.

With that out of the way, here is the basic site I created.

Once you’ve completed your site, go to the File menu and select “Export as HTML”.

After you publish, you should see something similar to this in your published directory.

Onto Edge

In this example, I’ve made a simple banner in Edge which I’ll be putting into my Muse site.

Save your Edge composition in the same directory as your Muse published content. Your folder should now look something like this:

Edge and Muse Files

And now we code (kind of)

Put down the fork! By code I really mean copy and paste – we’ll be merging the content between the Edge HTML and the Muse HTML.

Open the two HTML files in the directory you’ve been saving your work in.

We’ll start with the Edge HTML. First, copy the following code:


Then switch over to the Muse HTML. Look for the closing </head> tag (there will be only one in the document). This is where we’ll paste the code.

Your Muse HTML should now look like this:

We’re halfway done!

Open up the index.css file that Muse exported. If you’re not familiar with CSS, it’s an output file that works similarly to how styles work in InDesign, Illustrator or Photoshop. Muse will export the styles for every element you create defining things like colour, fonts, position, etc.

I know I set my placeholder to 700px wide, so doing a search I can instantly find the name of the placeholder. Make sure the Edge content you create and the placeholder you created in Muse match sizes; if the dimensions are off it can cause your page to style incorrectly.

In this case, the ID of my placeholder is #u141.

Now that we know what the ID is of our placeholder, we can integrate our Edge content. Go back to the Muse HTML page and do a search for your ID. ID’s can only exist once on a page, so it will be the only one you find.

There’s one more line we have to grab from the Edge HTML. Return to the Edge HTML and copy the following line:

Return to the Muse HTML and paste it in between the <div> tags of our placeholder. It will now look something like this:

You’re done! Now your Muse HTML page is ready to go.

Make sure when you deploy your website you include all of the Muse and Edge files.

Since both Edge and Muse are very new products, our efforts have been put into making our individual products better before focusing on cross-product workflows. Edge has already started exploring workflows with other products, including InDesign and iBooks. When it comes to Edge and Muse, is there room for improved integration? Absolutely! However that’s for a future release, as for now you’ll have to get your hands a little dirty to make the two work together.

 

COMMENTS

  • By Paul Tatore - 2:13 PM on June 16, 2012  

    Both Muse and Edge has a image folder. So do all the images from both files go in the one image folder. Also if you have a couple of pages in Muse and each one has an edge file on it. Do all the images from the Edge files go in the that same image folder?

    • By sahunt - 12:01 PM on June 27, 2012  

      Hey Paul,

      All the images would go in the same location, however if you move one of your HTML files outside of where the other pages live you’ll have to relink the images.

      If you run into issues try posting on the Muse or Edge forums for help :)

      Sarah

  • By John H - 8:31 AM on June 15, 2012  

    Thank you, this is fantastic. I’m nearing completion of a Muse-created site that has some Edge content and this should help a lot. One question–I have four rotating panels (each with a different photo) on my home page. Within each panel I’d like some Edge-created moving type. Your demo shows how to put Edge content in one panel. How do I put Edge content in each of four different panels? I also have another page on my site that has some Edge-created moving type. How can I add that?

    • By sahunt - 8:38 AM on June 15, 2012  

      Hey John,

      Glad you found the post useful. You can use the same method in this post by creation additional placeholders and adding your Edge content inside each of them. For more details on how to add multiple compositions to a page, check out the Edge API documentation: http://www.adobe.com/devnet-apps/edge/api/current/EdgeAPI.0.1.6.html (scroll all the way to the bottom).

      If you still have questions feel free to post on the Edge forums (http://forums.adobe.com/community/labs/edge/) and either myself or one of our other community members will help you out.

      Thanks for using Edge (and Muse)!

      Sarah