Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » <% Control %> for a three column display in a template?

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

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

Page: 1
Go to End
Author Topic: 4374 Views
  • Todd
    Avatar
    31 Posts

    <% Control %> for a three column display in a template? Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5490 Posts

    Re: <% Control %> for a three column display in a template? Link to this post

    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

  • Todd
    Avatar
    31 Posts

    Re: <% Control %> for a three column display in a template? Link to this post

    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

  • sagencreative
    Avatar
    Community Member
    5 Posts

    Re: <% Control %> for a three column display in a template? Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5490 Posts

    Re: <% Control %> for a three column display in a template? Link to this post

    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 %>">

  • sagencreative
    Avatar
    Community Member
    5 Posts

    Re: <% Control %> for a three column display in a template? Link to this post

    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.

  • Garrett
    Avatar
    Community Member
    245 Posts

    Re: <% Control %> for a three column display in a template? Link to this post

    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

  • simon_w
    Avatar
    Forum Moderator
    471 Posts

    Re: <% Control %> for a three column display in a template? Link to this post

    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 %>

    4374 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.