Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

<% Control %> for a three column display in a template?


Reply


8 Posts   4575 Views

Avatar
Todd

31 Posts

9 May 2008 at 10:11am

Hi,

I created a "PageHolder" in order to list the the "Children" onto the page.

I would like to list three images (images created in the child/subpages of PageHolder") per row.

The three images are aligned and spaced via divs css classes, i.e:

<div class="left_sect">
<img src=... />
</div>

<div class="middle_sect">
<img src=... />
</div>

<div class="right_sect">
<img src=... />
</div>

Is there a < %control % > that will allow me to substitute the div classes so everything aligns correctly, or will need to create some sort of function in the page_controller class using the dataobject class?

Thanks,

Todd

Avatar
Willr

Forum Moderator, 5513 Posts

10 May 2008 at 10:59am

if you want a 3 column layout couldnt you just make each div 33% wide then float each div left so you give the impression of 3 columns.

1 nasty way to do it in the template if you dont want to make a method in the controller is to use the $Pos built into DataObject. So you will get 1, 2, 3, 4..... so the left ones have class="1" class="4" class"7" so you can use a bit of basic math to style all the 1,4,7,10... leftwards. 2,5,8,11 are the center divs, 3,6,9,12 are the right hand side class's.

I told you it was a nasty method :P

Avatar
Todd

31 Posts

11 May 2008 at 9:51am

Edited: 11/05/2008 10:10am

Hi Willr,

I was hoping to use a modulus. Excepting the first row, the 1st column you have a modulus of 1, the 2nd, 2, and the 3rd, 0.

Now I just have to convert it to code :-).

What do you think?

Todd

Avatar
sagencreative

Community Member, 5 Posts

17 June 2008 at 11:59am

I am in the same situation, and can't float divs as a result of the Yahoo grids framework which I am adhering to. I need to create opening and closing tags dynamically based on the modulus. In the docs it states that you can use <% if $param = value %> blocks. When I do this with $Pos, I get an syntax error (unexpected '}').

First test isn't using modulus, just trying to class the first object differently. This is what I tried:

<% control ChildProducts %>
   <% if $Pos=1 %>
   <div class="yui-u first">
<% else %>
    <div class="yui-u">
<% end_if %>
      <% include ProductGroupItem %>
   </div>
<% end_control %>

Seems pretty straightforward to me according to the docs. Any help?

Thanks,
Matt

Avatar
Willr

Forum Moderator, 5513 Posts

17 June 2008 at 12:12pm

try removing the $ from the Pos. If something is in the <% %> you dont need to use $. If you are only needing to apply a 'first' class to the first element then you can also use <% if First %>

<div class="yui-u <% if First %>first<% end_if %>">

Avatar
sagencreative

Community Member, 5 Posts

18 June 2008 at 12:42pm

Ok,
I actually did it a bit more "Properly" this time:

As I am using this in the ecommerce module, here is the code that I put into Product.php:

   /*
    * Returns true if the object is the first in a row of length passed
    */

   function IsFirstInRow($rowLength = 3) {
      if( 1 == ($this->Pos() % $rowLength)) {
         return true;
      } else {
         return false;
      }
   }
   
   /*
    * Returns true if the object is the last in a row of length passed
    */

   function IsLastInRow($rowLength = 3) {
      if( 0 == ($this->Pos() % $rowLength)) {
         return true;
      } else {
         return false;
      }
   }

This way you can pass the desired length of the row if you want to have different layouts in different templates. Here is part of the ProductGroup.ss template I modified to use Yahoo Grids layout:

<% if ChildProducts %>
<% control ChildProducts %>
            <% if IsFirstInRow(3) %>
<div class="yui-gb">
<div class="yui-u first">
<% else %>
<div class="yui-u">
<% end_if %>
<% include ProductGroupItem %>
</div>
<% if IsLastInRow(3) %>
   
</div>
<% end_if %>
<% if Last %>
<% if IsLastInRow(3) %>
<% else %>
</div>
<% end_if %>
<% end_if %>
<% end_control %>
      <% end_if %>

If someone wants to tell me how to modify this on a more "core" level, that would be good, because really any DataObjectSet should be able to access this method, just like $Pos, $First, $Last, etc.

Hope this is helpful.

Avatar
Garrett

Community Member, 245 Posts

12 July 2008 at 6:26am

Hi,

I am trying to create a pagination concept in a portfolio and because I can't use PHP logic in my template I am having a heck of a time.

I created a function like yours in my Page Controller:

class PortfolioPage_Controller extends Page_Controller {
   
function IsNewPage() {
if(0 == ($this->Pos() % 12)) {
return true;
} else {
return false;
}
   
}

And in my template, I have:

<% control Children %>
<% if(IsNewPage()) { %>
<div class="panel">
<% } %>

<div class="thumb-module"><div><img src="assets/Uploads/portfolio/01.png" alt="Client pic"/></div><a href="$Link">Client Name $Pos</a></div>

<% if(IsNewPage()) { %>
</div>
<% } %>
<% end_control %>

What is wrong with this code? In fact, no matter what I do in this function, it has NO effect on the template. I cannot even echo the return of it in the template so it's hard to debug.

All I need to do is to write certain HTML every 12 items. Why is this so hard?!

Any help?

Thanks in advance,
Garrett

Avatar
simon_w

Forum Moderator, 474 Posts

12 July 2008 at 8:48am

The if statement in your template is incorrect. You'll want to use:

<% control Children %>
<% if IsNewPage %>
<div class="panel">
<% end_if %>

<div class="thumb-module"><div><img src="assets/Uploads/portfolio/01.png" alt="Client pic"/></div><a href="$Link">Client Name $Pos</a></div>

<% if IsNewPage %>
</div>
<% end_if %>
<% end_control %>