Manually Insert Edge Animate Comp Banner into Homepage

[21cls_media]

Hello,

We have been having issues with the Revolution Slider not being as responsive throughout devices as we would like, so we decided to just create our own banner in Edge Animate. I have already created the banner and published it, but what I need help with is implementing it manually into our homepage of the Dante theme (in place of where the current slider is). I’ve seen many tutorials on how to implement the published Edge Comp into a container inside a simple html homepage file with the help of Adobe Edge Reflow and Adobe Edge Code but I am not sure how to go about that with the Dante Child theme. Below are the steps that I believe I need to follow, I just need help locating the specific page to place this html for it to load into the top of the homepage. Also, the correct location of where I need to upload all of my edge includes files. I would really appreciate your help on figuring this out! Thanks!

FYI-I’ve also heard about the Edge Suite plugin that a lot of people seem to use but it looks as if it isn’t compatible anymore with the latest version of Adobe CC.

————————————————————————————————————————————
There are four basic steps needed to embed an Edge Animate composition into an existing page:

Publish from Edge Animate. (This creates the necessary files to run the animation. Also, the code referenced in Step 2 and 3 below will be included in the .html file that Animate creates inside the publish/web folder, which you can just copy/paste.)

Add a <div> to the page that has the ID of Stage and the correct class name for your stage (i.e. the “Composition ID” for your project in Animate).
For example:
<div id=”Stage” class=”EDGE-1655086″></div>

Include the Preload .js file and the default style in your page’s header, within Edge Runtime HTML comments.
For example:
<!–Adobe Edge Runtime–>
<script type=”text/javascript” charset=”utf-8″ src=”test-1655086_edgePreload.js”></script>
<style>
.edgeLoad-EDGE-1655086 { display:none; }
</style>
<!–Adobe Edge Runtime End–>

Make sure to upload all of the include files to your server in the appropriate relative locations. This includes the _edge.js files, _edgeActions.js file, _edgePreload.js file, the edge_includes folder and its contents, any other files/folders created inside the “publish/web” folder when you publish from Edge Animate (e.g. “images” folder, etc.).
————————————————————————————————————————————

[David Martin – Support]

Hi,

On your homepage, it is probably easiest to do this with the page builder assets: “Raw HTML” for the HTML and “Raw JS” for the JS they provided.

As they mention you will need to upload their suppled .js file, you can add this to either your child theme directory or the WP media uploader.

– David.

[21cls_media]

Hello David,

I have applied what you suggested and it doesn’t seem to be working. Any other ideas? Has that method been tested with the Adobe Edge Animate CC 2015 version?

[David Martin – Support]

Hi,

Where did you upload the JS files to?

“Make sure to upload all of the include files to your server in the appropriate relative locations. This includes the _edge.js files, _edgeActions.js file, _edgePreload.js file, the edge_includes folder and its contents, any other files/folders created inside the “publish/web” folder when you publish from Edge Animate (e.g. “images” folder, etc.).”

I cannot login with the supplied details to take a look, they appear to be wrong?

– David.

[21cls_media]

Hello,

I uploaded all of the published edge files to: media_site/wp-content/themes/dante-child

The reason I asked if you’ve tested this with Adobe CC 2015 Edge files is because when you publish for web it now creates only 1 _edge.js file, 1 .html file, an images folder with the poster image, and a source folder with the imported svgs.

Adobe did away with the extra pre loading .js files and just condensed it all into one .js file to reduce runtime size as you can see in the link below.

https://helpx.adobe.com/edge-animate/using/whats-new.html

Also, you should be able to login with those details now.

Thanks for looking into this for me.

[David Martin – Support]

Hi,

I have not tested this with any files from Adobe CC 2015 Edge, this request is a little outside the scope of support – though I can provide pointers to get you in the right direction.

The main issue seems to be you are not correctly including the required JS file.

You have:

src="Render21_responsive_banner_edge.js"

This need to be (Assuming you upload the js file Render21_responsive_banner_edge.js to the media library):

src="http://21cls.com/media_site/wp-content/uploads/2014/05/Render21_responsive_banner_edge.js".

– Thanks.