by Sarah Hunt
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.
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;
- 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.
- 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.
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:
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:
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.