insert animated image in header?

johnbrks · 2015-09-09 09:49:51

i made a very small animation i want to use as a header. apparently to get it to display on a page, adobe says i need to include the following:

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).
<div id="Stage" class="EDGE-2227651377"> </div>

Include the Preload .js file and the default style in your page's header, within Edge Runtime HTML comments.
For example:

<script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>
<style>
.edgeLoad-EDGE-2227651377 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('jbRotateBlk300', 'EDGE-2227651377', {
scaleToFit: "none",
centerStage: "both",
minW: "0px",
maxW: "undefined",
width: "325px",
height: "110px"
}, {"dom":{}}, {"dom":{}});
</script>

i copied these elements into the index.php file TTG generated (after i turned off masthead in TTG), and the animation displayed but i screwed up the formatting. is there anyway to include this header in the CSS so it is on all pages? i made an attempt at this, but i wasn't able to do it.

Any thoughts? and where does the <div> go?

thanks

Last edited by johnbrks (2015-09-09 09:53:02)

rod barbee · 2015-09-09 10:00:30

use phplugins to do this
the documentation for that starts here:
http://ce4.theturninggate.net/docs/doku … bility_api

johnbrks · 2015-09-09 10:29:19

i read that and have been trying and read your tips and tricks page on dynamic mastheads. (i got that to work when displaying an image). i guess i am unclear on where to place the code referencing the adobe file.

rod barbee · 2015-09-09 11:08:02

Place the script in the head. You can add it just after custom CSS. There's already a function for inserting custom CSS in the phplugins file.
Replace the TTG masthead using the ttg_header_masthead hook. This is where you'd insert the new HTML.

johnbrks · 2015-09-09 11:24:57

thanks. i can work on that. to be clear which files:

the head is in the index.php?
and the tag_header_masthead is also in the index.php file.

sorry to be dense. and thanks again for your help.

rod barbee · 2015-09-09 11:57:27

no, you do all this in the phplugins.php file. See the phplugins documentation about enabling phplugins site-wide, the various hook areas, and editing the phplugins.php file.

johnbrks · 2015-09-10 03:53:32

i've been working on this, and it seems that when include the AdobeEdge.loadComposition call to run the javascript, it causes my entire homepage to be blank. if i delete that call, then the masthead is just suppressed and everything else loads normally.

this is odd, as the code i pasted is from a stand alone page in my home directory that runs fine http://joliverbrooks.com/jbRotateBlk300.html

function ttg_header_masthead( $style, $path ) {
echo '

<script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>
<style>
.edgeLoad-EDGE-2227651377 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition('jbRotateBlk300', 'EDGE-2227651377', {
scaleToFit: "none",
centerStage: "both",
minW: "0px",
maxW: "undefined",
width: "325px",
height: "110px"
}, {"dom":{}}, {"dom":{}});
</script>

<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-2227651377">
</div>
</body>

';
return false;
} // END

rod barbee · 2015-09-10 04:09:26

the problem may be the single quotes in the code. Since the echo statement starts with a single quote, when the next single quote comes along the code thinks that's the end of the echo. Then the code after that is probably what's breaking things.

You can either escape those single quotes in the code by preceding them with a backslash \ or you could try changing the single quotes to double quotes.
this looks to be the part that's messing things up:

  AdobeEdge.loadComposition('jbRotateBlk300', 'EDGE-2227651377', {

Also, this entire section of the code might need to be placed in the ttg_head_end hook. You can use the custom css section in the phplugins file and add it right after the code that calls the custom css file.

<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>
    <style>
        .edgeLoad-EDGE-2227651377 { visibility:hidden; }
    </style>
<script>
   AdobeEdge.loadComposition('jbRotateBlk300', 'EDGE-2227651377', {
    scaleToFit: "none",
    centerStage: "both",
    minW: "0px",
    maxW: "undefined",
    width: "325px",
    height: "110px"
}, {"dom":{}}, {"dom":{}});
</script>
<!--Adobe Edge Runtime End-->

johnbrks · 2015-09-10 04:39:18

Awesome. the double quotes fixed the issue, along with moving it to ttg_head_end.
the animation is in the middle of the page and there is no masthead space now, but i'll try playing around with it.

rod barbee · 2015-09-10 05:20:23

in this code:

<body style="margin:0;padding:0;">
    <div id="Stage" class="EDGE-2227651377">
    </div>
</body>
<!-- #masthead -->

you're adding an extra body tag to the one that's already included in the page. Try using only the div

 <div id="Stage" class="EDGE-2227651377">
    </div>

in the ttg_header_masthead hook

johnbrks · 2015-09-10 08:53:59

eliminated body gets. the animation object in the center of the page and the masthead is eliminated (i.e., navigation bar is at the uppermost part of the page.

rod barbee · 2015-09-10 09:06:01

is that good?

if not, it might be time to post a link

rod barbee · 2015-09-10 10:04:40

and the link to your site?

johnbrks · 2015-09-10 10:07:42

sorry. i somehow pasted over my original response.

i want the animated bit to be above the nav bar, like a header (i can resize animation if necessary). it would be cool if it were clickable, but not imperative.

the site is www.joliverbrooks.com

the current hooks are:

function ttg_head_end( $style, $path ) {
echo '
<link rel="stylesheet" href="/phplugins/css/custom.css" />


<script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"></script>
<style>
.edgeLoad-EDGE-2227651377 { visibility:hidden; }
</style>
<script>
AdobeEdge.loadComposition("jbRotateBlk300", "EDGE-2227651377", {
scaleToFit: "none",
centerStage: "both",
minW: "0px",
maxW: "undefined",
width: "325px",
height: "110px"
}, {"dom":{}}, {"dom":{}});
</script>

} // END

function ttg_header_masthead( $style, $path ) {
echo '
<div id="Stage" class="EDGE-2227651377">
</div>

';
return false;
} // END

rod barbee · 2015-09-10 11:58:41

it looks like the javascript is inserting some inline styling. One of the styles is position:absolute;

When you generated the graphic, did you have any styling choices? Anyway can you change that to position: relative; ?
You'll then need to use some custom css for padding/margin.

Positioning is a bit confusing and I'm not versed enough to tell you where else you might fix this (perhaps with some custom css on the containing elements). But here's more on positioning:
http://www.w3schools.com/css/css_positioning.asp

johnbrks · 2015-09-11 08:02:17

I made progress. i figured out the position was because when i added something in the masthead hook, it didn't have all the <div> info that was in the default it replaces (i checked the index.php file). what i have below, moves the animation up above the title bar.
now i have two smaller (presumably simpler issues).

1. how do i make the masthead space larger so the animation isn't cut off?
2. is there a way to left justify the masthead (ie. so the object is along the left side of the of page?

code below:
function ttg_header_masthead( $style, $path ) {
echo '
<div id="masthead" class="block-id masthead clearfix">
<div class="mantle clearfix">
<div class="core clearfix">

</div>

';
return false;
} // END

Last edited by johnbrks (2015-09-11 08:06:51)

rod barbee · 2015-09-11 12:11:56

1. how do i make the masthead space larger so the animation isn't cut off?

try adding padding and/or margin. You can try doing this inline or via custom css.

2. is there a way to left justify the masthead (ie. so the object is along the left side of the of page?

you might try setting a width for the div containing the animation and floating it left.

Community @ The Turning Gate

#1 2015-09-09 09:49:51

insert animated image in header?

#2 2015-09-09 10:00:30

Re: insert animated image in header?

#3 2015-09-09 10:29:19

Re: insert animated image in header?

#4 2015-09-09 11:08:02

Re: insert animated image in header?

#5 2015-09-09 11:24:57

Re: insert animated image in header?

#6 2015-09-09 11:57:27

Re: insert animated image in header?

#7 2015-09-10 03:53:32

Re: insert animated image in header?

#8 2015-09-10 04:09:26

Re: insert animated image in header?

#9 2015-09-10 04:39:18

Re: insert animated image in header?

#10 2015-09-10 05:20:23

Re: insert animated image in header?

#11 2015-09-10 08:53:59

Re: insert animated image in header?

#12 2015-09-10 09:06:01

Re: insert animated image in header?

#13 2015-09-10 10:04:40

Re: insert animated image in header?

#14 2015-09-10 10:07:42

Re: insert animated image in header?

#15 2015-09-10 11:58:41

Re: insert animated image in header?

#16 2015-09-11 08:02:17

Re: insert animated image in header?

#17 2015-09-11 12:11:56

Re: insert animated image in header?

Board footer