Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2006-11-07 18:58:02

decoderltd
Member
From: London
Registered: 2006-06-20
Posts: 248
Website

Multi Column flow

Hi all,

I’m trying without success to create a three column portfolio layout that displays information as follows:

Column A: Project Client
Column B: Project image
Column C: Project Info

The idea is that Column A lists all the clients and as you click on a name it populates Column B (Project image) and Column C (Project info).

Can anyone please help? Thanks.

Offline

#2 2006-11-07 19:57:49

soulship
Member
From: Always Sunny Charleston
Registered: 2004-04-30
Posts: 669
Website

Re: Multi Column flow

Well I assume you know it will take a page refresh unless you’re going to pull out some ajax trickery…

But I think you should be able to do this fairly easily just with article images and article body tags. I see this as being in your page code and your article forms to keep it clean and simple.

  1. So you have your page with a container div to house a list of articles <txp:article_custom> (use the tag builder to narrow the scope) put that in your first column pulling all the “client” articles from the db, you can even specify a list form if you want…
  2. In your article form you make your column 2 container div that has the article image/s.
  3. Also in your article form, you make a container div for your third column that has <txp:body>

That is a basic explanation of how you can quickly do everything you are describing. Hope that puts you in the right direction.

Offline

#3 2006-11-10 12:04:00

decoderltd
Member
From: London
Registered: 2006-06-20
Posts: 248
Website

Re: Multi Column flow

Sorry for the late reply Jamie, I’ve been off work for the last few days.

Thank you for your advice, I’ll work on this and see if I can get it working. On the subject of Ajax trickery, is this a difficult thing to achieve as I would like the page to automatically refresh if possible.

Offline

#4 2006-12-08 23:58:16

decoderltd
Member
From: London
Registered: 2006-06-20
Posts: 248
Website

Re: Multi Column flow

I’ve been playing around trying to get this to work for some time now, and the site needs to go live next week – I’d really appreciate some further help. Soulship has helped me make a start, here’s where I’m at so far…

The page code:
<txp:if_article_list>
<div class="columns-2-A">
<div class="columns-2-A"><!-- nested column -->
<txp:article allowoverride="0" form="decoder_portfolio_form" limit="100" listform="decoder_portfolio_listform" pgonly="0" searchall="0" searchsticky="0" sort="Category2 asc" status="4" />
</div><!-- end of nested column -->
</div>
</txp:if_article_list>

<txp:if_individual_article>
<txp:article limit="1" form="decoder_portfolio_form" />
</txp:if_individual_article>

Listform:
<div class="columns-2-A linklist">

<txp:if_different>
<h3><txp:category2 title="y" section="portfolio" wraptag="ul" title="1" /></h3>
</txp:if_different>
<ul>
<li><txp:permlink><txp:title /></txp:permlink></li>
</ul>

</div><!-- end of column-2-A -->

Form:
<div class="columns-2-A portfolio">

<div class="columns-2-A portfolio"><!-- nested column -->
</div><!-- end of nested column -->

<div class="columns-2-B portfolio"><!-- nested column -->
<h4><txp:category1 title="yes" wraptag="ul"/><txp:title /></h4>
<p><txp:body /></p>
</div><!-- end of nested column -->

</div><!-- end of column-2-A -->

<div class="columns-2-B portfolio">
<txp:hak_article_image/>
</div><!-- end of column-2-B -->

Anyone got an idea where I’m going wrong?

Last edited by decoderltd (2009-05-13 10:09:09)

Offline

#5 2006-12-09 08:54:20

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: Multi Column flow

I take it you want the list of jobs to appear alongside the individual project. At the moment it’s only called from within the if_article_list area, so when you are viewing an individual article it won’t appear.

For the list of jobs to appear on the individual article page too, you need to call txp:article twice within the if_individual_article area, once in the div columns-2-A (as you already have it but with your listform called as a normal form=), and again then with limit=1 for the article that should appear.

<txp:if_article_list>
<div class="columns-2-A">
<div class="columns-2-A"><!-- nested column -->
<txp:article allowoverride="0" form="decoder_portfolio_form" limit="100" listform="decoder_portfolio_listform" pgonly="0" searchall="0" searchsticky="0" sort="Category2 asc" status="4" />
</div><!-- end of nested column -->
</div>
</txp:if_article_list>

<txp:if_individual_article>
<div class="columns-2-A">
<div class="columns-2-A"><!-- nested column -->
<txp:article allowoverride="0" limit="100" form="decoder_portfolio_listform" pgonly="0" searchall="0" searchsticky="0" sort="Category2 asc" status="4" />
</div><!-- end of nested column -->
</div>
<txp:article limit="1" form="decoder_portfolio_form" />
</txp:if_individual_article>

I think that should work. Otherwise try txp:article_custom section="portfolio" ... within the if_individual_article area in div columns-2-A.


TXP Builders – finely-crafted code, design and txp

Offline

#6 2006-12-11 22:18:19

decoderltd
Member
From: London
Registered: 2006-06-20
Posts: 248
Website

Re: Multi Column flow

Many thanks Jakob, I’ll try that out and get back with the results.

Offline

Board footer

Powered by FluxBB