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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

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

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

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


Go to End


8 Posts   5697 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, 5523 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, 5523 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
(deleted)

Community Member, 473 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 %>