Return of my header nemesis in php

johnbrks · 2016-05-05 10:33:11

Hi Rod,
you had helped get this working in CE4 a little while back. i included an adobe edge file in my header. i've tried variants of the functions (header_bottom; in the new php file, but the animated masthead will not appear.

(i've copied over the adobe includes as i found previously, i have to put them in multiple directories)

my OLD php file included:

function ttg_head_end( $style, $path ) {
echo '
<link rel="stylesheet" href="/phplugins/css/custom.css" />
<script src="//use.typekit.net/lfm3nrq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

';
} // END

function ttg_header_masthead( $style, $path ) {
echo '
<div id="masthead" class="block-id masthead clearfix">
<div class="mantle clearfix">
<div class="core clearfix">
<p>&nbsp</p>
<div id="Stage" class="EDGE-2227651377">
</div>
</div>
</div>

</div>

';
return false;
} // END

***********************************************
The REVISED one that doesn't work includes:

function ttg_head_bottom( $style, $path ) {
echo '
<link rel="stylesheet" href=“/backlight/custom/css/jbcustom.css"/>
<script src="//use.typekit.net/lfm3nrq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

';
} // END

function ttg_header_masthead_top( $style, $path ) {
echo '
<div id="masthead" class="block-id masthead clearfix">
<div class="mantle clearfix">
<div class="core clearfix">
<p>&nbsp</p>
<div id="Stage" class="EDGE-2227651377">
</div>
</div>
</div>

</div>

';
return false;
} // END

Last edited by johnbrks (2016-05-05 10:38:25)

rod barbee · 2016-05-05 10:40:36

the function you're using in CE4 is ttg_head_end.

Right now there is no ttg_head_end hook in Backlight (at least it's not listed in the docs or the file)

There is a ttg_user_load hook (see the phplugins file) but I don't know how that one works. But you can try it. I bet it's easy to break the site using that hook

You may just need to wait for Matt to add a hook for the <head> tag.

Matthew · 2016-05-05 11:33:55

Sorry, no hooks in the <head> element at the moment. When we roll out our first update, I plan to expand PHPlugins with more hooks.

In the meantime, custom CSS is supported. Edit the file, or create a new CSS file in /backlight/custom/css. Then implement the file in the Advanced Customization section of the page template designer.

For your scripts, you can probably load them into the page footer using ttg_footer_bottom. Not the ideal place, but close enough for now; then you can move them later -- either to the head, or (preferably) deeper toward the end of the page -- by switching the hook out for a new one, when new ones exist.

johnbrks · 2016-05-07 07:21:06

Thanks. I'm doing something incorrectly.
i removed the ttg_header_top and _bottom functions from the phplugins file. i added the following:

In my css, i added:
body {
background: url(/new/backlight/custom/phplugins/images/backgroundSplash29.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

h1 {

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

}

In my PHplugins file i now just have:
function ttg_header_top( $style, $path ) {
echo '
<style>
.edgeLoad-EDGE-2227651377 { visibility:hidden; }
</style>
';
}

function ttg_footer_bottom( $style, $path ) {
echo '
<link rel="stylesheet" href=“/backlight/custom/css/jbcustom.css"/>
<script src="//use.typekit.net/lfm3nrq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

';
} // END

function ttg_header_masthead_top( $style, $path ) {
echo '
<div id="masthead" class="block-id masthead clearfix">
<div class="mantle clearfix">
<div class="core clearfix">
<p>&nbsp</p>
<div id="Stage" class="EDGE-2227651377">
</div>
</div>
</div>

</div>

';
return true;
} // END

rod barbee · 2016-05-07 07:31:32

h1 {
    <!--Adobe Edge Runtime-->
        <script type="text/javascript" charset="utf-8" src="/edge_includes/edge.6.0.0.min.js"></script>
    <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-->
    }

this does not belong in a css file.

johnbrks · 2016-05-07 07:58:52

I guess I misunderstood matt's comment. (I know I'm not versed in css). Did he mean that the edge file could only appear in the footer?

I may also not understand what a hook is. The function tag_head_top does not include a hook but the function ttg_footer_bottom does?

rod barbee · 2016-05-07 08:49:24

ttg_header_top (there is no ttg_head_ hook yet) hooks right after the opening of the html <header> tag. The ttg_footer_bottom hooks before the closing of the </footer> tag. Both of these are visible on the page if you add text or other html.

You can see where the hooks appear on the page here:
http://backlight.barbeephoto.com/hook-locations/

Matt suggested trying to hook your script (the stuff inside the <script>....<.script> tags in the ttg_footer_bottom hook. Because of the <script> tag, the script text won't be visible but the script will run.

rod barbee · 2016-05-07 09:06:41

also, this:

function ttg_footer_bottom( $style, $path ) {
    echo '
    <link rel="stylesheet" href=“/backlight/custom/css/jbcustom.css"/>

Is not necessary. You can insert the file via the template Design > Advance Customization. Just enable custom css and choose the file you've uploaded.

johnbrks · 2016-05-07 09:36:59

(i removed the css link. i had thought it would work via advance customization but wasn't sure)

In CE4, my script was in ttg_head_end with a stage specificied in ttg_header_masthead and was fine. (see www.joliverbrooks.com)

if i put my scripts that used to be in ttg_head_end into ttg_footer_bottom, then the edge block (with the logo, minor animation) does not appear and the page contents are reduced to a narrow window (see: www.joliverbrooks.com/new).

new PHplugin info:
function ttg_footer_bottom( $style, $path ) {
echo '
<style>
.edgeLoad-EDGE-2227651377 { visibility:hidden; }
</style>


      <script type="text/javascript" charset="utf-8" src="/edge_includes/edge.6.0.0.min.js"></script>
<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_top( $style, $path ) {
echo '
<div id="masthead" class="block-id masthead clearfix">
<div class="mantle clearfix">
<div class="core clearfix">
<p>&nbsp</p>
<div id="Stage" class="EDGE-2227651377">
</div>
</div>
</div>

</div>

';
return true;
} // END

Last edited by johnbrks (2016-05-07 09:50:17)

rod barbee · 2016-05-07 09:56:42

One issue is that you're using html in the masthead that is part of CE4 and not part of Backlight. The classes "mantle" ,"core" , and "block-id" do not exist in Backlight. The "masthead" class exists and it's inside the <header> element. This means that your masthead isn't being styled like you expect it to.

You'll need to look at the page source and see how the html is constructed and rewrite the html you want to use to either add to or replace the masthead.

And if it still doesn't work, you may just need to wait until Matt adds either a ttg_head_end hook or a way to insert scripts into the <head>, perhaps via Advanced Customization, like phplugins and custom css are added to a template.

Oh, and the link you included to the new site doesn't work.

johnbrks · 2016-05-07 10:45:38

sorry. the parentheses seems to have been counted as part of the link www.joliverbrooks.com/new

I may have to wait if i cannot back-construct it.

i guess it is rather confusing for me given the description in new and old PHPlugin files. (this could reflect my lack of knowledge about how things work). the new PHplugin files says:
* ttg_header_bottom
* - return value ignored
* - called last in the header section
* - encompasses nothing; use to insert content at the end of the header section

which is very similar to text in the CE4 PHPlugin file
* ttg_head_end
* - return value ignored
* - called just before ending head tag
* - encompasses nothing; use to insert content with the head, after all other TTG head content has processed

rod barbee · 2016-05-07 12:03:14

the difference between ttg_head_bottom and ttg_header_bottom is that the <head> tag, where ttg_head_bottom hooks into, is not part of the page body, the part of the html that you see in a browser. The <head> contains the html declaration, meta tags, scripts, calls to css, etc.

the ttg_header_bottom hook inserts content before the end of the html <header> section, which is part of the page seen in the browser.

I think you're confusing the two. They are not the same.

ttg_head_end from CE4: not seen in browser

ttg_header_end in Backlight: is seen in browser

Right now there is no ttg_head_end hook to use.

the wording in the hook description does not imply they hook in the same location, it just lets you know how where the content is added and what the return value will do to existing content.

johnbrks · 2016-05-07 13:24:35

oh. ok thanks. it is my lack of html knowledge. that is helpful.

Community @ The Turning Gate

#1 2016-05-05 10:33:11

Return of my header nemesis in php

#2 2016-05-05 10:40:36

Re: Return of my header nemesis in php

#3 2016-05-05 11:33:55

Re: Return of my header nemesis in php

#4 2016-05-07 07:21:06

Re: Return of my header nemesis in php

#5 2016-05-07 07:31:32

Re: Return of my header nemesis in php

#6 2016-05-07 07:58:52

Re: Return of my header nemesis in php

#7 2016-05-07 08:49:24

Re: Return of my header nemesis in php

#8 2016-05-07 09:06:41

Re: Return of my header nemesis in php

#9 2016-05-07 09:36:59

Re: Return of my header nemesis in php

#10 2016-05-07 09:56:42

Re: Return of my header nemesis in php

#11 2016-05-07 10:45:38

Re: Return of my header nemesis in php

#12 2016-05-07 12:03:14

Re: Return of my header nemesis in php

#13 2016-05-07 13:24:35

Re: Return of my header nemesis in php

Board footer