mind boggling Foundation conflict

[Joss]

Okay, so I have no idea where to start with this one.

Foundation 5 has an off-canvas menu system described here:

http://foundation.zurb.com/docs/components/offcanvas.html

I have a template that uses this function. It also calls in child pages and renders them down the page.

So far, it works fine. 

Now, I add to the child template an image:

<?php echo $page->main_image->url; ?>

All good - renders fine, everything wonderful.

Now, I resize it:

<?php echo $page->main_image->width(400)->url; ?>

The image is shown, it has been resized and every thing is wonderful, yes?

Well, no - because the offcanvas menu no longer works!

Revert to no resizing, it works fine, use any resize (height, width, size) it breaks.

Er, why?

The menu is a Jquery function, the resize is a php function.

So, why are they conflicting?

I must be getting old.....

[Martijn Geerts]

Don't know the answer but Holy Grail, I like your avatar Joss!

[Joss]

Thanks Martijn - just knocked it up for my new web design site (that I am losing sleep over)

Here is a screen of the front page - all those are animations.

I really am not an artist, but since I can't afford to employ one, I will have to do!

[sforsman]

Revert to no resizing, it works fine, use any resize (height, width, size) it breaks.

If you (temporarily) replace the orginal image with the resized version on your filesystem and revert to no resizing, does it still break?

I'm just trying to pinpoint your problem for now.

[Joss]

Er ... no idea.

Do you mean hard link to myimage.400x0.jpg?

[sforsman]

Well you could do that or you could just rename myimage.jpg => myimage.old.jpg and then rename myimage.400x0.jpg => myimage.jpg.

I'm curious to see if it's the filename of the resized image that's causing the trouble. I would find it very odd if it did, but hey, your case seems weird to begin with and there's no harm ruling it out.

Could you also paste the code/img-tag you have around <?php echo...->url ?>

[MuchDev]

I would focus on the jquery and the css to make sure positioning of the menu isnt causing the large image to push the div out of the way. Is there any issues/errors (firebug or devtools)? Maybe an open div tag or a duplicate id..? 

[sforsman]

I would focus on the jquery and the css to make sure positioning of the menu isnt causing the large image to push the div out of the way. Is there any issues/errors (firebug or devtools)? Maybe an open div tag or a duplicate id..? 

I thought Joss said it was the resized image that was breaking the canvas. I doubt he is stretching the original image bigger?

[pwired]

Sweet Jesus - nice new avatar and creative site front.

[videokid]

Any chance you could post the <aside></aside> code?

Maybe wrap your resized <img /> in

<div class="row"><div class="small-12 columns"></div></div>

[Joss]

Morning world!

The actual size of the image is not a problem. The original image is 500 wide and is simply pushed off the side of the div.

Basically, there are two templates:

sub-page is the proper template for the child page. It uses if ($page->url == $_SERVER["REQUEST_URI"]) { } to remove header and footer info for when the sub-page child is rendered into the parent page.

The resize does not appear to be an issue when this page/template is called directly.

basic-page is the parent template. The majority of this template is identical to sub-page, except that it loops through and renders the children.

This is where the aside is suddenly not working.

For amusement, here is the basic-page template. Not sure it means much out of context, to be honest!

EDIT: By the way, I have tried removing all the code for what goes into the aside, and that makes no difference.

<?php 

/**
 * basic-page template
 * Use this as the basis for any other template for this profile
 */

include("./includes/head.inc"); 
?>
<!-- Header Stuff -->

<div class="pageheader">
	<div class="row">
		<div class="columns">
		</div>
	</div>
</div>

<!-- Main Page Markup goes here -->

<div class="wrapper-inside"><!-- Using a wrapper to give the main contents area a background colour -->


<div class="row">

<!-- off canvas menu -->
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <a class="left-off-canvas-toggle"><h4 class="title">Menu</h4></a>
      </section>

    </nav>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
<?php
// If this is a first level page, child of root, then we show its children
if($page->parentID === 1){
 childrensectionmenu(); 
}
// if this is not a first level page, not a child of root, we show its siblings
if($page->parentID !== 1){
  currentsectionmenu();
}

// Always show this bit of menu
mainsectionmenu();

//include("./includes/navigationvert.inc");
?>
    </aside>

    <!-- main content goes here -->
    <section class="main-section">
          <div class="row">
            <div class="medium-6 columns">
              <h1><?php echo $page->title; ?></h1>
<?php echo $page->body; ?>
           </div>
            <div class="medium-6 columns">
            Something else
            </div>
          </div><!-- /row -->
<?php 

if ($page->child) {

  $childsections = $page->children("limit=10");
  foreach($childsections as $childsection){

echo $childsection->render();
  } // end foreach $childsections
} //end if $page->child

?>

    </section>
  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div><!-- /inner wrap -->
</div><!-- /off-canvas-wrap -->

<!-- end menu -->

</div><!-- /row -->

</div><!--/wrapper-->
<!-- /End main page markup -->
<?php 
/* Included common footer markup */
include("./includes/footer.inc");
?>

<!-- add any post footer specific to the page here -->

<?php
/* Included common <scripts> */
include("./includes/footscripts.inc");
?>

<!-- add any scripts like foundation plugins specific to this page here -->

<!-- initialize foundation -->
<script src="<?php echo $config->urls->templates?>js/foundation/foundation.offcanvas.js"></script>

    <script>
      $(document).foundation({
  offcanvas : {
    close_on_click : true,
  }
});
    </script>

<?php
/* Wrapping up the page */
include("./includes/foot.inc"); 

[sforsman]

Please submit the template of the sub-page too

[Joss]

Okay, though you might find it boring - as I said, they are almost identicle.

The only bit that actually gets rendered is lines 69 to 83 ish

<?php 
if ($page->url == $_SERVER["REQUEST_URI"]) {
/**
 * basic-page template
 * Use this as the basis for any other template for this profile
 */

include("./includes/head.inc"); 
?>
<!-- Header Stuff -->

<div class="pageheader">
  <div class="row">
    <div class="columns">
    </div>
  </div>
</div>

<!-- Main Page Markup goes here -->

<div class="wrapper-inside"><!-- Using a wrapper to give the main contents area a background colour -->


<div class="row">

<!-- off canvas menu -->
<div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">

    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <a class="left-off-canvas-toggle"><h4 class="title">Menu</h4></a>
      </section>

    </nav>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
<?php
// If this is a first level page, child of root, then we show its children
if($page->parentID === 1){
 childrensectionmenu(); 
}
// if this is not a first level page, not a child of root, we show its siblings
if($page->parentID !== 1){
  currentsectionmenu();
}

// Always show this bit of menu
mainsectionmenu();

//include("./includes/navigationvert.inc");
?>
    </aside>

    <!-- main content goes here -->
    <section class="main-section">
<?php } // End If for page URL ?>

<div class="row">
            <div class="medium-6 columns" id="<?php echo $page->name; ?>">
              <h1><?php echo $page->title; ?></h1>
<?php echo $page->body; ?>

<p><a href="<?php echo $page->url; ?>">read more</a></p>

           </div>
            <div class="medium-6 columns">
            
            <img src="<?php 
            
            echo $page->main_image->width(400)->url; ?>" >
            </div>
</div>

<?php if ($page->url == $_SERVER["REQUEST_URI"]){ ?>
    </section>
  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div><!-- /inner wrap -->
</div><!-- /off-canvas-wrap -->

<!-- end menu -->

</div><!-- /row -->

</div><!--/wrapper-->
<!-- /End main page markup -->
<?php 
/* Included common footer markup */
include("./includes/footer.inc");
?>

<!-- add any post footer specific to the page here -->

<?php
/* Included common <scripts> */
include("./includes/footscripts.inc");
?>

<!-- add any scripts like foundation plugins specific to this page here -->

<!-- initialize foundation -->
<script src="<?php echo $config->urls->templates?>js/foundation/foundation.offcanvas.js"></script>
    <script>
      $(document).foundation();
    </script>

<?php
/* Wrapping up the page */
include("./includes/foot.inc"); 

} //end if for page URL

[reems]

First of all Joss. I am also not an artist, but I wish I was the kind of "not an artist" as you are, seeing your new website design . It is really great. I'm curious to the animations.

I agree with MuchDev that your problem is maybe caused by pure html/jquery problems as open divs etc.

But the only way to check this properly is to look not at the templates with all the php and includes inside but to the generated page and its source. Could you post that one or do you have it online?

[videokid]

In that first template you have

offcanvas : {
    close_on_click : true,
  }

in the second you haven't...

BTW, delete the comma after 'true', that might result in an error.... [some browsers]

Edit: I think Reems has indeed a valid point... 

Edited September 12, 2014 by videokid

[Joss]

Hi Video kid - that doesn't make any difference. I think close_on_click might be true on default, can't remember now.

Reems - thanks! The animations are done in Adobe Edge Animate. The top one has the crane driver raising and lowering the phone (complete with the wheel turning, his arm moving etc) plus the forman guiding him, the dogs head moving and the chap carrying the bricks wobbling. The draftsman is drawing and the minstrel is tapping his foot, strumming the lute and shaking his head. I should probably compose some music for him.

I think this has something to do with the way I am removing bits of code when rendering the template - I will look at a different approach.

[sforsman]

Thanks Joss. And now just to make sure; on that child template, if you change

echo $page->main_image->width(400)->url;

to

echo $page->main_image->url;

...everything works just fine and dandy, even when rendered through the basic-page template?

[Joss]

@sforsman

Yep.

[sforsman]

Right.

I know this might sound silly but have you checked the generated HTML for any PHP warnings or notifications? These could happen during the resizing of the image. Also have you checked your browsers console for any JS errors?

[Joss]

Yes I have checked.

[videokid]

so, if I understand correctly, something like this you'd like to have in your page/sub-page:

http://www.forul.be/zurb/ ?

btw you're right, click_on_true is default...

[Joss]

Yep, basically that.

I am beginning to think this is a server error to do with the way I am grabbing just a part of the sub-page template that is doing something odd. So I need to eliminate that first.

[videokid]

Actually me too

sub-page is the proper template for the child page. It uses if ($page->url == $_SERVER["REQUEST_URI"]) { } to remove header and footer info for when the sub-page child is rendered into the parent page.

 

The resize does not appear to be an issue when this page/template is called directly.

I have a feeling, like this was addressed before: open div [or similar] somewhere

[Joss]

No markup issues - after all, it works fine without the width() command.

[videokid]

This IS weird LOL
could be the 'big' image stretched something so it seemed everything was OK...

so the $page->main_image has a limit [1]?